skip to Main Content

jQuery:

$("#min").datepicker({maxDate: 0, changeMonth: true, changeYear: true });
$("#max").datepicker({maxDate: 0, changeMonth: true, changeYear: true });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<input type="text" class="form-control" name="from" id="min">
<span class="input-group-addon"> to </span>
<input type="text" class="form-control" name="to" id="max">

Anyone can please tell me Why this not working and How can I solve this?

2

Answers


  1. In this below example will help you here I have changed maxDate:0 to startDate:01/10/2018 and endDate:02/10/2018 so your max date will be feb 10 2018

    $("#min").datepicker({ startDate: "01/10/2018",
    endDate: "02/10/2018", changeMonth: true, changeYear: true });
    $("#max").datepicker({ startDate: "01/10/2018",
    endDate: "02/10/2018", changeMonth: true, changeYear: true });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
    <input type="text" class="form-control" name="from" id="min">
    <span class="input-group-addon"> to </span>
    <input type="text" class="form-control" name="to" id="max">
    Login or Signup to reply.
  2. Try this snippet. Added validations as well.

    function populateEndDate() {
      var date2 = $('#max').datepicker('getDate');
      date2.setDate(date2.getDate() + 1);
      $('#max').datepicker('setDate', date2);
      $("#max").datepicker("option", "minDate", date2);
    }
    
    $(document).ready(function() {
    
      $("#min").datepicker({
        dateFormat: "dd-M-yy",
        minDate: 'dateToday',
        onSelect: function(date) {
          populateEndDate();
        }
      }).datepicker("setDate", new Date());
      $('#max').datepicker({
        dateFormat: "dd-M-yy",
        minDate: 1,
        onClose: function() {
          var dt1 = $('#min').datepicker('getDate');
          var dt2 = $('#max').datepicker('getDate');
          if (dt2 <= dt1) {
            var minDate = $('#max').datepicker('option', 'minDate');
            $('#max').datepicker('setDate', minDate);
          }
        }
      }).datepicker("setDate", new Date());
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet" />
    
    <label for="">start</label>
    <input type="text" class="form-control" id="min" name="start">
    <label for="">end</label>
    <input type="text" class="form-control" id="max" name="end">
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search