У Яндекс.Метрика підглянув, що за таким пошуковим запитом приходять в мій блог і вирішив написати статтю про це. Завдання досить проста - дозволити користувачу вибирати дату з красивого календаря, такого як jQuery UI Datepicker
Рішення "в лоб".
Тепер, кожен раз, коли ви будете писати @ Html.EditorFor (x => x.FieldOfDateTimeType) буде використовуватися даний шаблон.
У цього рішення є недоліки:
Робимо життя простіше.
Очевидно, що дублюється в кінцевому HTML скрипт потрібно кудись винести. Винесемо його в базовий шар, або в окремий файл. Для цього, нам необхідно модифікувати наш sizzle-селектор для того, щоб він знаходив все календарики. Для цього позначимо наш календарик за допомогою аттрибута role = "datepicker" і для підтримки html5 дамо йому тип - "date":
Дане рішення елегантніше, ніж рішення в лоб, але при цьому залишається майже таким само не гнучким.
Попереднє рішення вже unobtrusive, але поки не дозволяє передавати додаткові параметри в календарик. Для цього до нас на допомогу прийдуть наші друзі IModelMetadataAdditionalSetting s. Для їх використання ми створимо метод розширення AsDatePicker:
Тут все просто: виставляється шаблон і створюються настройки для календарика. У шаблоні ми буде малювати це наступним чином:
Тут настройки серіалізуются в data- * атрибути у елемента . При цьому, буде дотримана конвенція, що знак підкреслення буде перетворений в дефіс.
jQuery-UI для налаштувань використовує camelCase нотацію, а, jQuery, на щастя, автоматично преобразуте дефіси в data- * аттрибутах в таку нотацію. Таким чином нам потрібно просто для кожного взяти його data- * атрибути і просто передати в якості налаштувань в datapicker. Це буде зроблено скриптом в _Layout.cshtml:
У метаданих це буде використовуватися так:
замість висновку
Дане рішення володіє абсолютною гнучкістю і дозволяє керувати будь-якими властивостями для кожного з ваших календарів (і не тільки календарів) через метадані форми.