0
jquery ui如何可能我需要15天之间的两个input..how我可以选择15天之间的两个日期吗？我的脑子里一片黑，我不能这样做，我为什么感到羞愧jquery ui日期范围两天之间的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>
恰到好处:) –
@recruit_man很乐意帮忙。 – KiRa