jQuery Datetime picker для ASP.NET MVC приложения

Некоторое время назад передо мной встала задача использования календаря для ввода в текстбокс в панели администрирования веб-приложения. Выбор, как можно догадаться, пал на модуль 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>
Теперь при получении фокуса текстовым полем, можно будет вводить не только дату, но и время.






sam
18.11.2013 14:19
Удобный плагин. Насчет локализации, как вариант, можно исправить исходный код самого скрипта, напр. перевести слова Now -> Сейчас, Done -> Готово, и т.д.