[英]Daterangepicker unclickable old date
I'm using this JavaScript component for choosing date ranges, and I have a problem in the UI. 我正在使用此 JavaScript组件选择日期范围,并且UI中存在问题。
As you can see in the image, you can select any date in the left calendar and what I'm trying to do is a hotel reservation system. 正如您在图像中看到的,您可以在左侧日历中选择任何日期,而我想做的就是酒店预订系统。 The right calendar works perfectly while the left is not.
右边的日历可以完美地工作,而左边的日历则不能。 How can I deactivate or make the old dates unclickable?
如何停用旧日期或使其无法点击? Is there a hack for this?
为此有黑客吗?
HTML: HTML:
<input type="text" name="reservation" id="reservation" class="input-daterange form-control pull-right active">
Initialization code: 初始化代码:
$('.input-daterange').daterangepicker({
"opens": "right"
});
In my php file, I can validate it with this: 在我的php文件中,我可以使用以下命令进行验证:
$reservation = explode("-", \Request::input('reservation'));
$from = date('Y-m-d', strtotime($reservation[0]));
$to = date('Y-m-d', strtotime($reservation[1]));
$now = new DateTime("today");
$day1 = new DateTime($from);
$day2 = new DateTime($to);
$diff = date_diff($day1, $day2, true);
$days = $diff->format('%a');
if ($day1 > $day2 || $day1 < $now || $days == 0) {
echo "invalid";
}
But what if I want to do it directly in the UI? 但是,如果我想直接在UI中执行该操作怎么办?
Below code might work try this: 下面的代码可能有效,请尝试以下操作:
var todayDate = new Date();
var todayMin = new Date(todayDate.getFullYear(), todayDate.getMonth(), todayDate.getDate(), 0, 0, 0, 0);
$('.input-daterange').daterangepicker({
"opens": "right",
"minDate": todayMin
});
You have to do like below code :- 您必须执行以下代码:-
$(function() {
$( "#from" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate: 0", selectedDate );
}
});
$( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
It will generate a restricted date range. 它将生成一个受限制的日期范围。
$(".input-daterange").datepicker({dateFormat:'mm/dd/yy', minDate: new Date(2010,11,12) });
you can try this also. 您也可以尝试一下。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.