CODEWITHSUNDEEP
jquery-uidatepicker
James Skemp
James Skemp

Reputation: 8571

jQuery UI Datepicker doesn't correctly default on mm/yy

We have a date field that we're accepting a month and year for. However, whenever the user selects the field the jQuery UI Datepicker defaults to the current month and year, and clears out whatever they've entered.

I've switched the formatting in a test case to mm/dd/yy and the Datepicker behaves correctly, so I'm fairly confident the basic code is correct.

Any suggestions on how this can be worked around?

Example code below:

<html>
<head></head>
<body>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.min.js"></script>
    <input type="text" id="asdf" value="07/2006" />
    <script type="text/javascript">
        $('#asdf').datepicker({
            changeMonth: true,
            changeYear: true,
            dateFormat: 'mm/yy',
            showButtonPanel: true
        });
    </script>
</body>
</html>

EDIT: To be a bit clearer, compare the Datepicker's date in the following case, where we supply a day in the input's value, and change the dateFormat option:

<html>
<head></head>
<body>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.min.js"></script>
    <input type="text" id="asdf" value="07/01/2006" />
    <script type="text/javascript">
        $('#asdf').datepicker({
            changeMonth: true,
            changeYear: true,
            dateFormat: 'mm/dd/yy',
            showButtonPanel: true
        });
    </script>
</body>
</html>

Upvotes: 2

Views: 1860

Answers (2)

Aerowind
Aerowind

Reputation: 216

I thought I understood your question right the first time but the other guy got me confused. The problem seems to be that datepicker doesn't see the format mm/yy as a real datetime format, so it's confused when trying to look up the current date, meaning you have to do something kind of funky as a workaround. I'm not saying this is the best way, but it's what I've worked out.

Do note that this uses Date.js

$('#asdf').datepicker({ changeMonth: true, changeYear: true, dateFormat: 'mm/yy',beforeShow: function(input, inst) 
{   //getter
    var defaultDate = $( "#asdf" ).datepicker( "option", "defaultDate" );
    //setter
    $( "#asdf" ).datepicker( "option", "defaultDate",   Date.parseExact($("#asdf").val(), "M/yyyy"));
}  });

Upvotes: 2

WildCrustacean
WildCrustacean

Reputation: 5966

It looks like it doesn't treat a month or year change as a 'select' operation, but does change the month/year when you click on a day. In other words, if you change the month and year but don't click on a day, it thinks you cancelled the operation.

You could try writing some code for the onChangeMonthYear event (docs) to read the selected month/year and close the calendar dialog yourself.

Upvotes: 0

Related Questions