Меню Закрыть

Получить названия дня недели jQuery UI Datepicker

Задача: Передавать в форме названия выбранного пользователем дня недели в формате «Среда», разрешить выбор только определенных дней недели. Небольшая кастомизация внешнего вида. 

Разметка формы

				
					
    <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']);
				
			

Собвственно результат

Добавить комментарий

Ваш адрес email не будет опубликован.

>