Bootstrap DateTimePicker и проблема с анализом существующих дат?

Для получения информации о версиях, используя Bootstrap 3.0.0 (встроенный в новые шаблоны MVC, если я правильно помню), Bootstrap-datetimejs 4.0.0 ( https://github.com/Eonasdan/bootstrap-datetimepicker) и ASP.NET MVC 5.

Используя MVC, я отрисовываю кучу полей, но у этого есть существующие данные (это при проверке элемента в Chrome, так что это не код HTMLHelper):

<input class="form-control timepicker input-validation-error" data-format="hh:mm PP" 
  data-val="true" data-val-date="The field Start (Time) must be a date." 
  data-val-required="The Start (Time) field is required." 
  id="MaintenanceSundayTimeStart" 
  name="MaintenanceSundayTimeStart" type="text" value="1/1/2000 8:00:00 PM">

Код, который генерирует это:

<div class="col-sm-4">
  <div class="form-group">
    @Html.LabelFor(model => model.MaintenanceSundayTimeStart)
    @Html.TextBoxFor(model => model.MaintenanceSundayTimeStart, 
      new { @data_format = "hh:mm PP", @class = "form-control timepicker" })
  </div>
</div>

Когда страница загружается, я называю это:

 $('.timepicker').each(function () {
   $(this).datetimepicker({
     format: 'LT'
   });
 });

редактировать: попытался попробовать это:

 $('.timepicker').each(function () {
   $(this).datetimepicker({
     pickDate: false
   });
 });

и установите формат данных в соответствии с этим на основе просмотра документации moment.js, хотя косые черты и двоеточия не включены, я предполагаю, что их можно вставить (в соответствии с 1 января 2000 года в 8:00:00). ВЕЧЕРА)

data-format="M/D/YYYY H:mm:ss A"

И он все еще не может разобрать дату и время.

По какой-то причине, когда рендеринг элемента управления, в текстовом поле я вижу совершенно другое время в списке (1:00 PM), которое говорит мне, что он просто не может разобрать это значение. Я хочу, чтобы рендеринг был только час: минута AM/PM, но я думаю, что мне нужно привязать стандартный объект DateTime, верно? Глядя на источник, кажется, что введена ошибка input-validation-error, так что моя большая проблема - отправить форму, просто сфокусировав текстовое поле.

Что-то я делаю неправильно? Я знаю, что хочу взять "мм / дд / ГГГГ чч: мм: сс ПП" и заставить его анализировать, как только "чч: мм ПП" разбирает часть. При сохранении меня действительно заботит только компонент времени (я выставляю дату на 1/1/2000 независимо от того, что меня вообще не касается компонент даты).

редактировать: после дополнительных попыток я заметил, что значение, которое анализируется (в основном путем сброса других значений), заключается в том, что значение, по-видимому, тянет часть ММ как час. Ввод будет полным датой-временем, но я только хочу, чтобы пользователю был назначен компонент времени для управления (я выставляю все даты только на 1 января 2000 года). На данном этапе, я думаю, что если я смогу выполнить эту часть, я буду в порядке.

Источник

3 ответа

Решение

Если вы используете v4 моего Datetimepicker, вы можете легко сделать это:

$('.timepicker').datetimepicker({
    format: 'LT'
});

без лишних data- требуется.

Также в качестве дополнительного бонуса вы можете использовать EditorFor Шаблон для настройки вашего текстового поля.

https://gist.github.com/Eonasdan/1f6bd021319486e23777

Model.cs

using System.ComponentModel.DataAnnotations;
[DataType(DataType.Time)]
public DateTime Updated { get; set; }

Time.cshtml

//This file goes in /Shared/EditorTemplates/Time.cshtml
//You can easily do this for DataType.Date and DataType.DateTime
@{
    var attributes = new Dictionary<string, object>();
    attributes.Add("class", "form-control");
    attributes.Add("type", "datetime");
}
<div class="input-group timepicker col-sm-3 col-md-3" id="@(ViewData.TemplateInfo.HtmlFieldPrefix)-timepicker">
    @Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue, attributes)
    <span class="input-group-addon">
        <span class="fa fa-clock-o"></span>
    </span>
</div>
Источник

Попробуйте использовать строчную букву "h" для часовой части формата, например:

$('.timepicker').each(function () {
  $(this).datetimepicker({
    format: 'format="M/D/YYYY h:mm:ss A"'
  });
});
Источник

Похоже, вы на самом деле используете другой инструмент выбора даты и времени, который больше не разрабатывается активно https://github.com/tarruda/bootstrap-datetimepicker и я бы порекомендовал перейти на версию, с которой вы на самом деле ссылались. Многие из этих атрибутов данных выглядят связанными с проверкой формы, а также могут конфликтовать с тем, что вы пытаетесь сделать. Я бы порекомендовал использовать data-val="false", пока вы не сможете заставить сборщик работать как положено, а затем заняться любой необходимой проверкой.

Источник
Другие вопросы по тегам