Skip to content

Instantly share code, notes, and snippets.

@monochromer
Last active August 29, 2015 14:20
Show Gist options
  • Save monochromer/672ba50de4fe52077ee5 to your computer and use it in GitHub Desktop.
Save monochromer/672ba50de4fe52077ee5 to your computer and use it in GitHub Desktop.
Шаблон для jQuery UI Datepicker
/**
* календарь jQuery UI
*/
.ui-datepicker {
display: inline-block;
}
.ui-datepicker-header {
position: relative;
}
.ui-datepicker-title {
text-align: center;
}
.ui-datepicker-month {}
.ui-datepicker-year {}
/**
* Стрелки навигации
*/
.ui-datepicker-header .ui-corner-all {
position: absolute;
top: 0;
}
.ui-datepicker-header .ui-corner-all .ui-icon {}
.ui-datepicker-header .ui-datepicker-prev {
left: 0;
}
.ui-datepicker-header .ui-datepicker-next {
right: 0;
}
.ui-datepicker-header .ui-corner-all.ui-state-hover {}
/**
* непосредственно календарь
*/
.ui-datepicker-calendar {
width: 100%;
border-collapse: collapse;
}
/**
* Дни недели
*/
.ui-datepicker-calendar th {}
.ui-datepicker-calendar th span {}
/**
* Выходные дни
*/
.ui-datepicker-calendar th.ui-datepicker-week-end {}
/**
* Календарная сетка
*/
.ui-datepicker-calendar td {}
.ui-datepicker-calendar td a {
display: block;
}
.ui-datepicker-calendar td a.ui-state-default {}
.ui-datepicker-calendar td a.ui-state-hover {}
/**
* день из другого месяца
*/
.ui-datepicker-calendar .ui-datepicker-other-month {}
/**
* Сегодняшний день
*/
.ui-datepicker-calendar .ui-datepicker-today {}
.ui-datepicker-calendar .ui-datepicker-today .ui-state-active {}
/**
* Выбранный день
*/
.ui-datepicker-calendar .ui-datepicker-current-day {}
.ui-datepicker-calendar .ui-datepicker-current-day .ui-state-highlight {}
/**
* Панель с кнопками
*/
.ui-datepicker-buttonpane {}
.ui-datepicker-buttonpane button {
float: right;
}
.ui-datepicker-buttonpane .ui-datepicker-current {
float: left;
}
.ui-datepicker-buttonpane .ui-datepicker-close {
float: right;
}
.ui-datepicker-buttonpane .ui-priority-secondary {}
.ui-datepicker-buttonpane .ui-priority-primary {}
/**
* календарь, видимый постоянно
*/
.ui-datepicker-inline {}
if($('.datepicker').length > 0)
{
//Русская локализация для JQueryUI Datepicker
$.datepicker.regional['ru'] = {
closeText: 'Закрыть',
prevText: 'Предыдущий месяц',
nextText: 'Следующий месяц',
currentText: 'Сегодня',
monthNames: ['Январь','Февраль','Март','Апрель','Май','Июнь',
'Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'],
monthNamesShort: ['Янв','Фев','Мар','Апр','Май','Июн',
'Июл','Авг','Сен','Окт','Ноя','Дек'],
dayNames: ['воскресенье','понедельник','вторник','среда','четверг','пятница','суббота'],
dayNamesShort: ['вск','пнд','втр','срд','чтв','птн','сбт'],
dayNamesMin: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
dateFormat: 'dd.mm.yy',
firstDay: 1,
isRTL: false
};
$.datepicker.setDefaults($.datepicker.regional['ru']);
$('.datepicker').datepicker($.datepicker.regional['ru']);
}
/* другой вариант */
$calendar.datepicker({
showOtherMonths: true,
selectOtherMonths: true,
dayNamesMin: ["Вс", "Пн", "Вт", "Ср", "Чт", "Пт", "Сб"],
dayNames: ["Воскресенье", "Понедельник", "Вторник", "Среда", "Четверг", "Пятница", "Суббота"],
firstDay: 1,
monthNamesShort: ["Янв", "Фев", "Мар", "Апр", "Май", "Июн", "Июл", "Авг", "Сен", "Окт", "Ноя", "Дек"],
monthNames: ["Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь"],
dateFormat: "dd.mm.yy",
beforeShow: function(input, inst) {
var $cal = inst.dpDiv;
var $input = $(input);
setTimeout(function() {
// 15 - величина треугольника
// $cal.appendTo(".page");
$cal.css({
"top": $input.offset().top + $input.outerHeight() + 15 + "px",
"left": $input.offset().left + $input.outerWidth()/2 - $cal.outerWidth()/2 + "px"
});
}, 10);
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment