jQuery Date Picker - disable all end dates if user has not select start date

Question

In My date picker I have certain constraints

End date should not be earlier than Start date -Done
Now my problem is User should not able to select End date without selecting the Start date

My Jquery for datepicker:

var dateToday = new Date(); 
$( function() {
  $( "#datepicker1" ).datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat:'dd-M-yy',
    //   minDate: dateToday,
    onClose: function (selected) {
      $("#end").datepicker("option", "minDate", selected);
    }
  });
  $( "#end" ).datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat:'dd-M-yy',
    // minDate: dateToday,
    onClose: function (selected) {
      $("#datepicker1").datepicker("option", "maxDate", selected);
    }
  });
});

Thank you so much for your reply , how to use that without affecting my previous code — Vishnu
– Vishnu, Commented Mar 23, 2018 at 12:18
Just disable the second datepicker by default and enable within onClose event handler of the first datepicker if a date value has been selected. — Alexander
– Alexander, Commented Mar 23, 2018 at 12:38
Ya I have disabled initially , but i could not able to enable — Vishnu
– Vishnu, Commented Mar 23, 2018 at 12:41

caramba · Accepted Answer · 2018-03-23 12:44:02Z

4

See the changes in:

onClose: function (selected) {
  if(selected.length <= 0) {
      // selected is empty
      $("#end").datepicker('disable')
  } else {
      $("#end").datepicker('enable');
  }
  $("#end").datepicker("option", "minDate", selected);
}

Demo here to give you an idea. Adopt to your needs.

var dateToday = new Date(); 
$( function() {
  $( "#datepicker1" ).datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat:'dd-M-yy',
    //   minDate: dateToday,
    onClose: function (selected) {
      if(selected.length <= 0) {
          // selected is empty
          $("#end").datepicker('disable');
      } else {
          $("#end").datepicker('enable');
      }
      $("#end").datepicker("option", "minDate", selected);
    }
  });
  $( "#end" ).datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat:'dd-M-yy',
    // minDate: dateToday,
    onClose: function (selected) {
      if(selected.length <= 0) {
          // selected is empty
          $("#datepicker1").datepicker('disable');
      } else {
          $("#datepicker1").datepicker('enable');
      }
      $("#datepicker1").datepicker("option", "maxDate", selected);
    }
  });
});

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.4/datepicker.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>



<input id="datepicker1" type="text">
<input id="end" type="text">

answered Mar 23, 2018 at 12:44

caramba

22.5k20 gold badges94 silver badges134 bronze badges

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

2 Comments

Vishnu Over a year ago

Thank you so much its Working Perfectly

Alexander Over a year ago

Oh, your answer is faster and better ;)

Alexander · Accepted Answer · 2018-03-23 13:02:46Z

1

In first you should disable the #end datepicker by default. Then modify the onClick handler of the #datepicker1 as following:

onClose: function (selected) { 
  $("#end")
    .datepicker("option", "minDate", selected)
    .datepicker("option", "disabled", !selected);
}

edited Mar 23, 2018 at 13:02

answered Mar 23, 2018 at 12:47

Alexander

4,5527 gold badges31 silver badges46 bronze badges

2 Comments

Vishnu Over a year ago

Working perfect, If i select start date then only my end date is enabling, Once i choose both , I am deleting the start date now the end date is disabling again but its containing the latest chosen value

Alexander Over a year ago

@Vishnu , I forget the start date may be removed. I have updated the code to lock end datepicker again when start date will be removed.

Collectives™ on Stack Overflow

jQuery Date Picker - disable all end dates if user has not select start date

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related