Question

I have a pair of date fields, from and to, and am using jQuery 1.7.1, jQuery UI 1.8.16 and latest webshims. For from I need to set the minDate dynamically as the page loads AND it needs to be different from the minDate of the to field. The to field min is the from plus one day.

I tried to manage this by using setting a data-datepicker attribute on the two fields and populating from’s minDate using JavaScript inside the $ready function. Using the browser console I can see that the data-datepicker has the proper values after page load.

Unfortunately webshims doesn’t seem to be using these values.

  $("#mbdrFrom, #mbdrTo").datepicker();
  var fromDm = $('#mbdrFrom').data('max-date');
  $('#mbdrFrom').attr('data-datepicker', "{'minDate': "+getEarliestDate()+", 'maxDate':"+fromDm+"}");
  $('#mbdrFrom').getShadowElement().attr('data-datepicker', "{'minDate': "+getEarliestDate()+", 'maxDate':"+fromDm+"}");

I also tried just hardcoding the values in the HTML to see if I could get a better result:

<input type="date" id="mbdrFrom" value="01/05/2012" data-datepicker="{'maxDate': '01/05/2012', 'minDate':'11/18/2011'}">

No difference in functionality.

Help appreciated!

Answer 1

The answer, for posterity, is that in this scenario the values should be set on the input element’s min and max attributes.