Как отключить прошлые даты в календаре в средстве выбора даты в javascript / jquery?
Я работаю над Веб-сайт, в котором я хочу отключить прошлые даты в календаре.
Коды HTML и JQuery, которые я использовал для создания календаря:
$("#startdate_datepicker").datepicker({numberOfMonths:[1, 2]});
$("#enddate_datepicker").datepicker({numberOfMonths:[1, 2]});<link href = "https://cdn.bootcss.com/jqueryui/1.12.1/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.12.1/jquery-ui.js"></script>
<div class = "dates">
<div class = "start_date" style = "width:50%;margin-right:3%;">
<input readonly = "readonly" class = "form-control start_date mb-4" type = "text" placeholder = "start date" id = "startdate_datepicker">
</div>
<div class = "end_date" style = "width:50%;margin-left:3%;">
<input readonly = "readonly" class = "form-control end_date mb-4" type = "text" placeholder = "end date" id = "enddate_datepicker">
</div>
</div>
Постановка задачи:
Мне интересно, какие изменения я должен внести в код выше так что после выбора даты начала даты до даты начала должны быть отключены при выборе даты окончания.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Используйте .datepicker("option", "minDate", <value of start date>), чтобы установить самую раннюю дату, которую можно выбрать. «maxDate» позволит вам установить последнюю доступную дату.
Вы можете использовать option = beforeShowDay пользовательского интерфейса JQuery, а затем настроить стили для каждого дня, как показано ниже в демонстрации:
В качестве руководства по пользовательскому интерфейсу JQuery для beforeShowDay:
A function that takes a date as a parameter and must return an array with:
[0]: true/false indicating whether or not this date is selectable [1]: a CSS class name to add to the date's cell or "" for the default presentation [2]: an optional popup tooltip for this date
let startDateUI = $("#startdate_datepicker").datepicker({
numberOfMonths:[1, 2],
todayHighlight: true,
beforeShowDay: function (calDate) {
return calDate - new Date() < 0 ? [false, '', ''] : [true, '','']
}
});
$("#enddate_datepicker").datepicker({
numberOfMonths:[1, 2],
todayHighlight: true,
beforeShowDay: function (calDate) {
let selectedStartDate = $( "#startdate_datepicker" ).datepicker( "getDate" )
return calDate - selectedStartDate < 0 ? [false, 'disable-day', 'not available day!!!'] : [true, '','']
}
});.disable-day{
background-color:red;
}<link href = "https://cdn.bootcss.com/jqueryui/1.12.1/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.12.1/jquery-ui.js"></script>
<div class = "dates">
<div class = "start_date" style = "width:50%;margin-right:3%;">
<input readonly = "readonly" class = "form-control start_date mb-4" type = "text" placeholder = "start date" id = "startdate_datepicker">
</div>
<div class = "end_date" style = "width:50%;margin-left:3%;">
<input readonly = "readonly" class = "form-control end_date mb-4" type = "text" placeholder = "end date" id = "enddate_datepicker">
</div>
</div>@ user5447339 попробуйте вместо этого вернуть [false, '', '']
в вашем коде пользователи по-прежнему могут выбирать прошлые даты в календаре в дате начала, например даты до 26 июля.
для календаря startdate вы хотите отключить прошлые даты? если да, добавьте опцию beforeShowDay для $("#startdate_datepicker"), затем сравните с new Date()
вы можете изменить код? Я могу поступить неправильно.
@ user5447339 обновлено. Добавлена опция beforeShowDay для $("#startdate_datepicker")
Спасибо. Это сработало. Я только что вставил ваш код в свой домен. Кажется, что наведение все еще действует для дат, которые пользователь не может выбрать в раздел даты окончания.
знак равно =, похоже, ваша библиотека отличается от моей. но одно решение: вернуть [false, 'disable-day', ''], затем обратиться к этот ответ, чтобы перезаписать эффект наведения. Кончик: откройте консоль браузера, и вы увидите, что эти классы (ui-datepicker-unselectable ui-state-disabled) применяются к элементу Dom в дни недоступности на вашем веб-сайте.
Я использовал вашу библиотеку, и теперь она работает. Обновите мой домен. У меня последний вопрос. Следите за обновлениями. Спасибо за вашу помощь.
Прежде всего, спасибо за вашу помощь. Я просто подумал, если я выберу дату начала, например 26 июля, и если я попытаюсь выбрать любую дату из даты окончания, то между ними появится эффект наведения, как в airbnb. Есть ли способ сделать это?
Я не нашел полезной опции для упомянутого вами эффекта. но одним из возможных решений является прослушивание события зависания в течение нескольких дней, а затем применение стилей css между датой начала и датой зависания с помощью селектора css. Вам лучше задать один новый вопрос, чтобы получить более точные ответы.
Я буду размещать новые сообщения на SO и буду держать вас в курсе.
Я разместил новый вопрос, используя ваш код. Не уверен, что использую правильную формулировку.
@Sphnix Я принял ваш ответ. У меня есть быстрый вопрос. Мне интересно, как я могу отключить наведение для дат, которые пользователь не может выбрать в
end date.