我知道如何禁用当前日期的过去几天。它与jsfiddle合作
但我的问题是如何在选择check in
日期后禁用以前的日期。
我的jquery
$(function () {
$('#datetimepicker1').datetimepicker({
format: 'YYYY-MM-DD'
});
$('#datetimepicker2').datetimepicker({
format: 'YYYY-MM-DD'
});
$('#from_date').datetimepicker({
format: 'YYYY-MM-DD'
});
$('#to_date').datetimepicker({
format: 'YYYY-MM-DD'
});
});
我的看法
<div class='col-md-offset-2 col-sm-3 col-xs-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' name="from_date" id="from_date" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-sm-3 col-xs-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker2'>
<input type='text' name="to_date" id="to_date" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-sm-1 col-xs-12'>
<button class="btn btn-info" id="search">SEARCH</button>
</div>
你试过这样的吗?
$('#datetimepicker').datetimepicker({ minDate:new Date('2016-10-25')}); //set check in date here
编辑
对于格式化日期
$('#datetimepicker').datetimepicker({
format: 'YYYY-MM-DD',
minDate:new Date('2016-10-25')
});
编辑
设置自动和动态
请参阅jsfiddle
只需覆盖datetimepicker中的minDate属性
var checkin = '2016-10-24';
$('#datetimepicker1').data("DateTimePicker").minDate(checkin);
我相信您希望控制结束日期大于开始日期,如果是下面的代码可能对您有帮助,它会检查开始日期是否小于或等于结束日期,以及结束日期是否大于或等于开始日期,然后它设置预订的最短时间段,您可以根据需要进行设置,或者只将.minDate('#start')。val()设置为结束日期,控制台日志部分被注释为它们仅用于调试目的:
$('#Start').on("dp.change",
function(e)
{
if (dateSorter($('#End').val(), $(this).val()) === -1 || dateSorter($('#End').val(), $(this).val()) === 0)
// if ($('#End').val() < $(this).val())
{
// console.log("End date "+$('#End').val()+ " is beofre start date: "+ $(this).val()+" Setting minimum booking period");
$('#End').data("DateTimePicker").date(e.date.add(30, 'minutes'));
}
});
$('#End').on("dp.change",
function(e)
{
if (dateSorter($('#Start').val(), $(this).val()) === 1 || dateSorter($('#Start').val(), $(this).val()) === 0)
// if ($('#Start').val() >= $(this).val())
{
// console.log("Start date " + $('#Start').val() + " is after end date: " + $(this).val()+" Setting minimum booking period");
$(this).data("DateTimePicker").date(e.date.add(30, 'minutes'));
}
});
如果要添加格式(这是日期时间选择器),可以使用以下脚本:
$(".datePickerTime").datetimepicker({
defaultDate: false,
useCurrent: false,
showClear: true,
showClose: true,
locale: "en-au",
format: "YYYY-MM-DD hh:mm A",
sideBySide: true,
toolbarPlacement: "bottom"
});
仅限日期选择器用作:
$(".datePicker").datetimepicker({
defaultDate: false,
useCurrent: false,
showClear: true,
showClose: true,
locale: 'en-au',
format: 'YYYY-MM-DD'
});
在https://tempusdominus.github.io/bootstrap-4/Options/的情况下
您可以尝试设置允许的日期范围
JS
var tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
var yesterday = new Date();
yesterday.setDate(yesterday.getDate() - 1);
$('#datetimepicker1').datetimepicker({
minDate: yesterday,
maxDate: tomorrow,
});