Disable Week Days on DatePicker Calendar with jQueryUI

Question

I am working with the datepicker from jQuery-UI and I was wondering if there was anyway to disable/modify the calendar for it to only display month and year and only that.

I tried the answer here jQuery UI Datepicker - Disable specific days, but it did not quite do what I wanted. It was not really working and the I wanted to disable specific datepicker not all of them.

Can someone help at all with this?

Thanks in advance.

PS: so far my code looks like this:

$(".crud_date_picker_month").datepicker({
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    dateFormat: 'yy-mm'
});

jQuery UI version 1.8.21

The can see code here: http://jsfiddle.net/VJADH/

What's the point of using the datepicker then? Just use two selects. — j08691, Apr 23 '13 at 15:53
Your submission title suggests one thing and the text asks for another. Make up your mind. — hyankov, Apr 23 '13 at 15:54
And another thing, you code shows the `datetimepicker` which isn't a jQuery UI widget. — j08691, Apr 23 '13 at 15:55
anyway, the question is duplicated. http://stackoverflow.com/questions/2208480/jquery-ui-datepicker-to-show-month-year-only — daniel__, Apr 23 '13 at 15:59
@loops: it isn't please re-read the post, what was on the other question was not quite what I was looking for... — AKFourSeven, Apr 23 '13 at 16:10

score 3 · Accepted Answer · answered Apr 23 '13 at 15:56

3

I was wondering if there was anyway to disable/modify the calendar for it to only display month and year and only that.

To only display month and year using CSS:

.ui-datepicker-calendar{
    display:none;    
}

DEMO - Only show Month/Year using CSS

If you need to do it programmatically you can add the following code:

$(".date-picker").focus(function () {
    $(".ui-datepicker-calendar").hide();
});

DEMO - Only show Month/Year programmatically

answered Apr 23 '13 at 15:56

Nope

22,147
7
47
72

issue is if I do that it will remove it for all my other calendar and I just want to do it on one or two and I possibly have 5 or more of them)... – AKFourSeven Apr 23 '13 at 16:00
1

@AKFourSeven: You can do it programmatically as well. I added that version too now. Either-way if you want to target a specific date picker, you can either programmatically do it when you open the data-pickers you are interested in or give each date-picker an `id` and add that to the CSS or programmatic solution, similar to: `$("#myDatePicker .ui-datepicker-calendar")` or `#myDatePicker .ui-datepicker-calendar{ display:none;}` There is many ways of doing it. – Nope Apr 23 '13 at 16:02
thanks just thought about it as well, this was quite on point, thanks a lot – AKFourSeven Apr 23 '13 at 16:09

score 0 · Answer 2 · answered Apr 23 '13 at 15:52

0

To disable the month and year (as per your submission title!!), hide the header:

.ui-datepicker-header {
    display: none;
}

http://jsfiddle.net/VJADH/1/

answered Apr 23 '13 at 15:52

hyankov

4,049
1
29
46

Disable Week Days on DatePicker Calendar with jQueryUI

2 Answers2