0

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/

7
  • jsfiddle.net/bopperben/DBpJe
    – daniel__
    Apr 23, 2013 at 15:51
  • 1
    What's the point of using the datepicker then? Just use two selects.
    – j08691
    Apr 23, 2013 at 15:53
  • 1
    Your submission title suggests one thing and the text asks for another. Make up your mind.
    – hyankov
    Apr 23, 2013 at 15:54
  • And another thing, you code shows the datetimepicker which isn't a jQuery UI widget.
    – j08691
    Apr 23, 2013 at 15:55
  • anyway, the question is duplicated. stackoverflow.com/questions/2208480/…
    – daniel__
    Apr 23, 2013 at 15:59

2 Answers 2

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


3
  • 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)... Apr 23, 2013 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, 2013 at 16:02
  • thanks just thought about it as well, this was quite on point, thanks a lot Apr 23, 2013 at 16:09
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/

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.