MVC Razor DatePicker и TimePicker

Question

У меня есть форму, сгенерированную Razor, которая позволяет пользователям редактировать некоторые данные планировщика, и она работает достаточно хорошо.

Одна вещь, которую я не понимаю и не видел раньше, - это сборщики даты и времени, которые автоматически генерируются Razor.

Чтобы уточнить, это то, что я говорю о:

Они хорошо и все, но как вы можете видеть на скриншоте, они не используют свои модели значения.

У самой разметки есть мои значения, установленные в тегах, но элементы управления игнорируют их.

Вот что я имею в виду:

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

Замечу, что в моем заказного модели, у меня есть эти свойства аннотированные следующим:

//For the dates... 
[DataType(System.ComponentModel.DataAnnotations.DataType.Date)] 

//For the time... 
[DataType(System.ComponentModel.DataAnnotations.DataType.Time)] 

Я предпочел бы не иметь, чтобы удалить эти аннотации, однако, если это влияет на мое достижение решения , Я сделаю все, что нужно сделать.

Чтобы решить эту проблему, я хотел бы одна из двух вещей:

1. Предотвратить эти элементы управления от формирования в первую очередь, так что я могу использовать this absolutely wonderful jQuery datetimepicker addon.
2. Принудите эти элементы управления соблюдать и отображать значения, переданные из моей модели.

Все предложения приветствуются. Предложения, сделанные теми, кто знаком с MVC, будут оценены еще больше.

Answer 1

1. Рендер их с помощью @Html.TextBoxFor(x => x.StartDate, new { @class = "date" }) и использовать некоторые JQuery что-то вроде $('.date').datetimepicker(); применить плагин запроса.

2. Значения date и time входы должны быть в форматах yyyy-MM-dd и HH:mm:ss - это объясняет, почему они не работают для вас в данный момент. Я не смотрел плагин, который вы хотите использовать очень близко, но вполне вероятно, что он позволит вам настроить используемые форматы даты и времени.

Answer 2

Я понимаю, что это старый, но Google взял меня сюда, так что здесь может быть и кто-то другой.

Если вы еще не добавили плагин datetimepicker к своим пакетам, обязательно сделайте это в разделе заголовка (вместе с jquery и jquery ui, следуя plugin's directions).

В вашей модели добавьте атрибут [UIHint{"DateTime")] над полем.Затем, в вашем "~/Views/Shared/EditorTemplates" папку, создайте файл с именем "DateTime.cshtml" со следующим содержанием:

@model DateTime? 

    @Html.TextBoxFor(Model => Model, new { @class = "date" }) 

    <script type="text/javascript"> 
     $('#@ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty)').datetimepicker(); 
    </script> 

«#@ViewData.TemplateInfo.GetFullHtmlFieldName (string.Empty) 'часть захватывает идентификатор поля из созданного Razor TextBox. Добавление класса' date 'необязательно, но помогает, если вы хотите сделать какой-то пользовательский стиль.

Answer 3

Это ваша проблема. значение = "8:00 AM"

Должно быть: значение = "08:00"

должен быть 24-часовое время как 5:00 Pm потребуется значение 17:00

Не нужно jquery на этом. Используйте правильное значение, и вы можете использовать стандартный элемент html.

Вот пример того, как я использую его на странице C# Razor. Он отлично работает, отлично читает и пишет модель.

<input type="time" id="ShiftStartTime" name="ShiftStartTime" value="@Model.ShiftStartTime.Hour.ToString("D2")@(":")@Model.ShiftStartTime.Minute.ToString("D2")" class="form-control"/>