DatePicker – хороший и функциональный плагин для выбора даты, легко настраивается и привязывается к стандартному полю ввода формы.
Примеры и описание на jqueryui.com.
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
/* Локализация datepicker */
$.datepicker.regional['ru'] = {
closeText: 'Закрыть',
prevText: 'Предыдущий',
nextText: 'Следующий',
currentText: 'Сегодня',
monthNames: ['Январь','Февраль','Март','Апрель','Май','Июнь','Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'],
monthNamesShort: ['Янв','Фев','Мар','Апр','Май','Июн','Июл','Авг','Сен','Окт','Ноя','Дек'],
dayNames: ['воскресенье','понедельник','вторник','среда','четверг','пятница','суббота'],
dayNamesShort: ['вск','пнд','втр','срд','чтв','птн','сбт'],
dayNamesMin: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
weekHeader: 'Не',
dateFormat: 'dd.mm.yy',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ''
};
$.datepicker.setDefaults($.datepicker.regional['ru']);
</script><input type="text" id="datepicker">
<script>
$(function(){
$("#datepicker").datepicker();
});
</script><input type="text" id="datepicker">$(function(){
$("#datepicker").datepicker({
showOn: "button",
buttonImage: "https://snipp.ru/demo/437/calendar.gif",
buttonImageOnly: true,
buttonText: "Выбрать дату"
});
});.ui-datepicker-trigger {
margin-left: 5px;
position: relative;
top: 3px;
cursor: pointer;
}Чтобы выбранная дата отправлялась с формой понадобится добавить скрытое поле и обработчик его заполнения.
<div id="datepicker"></div>
<input type="hidden" id="datepicker_value" value="01.08.2019">$(function(){
$("#datepicker").datepicker({
onSelect: function(date){
$('#datepicker_value').val(date)
}
});
$("#datepicker").datepicker("setDate", $('#datepicker_value').val());
});$(function(){
$("#datepicker").datepicker({
minDate: 0
});
});Если нужно отключить прошедшие дни включая сегодняшний:
$(function(){
var date = new Date();
date.setDate(date.getDate() + 1);
$("#datepicker").datepicker({
minDate: date
});
});Например, в календаре будут доступны даты с ближайшего понедельника:
$(function(){
var date = new Date();
var day = 1; // 1 - пн, 2 - вт и т.д.
date.setDate(date.getDate() + (day - 1 - date.getDay() + 7) % 7 + 1);
$("#datepicker").datepicker({
minDate: date
});
});20 первых дней с текущей даты.
$(function(){
$("#datepicker").datepicker({
minDate: 0,
maxDate: "+20D"
});
});$(function(){
$("#datepicker").datepicker({
beforeShowDay: function(date){
var dayOfWeek = date.getDay();
if (dayOfWeek == 0 || dayOfWeek == 6){
return [false];
} else {
return [true];
}
}
});
});Отключить субботы
$(function(){
$("#datepicker").datepicker({
beforeShowDay: function(date){
var dayOfWeek = date.getDay();
if (dayOfWeek == 6){
return [false];
} else {
return [true];
}
}
});
});Отключить воскресения
$(function(){
$("#datepicker").datepicker({
beforeShowDay: function(date){
var dayOfWeek = date.getDay();
if (dayOfWeek == 0){
return [false];
} else {
return [true];
}
}
});
});Список праздничных дат задается в массиве holidays[число, месяц], без ведущих нулей.
var holidays = [
[1,1],
[7,1],
[23,2],
[8,3],
[1,5],
[9,5],
[12,6],
[4,11]
];
$(function(){
$("#datepicker").datepicker({
beforeShowDay: function(date){
for (var i = 0; i < holidays.length; i++) {
if (holidays[i][0] == date.getDate() && holidays[i][1] - 1 == date.getMonth()) {
return [false];
}
}
return [true];
}
});
});Чтобы заблокировать даты из списка/массива, нужно применить следующий код:
var dates = ["2024-12-08","2024-12-10","2024-12-12"];
$(function(){
$("#datepicker").datepicker({
beforeShowDay: function(date){
var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [dates.indexOf(string) == -1]
}
});
});Если массив c датами формируется на сервере из базы данных и PHP, то можно его передать в JS в виде JSON:
$dates = array(
date('Y-m-d', strtotime('+1 day')),
date('Y-m-d', strtotime('+3 day')),
date('Y-m-d', strtotime('+5 day')),
);<script>
var dates = <?php echo json_encode($dates, JSON_UNESCAPED_UNICODE); ?>;
$(function(){
$("#datepicker").datepicker({
beforeShowDay: function(date){
var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [dates.indexOf(string) == -1]
}
});
});
</script>
Есть начальная дата и конечная. По ним 2 вопроса:
1) Как высчитать количество дней между датами?
2) Как в календаре с конечной датой блокировать даты, которые раньше, чем я уже выбрал в «начальном» календаре? То есть если я выбрал начальную дату 1 декабря, то в календаре конечной даты надо заблокировать все даты до 1 декабря.
Кусок кода прилагаю:
Пока сделал все даты связанные с выходными праздничными, но это очень долго писать и еще код становиться слишком большим.
$(function () {
var dater = new Date();
dater.setDate(dater.getDate() + 4);
$("#datepicker").datepicker({
beforeShowDay: function (date) {
var dayOfWeek = date.getDay();
if (dayOfWeek == 0 || dayOfWeek == 6) {
return [false];
} else {
return [true];
}
},
minDate: dater
});
});
Например я выбираю 20 января, где 1-8 и 14-15 числа не учитываться в подсчете.