Prevent jQuery UI datepicker from changing the value of a text field if out of range

Question

I have a text field (in a form) set to display the jQuery UI datepicker on focus.

Using PHP (in the update screen) I populate the value of this text field (when the page loads) with a date string based on the previous end-user input for this particular record.

My problem is that I set my datepicker with the minDate and maxDate options, those limits tamper with the original value displayed in my text field.

If the text field string is less than the minimum value, then the text field is set to the value of minDate.

I need the original value to remain unchanged even if it falls out of the calendar range (minDate or maxDate values) unless the change is done by the user from the calendar.

Example:

minDate: 01-04-2013 (dd-mm-yy)
maxDate: 30-04-2013 (dd-mm-yy)
Original text field value: 16-03-2013 (dd-mm-yy)
Displayed text field value: 01-04-2013 (dd-mm-yy)

The idea is that the minDate and maxDate options limit the end-user to input/modify data within a certain defined period from the current date.

I am using jQuery UI Datepicker 1.8.16 and jQuery JavaScript library v1.6.2. Browsers: Internet Explorer 7 and later, Firefox

Answer 1

Here is one way to pull it off.

$(document).ready(function()
{
    var DateLimits = {min:null, max:null};

    DateLimits.min = new Date(Date.parse("01-01-2014"));
    DateLimits.max = new Date(Date.parse("12-31-2014"));

    $( "#datepicker" ).datepicker(
    {
        dateFormat: "mm-dd-yy",
        minDate: DateLimits.min,
        maxDate: DateLimits.max
    });
});

Here is the Fiddle: http://jsfiddle.net/DEfQL/1/

Inspiration from: How can I set the minDate/maxDate for jQueryUI Datepicker using a string?