javascript - jquery ui日期范围两个日期之间15天

Question

如何使用 jquery ui 我需要在两个输入之间间隔 15 天..如何在两个日期之间选择 15 天？我的脑子一片漆黑，我做不到，所以我感到羞耻

if you want to details please click here

$(function() {
  var ilktarih = ['2017-03-23'];
  var sontarih = ['2017-04-10']
  var bostarihler = ['2017-03-15', '2017-03-16', '2017-03-17', '2017-03-18', '2017-03-19', '2017-03-20', '2017-03-21', '2017-03-22', '2017-03-23', '2017-03-24', '2017-03-25', '2017-03-26', '2017-03-27', '2017-03-28', '2017-03-29', '2017-03-30'];
  var dolutarihler = ['2017-02-22', '2017-02-23', '2017-02-24', '2017-02-25', '2017-02-26', '2017-02-27', '2017-02-28', '2017-03-01', '2017-03-02', '2017-03-03', '2017-03-04', '2017-03-05', '2017-03-06', '2017-03-07', '2017-03-08', '2017-03-09', '2017-03-10', '2017-03-11', '2017-03-12', '2017-03-13', '2017-03-14'];
  var sstarihler = [];

  var dateFormat = "mm/dd/yy",
    from = $("#checkin").datepicker({
      changeMonth: true,
      numberOfMonths: 2,
      firstDay: 1,
      minDate: new Date(ilktarih),
      maxDate: new Date(sontarih),
      onSelect: function(selectedDate) {
        var yenitarih = new Date();

        var date = $(this).datepicker('getDate');
        date.setTime(date.getTime() + (1000 * 60 * 60 * 24))

        $("#checkout").datepicker("option", "minDate", date);
      },

      beforeShowDay: function(date) {
        var y = date.getFullYear().toString(); // get full year
        var m = (date.getMonth() + 1).toString(); // get month.
        var d = date.getDate().toString(); // get Day
        if (m.length == 1) {
          m = '0' + m;
        } // append zero(0) if single digit
        if (d.length == 1) {
          d = '0' + d;
        } // append zero(0) if single digit
        var currDate = y + '-' + m + '-' + d;

        if (jQuery.inArray(currDate, dolutarihler) >= 0) {
          return [false, "ui-highlight"];
        }

        if (jQuery.inArray(currDate, bostarihler) >= 0) {
          return [true, "ui-bos"];
        }

        if (jQuery.inArray(currDate, sstarihler) >= 0) {
          return [false, "ui-ss"];
        } else {
          return [true];
        }

      },
      isTo1: true,
    }).on("change", function() {
      to.datepicker("option", "minDate", getDate(this));
    }),
    to = $("#checkout").datepicker({
      changeMonth: true,
      changeYear: true,
      firstDay: 1,
      numberOfMonths: 2,
      minDate: new Date(ilktarih),
      maxDate: new Date(sontarih),
      onSelect: function(selectedDate) {
        $("#checkin").datepicker("option", "maxDate", selectedDate);
      },
      beforeShowDay: function(date) {
        var y = date.getFullYear().toString(); // get full year
        var m = (date.getMonth() + 1).toString(); // get month.
        var d = date.getDate().toString(); // get Day
        if (m.length == 1) {
          m = '0' + m;
        } // append zero(0) if single digit
        if (d.length == 1) {
          d = '0' + d;
        } // append zero(0) if single digit
        var currDate = y + '-' + m + '-' + d;

        if (jQuery.inArray(currDate, dolutarihler) >= 0) {
          return [true, "ui-highlight-donus"];
        }


        if (jQuery.inArray(currDate, bostarihler) >= 0) {
          return [true, "ui-bos"];
        }


        if (jQuery.inArray(currDate, sstarihler) >= 0) {
          return [true, "ui-ss-donus"];
        } else {
          return [true];
        }

      }
    }).on("change", function() {
      from.datepicker("option", "maxDate", getDate(this));
    });

  function getDate(element) {
    var date;
    try {
      date = $.datepicker.parseDate(dateFormat, element.value);
    } catch (error) {
      date = null;
    }

    return date;
  }
});

.form {
  width: 960px;
  margin: 120px auto;
}

.form input {
  width: 250px;
  padding: 10px;
}

.ui-highlight .ui-state-default {
  background: red !important;
  border-color: red !important;
  color: white !important;
  cursor: no-drop;
}

.ui-bos .ui-state-default {
  background: green !important;
  border-color: green !important;
  color: white !important;
}

.ui-ss .ui-state-default {
  background: yellow !important;
  border-color: yellow !important;
  color: gray !important;
  cursor: help;
}

.ui-ss-donus .ui-state-default {
  background: yellow !important;
  border-color: yellow !important;
  color: gray !important;
  cursor: help;
}

.ui-highlight-donus .ui-state-default {
  background: red !important;
  border-color: red !important;
  color: white !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />

<div class="form">
  <input type="text" id="checkin" />
  <input type="text" id="checkout" />
</div>


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

Answer 1

也许你想要这样的东西？

$(function () {
    $("#txtFrom").datepicker({      
       onSelect: function(selectedDate) {
            //$("#cal4").datepicker("setDate", selectedDate);
            var date = $(this).datepicker("getDate"); 
            date.setDate(date.getDate() + 15);
            $("#txtTo").datepicker("setDate", date);
            $("#txtTo").datepicker("option", "minDate", selectedDate);
            $("#txtTo").datepicker("option", "maxDate", date);
        }
    });
    
    
  $("#txtTo").datepicker({
   changeMonth: true,
   changeYear: true
  })  
    
});

<link href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<input type="text" id="txtFrom" />

<input type="text" id="txtTo" />