Как отключить прошлые даты в Bootstrap datetimepicker после установленной даты проверки

83
11

Я знаю, как отключить прошлые дни с текущей даты. его работа с 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>

enter image description here любая помощь пожалуйста.

спросил(а) 2016-10-24T08:01:00+03:00 4 года, 1 месяц назад
1
Решение
59

Вы пробовали это

$('#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

ответил(а) 2016-10-24T08:14:00+03:00 4 года, 1 месяц назад
42

Я считаю, что вы хотите контролировать дату окончания, чтобы быть больше, чем дата начала, если это так, ниже код может помочь вам, он проверяет, является ли дата начала меньше или равна конечной дате, и если конечная дата больше или равна дату начала, то он устанавливает минимальный период времени для заказов, вы можете установить его так, как вам хотелось бы, или просто установить значение .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'
});

ответил(а) 2016-10-24T08:26:00+03:00 4 года, 1 месяц назад
42

просто переопределите свойство minDate в вашем datetimepicker

var checkin = '2016-10-24';
$('#datetimepicker1').data("DateTimePicker").minDate(checkin);

ответил(а) 2016-10-24T08:12:00+03:00 4 года, 1 месяц назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема