CODEWITHSUNDEEP
jqueryhtmlcss
ani_css
ani_css

Reputation: 2126

How to set maxDate and minDate with jquery ui datepicker?

I have date range below example and I want to set minimum date for my #checkout input. after selected a days from my #checkin.#checkout search date can't be more than 15 days for date range that is why I want to prevent it

$(function() {

  var dateFormat = "DD/MM/YY",
    from = $("#checkin,.checkin").datepicker({
      numberOfMonths: 2,
      firstDay: 1,
      minDate: 0,
      onSelect: function(selectedDate) {

        window.setTimeout($.proxy(function() {
          $(this).parents(".book-holiday").find("#checkout,.checkout").focus();
        }, this), 10);
        var yenitarih = new Date();
        var date = $(this).datepicker('getDate');
        date.setTime(date.getTime() + (1000 * 60 * 60 * 24));

        $("#checkout,.checkout").datepicker("option", "minDate", date);
      },
      isTo1: true,
    }).on("change", function() {
      to.datepicker("option", "minDate", getDate(this));
    }),
    to = $("#checkout,.checkout").datepicker({
      firstDay: 1,
      numberOfMonths: 2,
      minDate: 0,
      maxDate: +15,
      onSelect: function(selectedDate) {
        $(this).parents(".book-holiday").find(".popover-wrapper").addClass("open");
        $("#checkin,.checkin").datepicker("option", "maxDate", selectedDate);
      },
    }).on("change", function() {
      from.datepicker("option", "maxDate", getDate(this));
    });


});
<link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" rel="stylesheet" />

<div class="book-holiday">
  <input type="text" id="checkin" />
  <input type="text" id="checkout" />
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

Upvotes: 0

Views: 1762

Answers (2)

Mayank Patel
Mayank Patel

Reputation: 1571

You can use Moment.js for all the calculations regarding date stuff.

I have used onSelect event of #checkin and set the minDate and maxDate of #checkout date picker.

So whatever will be #checkin date #checkout will be 15 days after it.

Below is the Fiddle you can check.

Fiddle Link

EDIT

Please check below fiddle I dont have used Moment.js

Without Moment Fiddle

Upvotes: 1

O. Borcuhin
O. Borcuhin

Reputation: 244

You can try this one. It should work. You only need to create function daysBetween():

$(function() {
  // Const with max days diff
  var MAX_DAYS_DIFFERENCE = 15;
  // your start date -- Date instance. Paste your date
  // your end date -- Date instance. Paste your date
  var startDate = new Date().format('yyyy-mm-ddThh:MM:ss');
  var endDate = new Date().format('yyyy-mm-ddThh:MM:ss');

  var dateFormat = "DD/MM/YY";
  var from = $("#checkin,.checkin").datepicker({
      // You can set date format
      dateFormat: 'yyyy-mm-ddThh:MM:ss',
      maxDate: endDate,
      // Your code
      numberOfMonths: 2,
      firstDay: 1,
      onSelect: function(selectedDate) {

        startDate = $(this).datepicker('getDate');
        to.datepicker('option', 'minDate', startDate);
        // we compute the day difference and remove the maximum allowed date difference to find
        // how many days are above the difference and then we remove/add those days
        const daysDiff = daysBetween(startDate, endDate) - MAX_DAYS_DIFFERENCE;
        if (daysDiff > 0) {
          endDate.setDate(endDate.getDate() - daysDiff);
          to.datepicker('setDate', endDate);
        }
      },
      isTo1: true,
  });

  from.datepicker('setDate', startDate);

  var to = $("#checkout,.checkout").datepicker({
    firstDay: 1,
    numberOfMonths: 2,
    dateFormat: 'yyyy-mm-ddThh:MM:ss',
    minDate: startDate,
    maxDate: new Date() + 365 * 24 * 60 * 1000 * 1000,
    onSelect: function(selectedDate) {
      endDate = $(this).datepicker('getDate');
      from.datepicker('option', 'maxDate', endDate);
      // we compute the day difference and remove the maximum allowed date difference to find
      // how many days are above the difference and then we remove/add those days
      var daysDiff = daysBetween(startDate, endDate) - MAX_DAYS_DIFFERENCE;
      if (daysDiff > 0) {
        startDate.setDate(startDate.getDate() + daysDiff);
        from.datepicker('setDate', startDate);
      }
    },
  });
  to.datepicker('setDate', endDate);
});

Upvotes: 1

Related Questions