CODEWITHSUNDEEP
javascriptjqueryhtml
iamlarissa
iamlarissa

Reputation: 69

jquery DatePicker changing minDate option from dropdown

I'm using a jquery DatePicker. I have a dropdown and I need to reset the minDate option of DatePicker based from the dropdown. Here's the code snippet.

HTML

<input id="Date_From" name="Date_From">
<select id="Select" >
  <option value="Choice1">Choice1</option>
  <option value="Choice2">Choice2</option>
<select>

JS

  $("#Date_From").datepicker();
     $("#Date_To").datepicker();

  $('#Select').change(function () {
      var option = this.value;

      if (option == 'Choice1') 
      {
          $( "#Date_From" ).datepicker( "option", "minDate", new Date(2015, 1 - 1, 1) );
      }
      else if (option == 'Choice2') 
      {
          $( "#Date_From" ).datepicker( "option", "minDate", new Date(2015, 1 - 7, 1) );
      }
      else{
      }
    });

Upvotes: 1

Views: 1103

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

The problem is in the month calculation, you need to pass 7-1(6) for 01 Jul 2015

$("#Date_From").datepicker();
$("#Date_To").datepicker();

$('#Select').change(function() {
  var option = this.value;
  if (option == 'Choice1') {
    $("#Date_From").datepicker("option", "minDate", new Date(2015, 1 - 1, 1));
  } else if (option == 'Choice2') {
    $("#Date_From").datepicker("option", "minDate", new Date(2015, 7 - 1, 1));
  }
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.css" rel="stylesheet" />
<input id="Date_From" name="Date_From" />
<select id="Select">
  <option value="Choice1">Choice1</option>
  <option value="Choice2">Choice2</option>
</select>

Upvotes: 1

Related Questions