CODEWITHSUNDEEP
javascriptjquerydatepicker
Ben Sinclair
Ben Sinclair

Reputation: 3986

JQuery Datepicker without year issue with minDate and maxDate set

I have a JQuery datepicker that allows you to select the date and month. The year is hidden.

All works fine except when I add minDate and maxDate to the datepicker settings.

The reason why I've set this is so they cannot change years and I also want it to allow leap years. So I set the min and max dates to 2012 (the last leap year) so that they can choose Feb 29th.

When I click in the date text box, it comes up with December 31 selected even though April 23 is the set date. As soon as I remove minDate and maxDate it selects April 23 when I select the date text box.

Is this a bug or is there something I can do to rectify this?

My code:

$('#date').datepicker({
    altField: '#date_alt',
    altFormat: 'mm-dd',
    changeMonth: true,
    changeYear: false,
    dateFormat: 'MM d',
    showAnim: 'slideDown',
    yearRange: '-100:+0',
    minDate: new Date(2012, 1-1, 1),
    maxDate: new Date(2012, 12-1, 31),
    beforeShow: function(el, obj) {
       obj.dpDiv.addClass('datepicker_hideyear');
    },
    onClose: function(el, obj){
       setTimeout(function() { obj.dpDiv.removeClass('datepicker_hideyear'); }, 1000);
    }
});

UPDATE:

Setting the defaultDate to a 2012 date does the trick but doesn't set the value of the datepicker. It only loads April 23 2012 and the default date. 

defaultDate: new Date('04/23/2012'),

I have to use setDate to "select" April 23 2012 and set is as the value but it ends up with exactly the same results. 

$('#date').datepicker('setDate', new Date('04/23/2012'));

JSFiddle.

Upvotes: 3

Views: 1557

Answers (2)

Joel
Joel

Reputation: 2257

The problem is that you're not specify a year when you add the value to your input. Adding an alert into your beforeShow will show that you're actually getting 2014 (alert($(this).datepicker("getDate"));. Since this year isn't in your range, it defaults it to the max date possible.

Removing the value from your input and adding the default date will make this work properly:

<input type="text" name="date" id="date" />

and in your datepicker initialization add:

defaultDate: new Date(2012, 4-1, 23),

After a bit more digging, it looks like this is a bug with jQueryUI. If you don't specify a year format in the dateformat string, it will default to the current year no matter what. That's why setdate fails.

Here is a workaround though: updated fiddle

Here's what I added

<div style="position:relative; display: inline-block;">
    <input type="text" id="date-placeholder" value="" />
    <input type="text" name="date" id="date" value="" style="visibility:hidden; position:absolute; left:0;" />
</div>

This is basically creating a placeholder for displaying the information to the user. The "#date" input is set to visibility:hidden and absolutely positioned over the placeholder (to make the datepicker pop up where it should). I didn't set display:none because the datepicker would fail to work, but jquery still considers visibility:hidden to be visible so it still works.

Then in the javascript, I setup a new event:

$("#date-placeholder").click(function () {
    $("#date").datepicker("show");
});

This just shows the datepicker manually when the user clicks the textbox. Then, in the onclose event of the datepicker:

onClose: function (el, obj) {
            setTimeout(function () {
                obj.dpDiv.removeClass('datepicker_hideyear');
            }, 1000);
            var val = $("#date").val();
            val = val.substr(0, val.length - 4);
            $("#date-placeholder").val(val);
        }

Simply get the current value of the date field, and remove the last 4 characters (the year) and set the placeholder to that value.

You also have to change the dateFormat string when you initialize. This is so that there is a year for the control to set properly.

dateFormat: 'MM d yy',

The code could be fixed up, but take a look at the fiddle and you'll see how it's working.

Upvotes: 2

Bic
Bic

Reputation: 3134

Instead of using a value on the input, can you not use the defaultDate property of the datepicker method?

$('#date').datepicker({
    defaultDate: new Date('04/23/2012');
    altField: '#date_alt',
    altFormat: 'mm-dd',
    changeMonth: true,
    changeYear: false,
    dateFormat: 'MM d',
    showAnim: 'slideDown',
    yearRange: '-100:+0',
    minDate: new Date(2012, 1-1, 1),
    maxDate: new Date(2012, 12-1, 31),
    beforeShow: function(el, obj) {
       obj.dpDiv.addClass('datepicker_hideyear');
    },
    onClose: function(el, obj){
       setTimeout(function() { obj.dpDiv.removeClass('datepicker_hideyear'); }, 1000);
    }
});

Upvotes: 1

Related Questions