CODEWITHSUNDEEP
phpjquerydatepicker
Eric T
Eric T

Reputation: 1026

jQuery UI DatePicker From and To

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

Upvotes: 0

Views: 5396

Answers (3)

Saranya Sadhasivam
Saranya Sadhasivam

Reputation: 1294

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

Upvotes: 0

Zwen2012
Zwen2012

Reputation: 3498

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

Upvotes: 0

Sachin
Sachin

Reputation: 40970

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

Upvotes: 5

Related Questions