Задача: Передавать в форме названия выбранного пользователем дня недели в формате «Среда», разрешить выбор только определенных дней недели. Небольшая кастомизация внешнего вида.
Разметка формы
<div id="datepicker"></div> <!-- календарь-->
<!-- значение календаря -->
<!-- сюда будет подставляться выбранный день-->
<!-- сюда будет подставляться произвольный текст-->
Определение календаря и наша функция
$(function(){
$("#datepicker").datepicker({
minDate: 0, // отключаем прошедшие дни
beforeShowDay: function(date){
var dayOfWeek = date.getDay();
if (dayOfWeek == 1 || dayOfWeek == 2 ||dayOfWeek == 4 || dayOfWeek == 6 || dayOfWeek == 0){ // отключаем ненужные дни, где "1" номер дня
return [false];
} else {
return [true];
}
},
onSelect: function(date){ // отслежывание выбранного дня
$('#datepicker_value').val(date)
var dayName = $(this).datepicker('getDate' ).toString().substring(0,3); //the getDate method
// получаем день недели в формате "Fri" (Friday - пятница)
getDayName (dayName); // передаем день в нашу функцию
}
});
$("#datepicker").datepicker("setDate", $('#datepicker_value').val()); // эта строка устанавливает value в input
});
function getDayName (day){
if(day == 'Fri'){ // проверяем день недели
document.getElementById('dayName').value = 'Пятница'; // пишем нужное нам значения дня в наш инпут
document.getElementById('TimeVal').value = 'c 14:00 до 16:00'; // пишем произвольный текст в наш инпут
}
if(day == 'Wed'){
document.getElementById('dayName').value = 'Среда';
document.getElementById('TimeVal').value = 'c 10:00 до 12:00';
}
}
Немного магии для внешнего вида (CSS)
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
padding: 7px 15px; /*размер ячеек*/
text-align: center; /*расположения текста по центру*/
}
.ui-datepicker {
width: 22em; /*ширина календаря, можно указывать в px*/
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
border: 1px solid #00A082;
background: #00A082; /*цвет выбранного элемента*/
}
Устанавливаем русский язык (локализация)
/* Локализация 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']);
Собвственно результат
