jQuery UI DatePicker From and To

Question

I have somethinng like below, and wanted to make sure from date shall not overpass to date which is not selectable(even after changing the date) and vice versa.

From: <input type="text" id="xx_from" value="<?php echo $date_from; ?>" />

To: <input type="text" id="xx_to" value="<?php echo $date_to; ?>" />

$j("#xx_from").datepicker({
      dateFormat: 'yy-mm-dd',
      maxDate: $j("#xx_to").val(),
      onSelect: function(){
        $j("#xx_to").datepicker( "refresh" );
      }
  });

  $j("#xx_to").datepicker({
      dateFormat: 'yy-mm-dd',
      minDate: $j("#xx_from").val(),
      onSelect: function(){
        $j("#xx_from").datepicker( "refresh" );
      }
  });

Possible duplicate of http://stackoverflow.com/questions/833997/end-date-greater-than-start-date-jquery-validation — RunningAdithya, Sep 27 '13 at 10:26

Sachin · Accepted Answer · 2013-09-27T10:33:06.660

if you see the documentation. You can get your query solved. You just need to set minDate and maxDate option in datepciker. Here is the code

$(function() {
    $( "#from" ).datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 3,
      onClose: function( selectedDate ) {
        $( "#to" ).datepicker( "option", "minDate", selectedDate );
      }
    });
    $( "#to" ).datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 3,
      onClose: function( selectedDate ) {
        $( "#from" ).datepicker( "option", "maxDate", selectedDate );
      }
    });
  });

Js Fiddle Demo

Ouch I dunno got date range over in the examples. My bad and thanks for pointing to me :) — Eric T, Sep 30 '13 at 01:05

Zwen2012 · Answer 2 · 2013-09-27T10:35:26.217

0

You have to set a min and a max date in the configs from the datepicker when you refresh it in the select listener.

edited Sep 27 '13 at 10:35

answered Sep 27 '13 at 10:30

Zwen2012

3,178
8
36
61

score 0 · Answer 3 · answered Sep 27 '13 at 10:40

Try the below, you need to call a function to set min date and max date while you select both start and end date.

DEMO HERE

// To set mindate in enddate
function customRange(input) 
{ 
return {
        minDate: (input.id == "end_date" ? $("#start_date").datepicker("getDate") : new Date())
      }; 
}

// To set maxdate in startdate
function customRangeStart(input) 
{ 
return {
        maxDate:(input.id == "start_date" ? $("#end_date").datepicker("getDate") : null)
      }; 
}

$(document).ready(function() {

   $('#start_date').datepicker(
   {
       beforeShow: customRangeStart,
       maxDate: null,
       dateFormat: "yy-mm-dd",
       changeYear: true
   });

   $('#end_date').datepicker(
   {
       beforeShow: customRange,
       dateFormat: "yy-mm-dd",
       changeYear: true
   });
});

jQuery UI DatePicker From and To

3 Answers3