Некоторое время назад передо мной встала задача использования календаря для ввода в текстбокс в панели администрирования веб-приложения. Выбор, как можно догадаться, пал на
модуль jQuery UI Datapicker. Но вот незадача, можно выбрать нужную дату, но вместе с датой время нельзя выбрать. Покопавшись, некоторое время в сети, узнал, что данный модуль не поддерживает вставку времени, только даты. Ещё больше потратил времени на поиск подобного модуля, с возможностью вставки времени с датой, и нашёл вот
этот плагин. Чтобы использовать его, подключаем следующие скрипты:
<script src="@Url.Content("~/Scripts/jquery-1.7.1.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.18.min.js")"
type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-timepicker-addon.js")"
type="text/javascript"></script>Последовательность подключения очень важна, иначе ничего не получится. Файл плагина это
<script src="@Url.Content("~/Scripts/jquery-ui-timepicker-addon.js")"
type="text/javascript"></script>который подключается последним. Не забываем, также, подключить стандартные файлы стилей jQuery UI.
<link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")"
rel="stylesheet" type="text/css" />Теперь создаём отдельный файл .js, или прямо на странице, и добавляем туда следующий код локализации.
$(document).ready(function () {
$.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']);
$.timepicker.regional['ru'] = {
timeOnlyTitle: 'Выберите время',
timeText: 'Время',
hourText: 'Часы',
minuteText: 'Минуты',
secondText: 'Секунды',
millisecText: 'миллисекунды',
currentText: 'Текущая',
closeText: 'Закрыть',
ampm: false
};
$.timepicker.setDefaults($.timepicker.regional['ru']);
$("form").validate({
errorLabelContainer: "#errdv",
rules: { Id: { required: true, maxlength: 3 }, NewPrice: { required: true} },
messages: { Id: { required: "Поле обязательно для заполнения.",
maxlength: "Длина не более 3 символов."} }
});
});А чтобы всплывающий календарь был доступен для текстбокса, скажем с именем "AddingDate", вызываем следующую функцию, можно сразу после функции локализации.
<script type="text/javascript">
$("input[name='AddingDate']").datetimepicker();
</script>
Теперь при получении фокуса текстовым полем, можно будет вводить не только дату, но и время.
