Я создал одну демонстрацию, используя плагин выбора диапазона дат, и она работает нормально. Мне нужно скрыть второй календарь, затем щелкнуть текстовое поле, чтобы отобразить два календаря, чтобы выбрать статистику диапазона дат до конца. Итак, здесь мне нужно скрыть второй календарь и работать с одним календарем, как того требует та же функциональность. так как могу я понятия не имею. Я просмотрел много ссылок в Google, но мне не удалось добиться успеха.
Ниже я показал свой HTML-код:
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<div>
<input type="text" id="dates" name="dates" value="" />
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script type="text/javascript">
$(function() {
//$('input[name="dates"]').daterangepicker();
var naArray = ["20180705", "20180706", "20180707", "20180708", "20180709", "20180710", "20180711", "20180712", "20180713"];
function isDateAvailable(date) {
return naArray.indexOf(date.format('YYYYMMDD')) > -1;
}
$('input[name="dates"]').daterangepicker({
isInvalidDate: isDateAvailable,
minDate: new Date()
}, function(start, end, label) {
for (var d = start._d; d <= end._d; d.setDate(d.getDate() + 1)) {
var isValid = true;
var formattedDate = d.getFullYear().toString() + pad((parseInt(d.getMonth()) + 1), 2).toString() + pad(d.getDate(), 2).toString();
if (naArray.indexOf(formattedDate) > -1) {
isValid = false;
break;
}
}
if (!isValid) {
alert('Please select valid date range.');
$('.cancelBtn').trigger('click');
}
});
});
function pad(str, max) {
str = str.toString();
return str.length < max ? pad("0" + str, max) : str;
}
</script>используя ниже, я прикрепил свой снимок экрана в свой календарь, и он работает нормально, но мне нужен единственный календарь.
введите здесь описание изображения
Я хочу только один календарь. когда пользователь щелкает, начинает дату окончания, та же тема также будет там с единственным календарем.
Я пытался спрятаться с помощью CSS, но в то время я не мог получить цвет фоновой темы в датах выбора следующего месяца. Forex: с 18-07-2018 по 03-08-2018 выберите, затем в период с 01-08-2018 по 03-08-2018 цвет фона не отображается, и когда я выбираю дату начала и окончания в датах с 01 по 03 в цвет при наведении мыши тоже не наступает.
вот мой ожидаемый скриншот. введите здесь описание изображения
