7

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

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
yhammad
  • 85
  • 1
  • 4
  • 2
    Have you figured this out at all? I'm having the same issue. – phazei May 22 '13 at 04:26
  • My best bet (according to some of the posts I read) is that some people bind a function to the 'beforeShowDay' option to enable certain dates (http://articles.tutorboy.com/2010/09/03/jquery-ui-datepicker-disable-specified-dates/). I tried returning true if the date in the calendar matches the original date or lies between the date range and false otherwise. Never worked for me. – yhammad May 22 '13 at 09:05

2 Answers2

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?

Community
  • 1
  • 1
Brandon Johnson
  • 534
  • 4
  • 12
0

You can modify the options in 'beforeShow' and reset them in 'onClose'. Like this:

$('#datepicker').datepicker('option', 'beforeShow', function (date) {
    return {
        'minDate': '+0D',
        'maxDate': '+1Y'
    };
});
$('#datepicker').datepicker('option', 'onClose', function (date) {
    $('#datepicker').datepicker('option', {
        'minDate': null,
        'maxDate': null
    });
});

While I don't really like my approach, I haven't found any other working solution for this problem. A simple option to prevent the jQuery Datepicker from modifying the orignial value would be nice.

Amryn
  • 51
  • 1
  • 3