ASP.NET MVC 3 для начинающих: добавляем ввод даты с помощью jQueryUI и NuGet

    image
    В ходе обучения новым технологиям перед новичками часто возникают типовые задачи, которые не так просто решить. В цикле статей MVC3 для начинающих будут представлены решения таких задач.

    Частый вопрос, который встает перед веб-разработчиками – это добавление на страницу удобного ввода даты с помощью ниспадающего элемента в виде календаря. В этой статье дается короткое описание того, как в MVC 3 добавить такой элемент за несколько мгновений с помощью пакетного менеджера NuGet и библиотеки jQuery UI.

    Ниже представлено полное решение с исходными кодами.

    Установка компонентов через Nuget


    Первым делом нам потребуется добавить в проект пакет с элементом управления jQuery UI DatePicker, который позволяет организовать на веб-странице удобный ввод даты в поле ввода.

    Откройте панель NuGet и введите команду:

    install-package jQuery.UI.Widgets.Datepicker

    Через несколько секунд пакет будет загружен и установлен вместе со всеми зависимостями (рисунок 1).

    image
    Рис.1. Выполнение команды NuGet для добавления пакетов в проект

    Разметка


    Для демонстрации работы элемента управления создадим следующую разметку страницы Index.cshtml контроллера Home:
    <p>
        Введите дату: @Html.TextBox("exampleDateTime")
    </p>
    
    <p>
        Введите первую дату: @Html.TextBox("exampleDateTime2", null, new { @class = "datePicker" })
        Введите вторую дату: @Html.TextBox("exampleDateTime3", null, new { @class = "datePicker" })
    </p>
    

    В разметке присутствует единичное поле для ввода даты и два поля для ввода данных, которые имеют одинаковый класс CSS.

    Скрипты и стили


    Для того, чтобы на странице заработал компонент нам необходимо подключить скрипты отвечающие за его поведение и работоспособность. Кроме того, нам нужно хотя бы простейшее оформление для элемента управления.

    Для этого добавим в начало страницы указание о необходимости подключения файлов скриптов и стилей:
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.core.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.theme.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.datepicker.min.js")" type="text/javascript"></script>
    

    Три CSS-стиля подключают тему оформления и обработку элемента управления. При желании их можно объединить в один файл.

    Первый скрипт подключает библиотеку jQuery UI, а второй ее компонент Datepicker.

    Теперь все готово для включения элемента управления на страницу. Активируем его и привяжем к объявленным элементам управления с помощью следующего JavaScript-кода, который необходимо поместить в конце страницы:
    <script type="text/javascript">
        $(document).ready(function () {
            $('#exampleDateTime').datepicker({ firstDay: 1, dateFormat: 'dd.mm.yy' });
            $('.datePicker').datepicker({ firstDay: 1, dateFormat: 'dd.mm.yy' });
        });
    </script>
    

    Здесь происходит инициализация единичного элемента ввода текста через обращение по идентификатору. И, в качестве примера, инициализация нескольких элементов сразу по единому классу CSS.

    Параметр firstDay задает первый день недели (1 – понедельник, 0 – воскресенье, по умолчанию). Для указания формата даты используется специальный параметр dateFormat.

    В итоге, после запуска страницы, вы получите возможность вводить данные с помощью удобного элемента управления, который предлагает jQuery UI (рисунок 2).

    image
    Рис. 2. Работа элемента управления jQuery UI

    Локализация


    Во-первых, вы можете воспользоваться стандартным механизмом jQuery UI Datepicker и установить локализации самостоятельно:

    $.datepicker.setDefaults({ dayNamesMin: ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'] });

    Во-вторых и это самый лучший путь вы можете воспользоваться готовым скриптом локализации от разработчиков, получив его по адресу http://jqueryui.com/download. В пакете среди прочего будет файл jquery.ui.datepicker-ru.js. Если его добавить на страницу вы получите локализованный вариант элемента управления (рисунок 3).

    image
    Рис. 3. Локализация в действии

    Исходные коды


    Исходные коды проекта для Visual Studio 2010 можно загрузить по этой ссылке.
    Ads

    Comments 5

      +3
      Ещё можно было бы написать про EditorTemplates. Через них было бы удобнее сделать.
        0
        Хорошо. А если потребуется получить дату из этого поля в каком-то экшене?

        Например:

        [HttpPost]
        public ActionResult MyAction(DateTime exampleDateTime) {… }

        В каком формате model binder по умолчанию ожидает увидеть дату? (это я не знаю, спрашиваю у вас)

        + от меня дополнение:

        Если мы захотим показывать дату в полях вводе не как «20.05.2011» а как «Понедельник 20 мая 2011», то скорее всего потребуется указать параметры датапикера altFormat и altField чтобы model binder принял нашу дату независимо от ее представления.
          0
          Про форматы верно подметили (про altField и altFormat).

          На серверной же стороне обычно делается так:
          — Создается DateTimeModelBinder, который покрывает либо какой-то стандартный вариант («dd/MM/yy»), либо определяемый, используя заданный «CultureInfo». Насчет стандартного DefaultModelBinder — я не уверен в том, что именно он ожидает от даты.

          — Внутри этого ModelBinder'а происходит что-то вроде этого:
          DateTime.TryParse(sourceDateTime, CultureInfo.InvariantCulture, DateTimeStyles.None, out parsedDateTime);
          0
          Ладно хоть скриншот есть, а то первая команда написана неправильно
            0
            спасибо, fixed

          Only users with full accounts can post comments. Log in, please.