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 stackoverflow.com/questions/833997/… — RunningAdithya
– RunningAdithya, Commented Sep 27, 2013 at 10:26

Sachin · Accepted Answer · 2013-09-27 10:33:06Z

5

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

edited Sep 27, 2013 at 10:33

answered Sep 27, 2013 at 10:27

Sachin

41.1k7 gold badges94 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Eric T Over a year ago

Ouch I dunno got date range over in the examples. My bad and thanks for pointing to me :)

Zwen2012 · Accepted Answer · 2013-09-27 10:35:26Z

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, 2013 at 10:35

answered Sep 27, 2013 at 10:30

Zwen2012

3,5289 gold badges44 silver badges71 bronze badges

Comments

Saranya Sadhasivam · Accepted Answer · 2013-09-27 10:40:09Z

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
   });
});

Collectives™ on Stack Overflow

jQuery UI DatePicker From and To

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related