2013-09-30 3 views
2

У меня проблема с дампинге Kendo UI, он не отображает уже установленное значение через атрибут value. Вот разметка:Kendo UI datepicker не отображает значение изначально при форматировании

<input data-kendoDatePicker="true" value="9/18/2013 12:00:00 AM"/> 

<script> 
    $(':input[data-kendoDatePicker=true]').kendoDatePicker({ 
     format: 'dd MMM yyyy' 
    }); 
</script> 

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

ответ

5

@Bobby_D прав, проблема в том, что вы не указали правильный формат даты: MM/dd/yyy.

BTW: Знаете ли вы, что вы можете определить его как:

<input data-role="datepicker" value="9/18/2013 12:34:56 AM" data-format="MM/dd/yyyy"/> 
<script> 
    kendo.init($("input")); 
</script> 

В принципе, если вы можете установить все свойства в HTML input вам просто нужно сделать один звонок в kendo.init для получения элементов инициализированы. Итак, вы даже можете сделать kendo.init($("body"));. Это очень полезно при инициализации большинства компонентов из HTML.

РЕДАКТИРОВАТЬ: Есть два различных варианта в Кендо DatePicker:

  1. format: Определяет формат, который используется для форматирования значения DatePicker отображается в поле ввода. Формат также будет использоваться для синтаксического анализа ввода.
  2. parseFormats: Указывает формат форматов даты, используемый для синтаксического анализа значения, установленного с помощью метода value() или путем прямого ввода пользователем. Если не задано значение формата будет использоваться. Обратите внимание, что для параметра формата всегда используется процесс разбора.

Мне кажется, что вы хотите получать даты в одном формате, а затем отображать их в другом. Затем вы должны использовать parseFormats для возможных, которые вы получаете (может быть более одного), и format для тех, которые отображаются в виджетах.

Вы код будет:

$(':input[data-kendoDatePicker=true]').kendoDatePicker({ 
    format:  "dd MMM yyyy", 
    parseFormats : [ "MM/dd/yyyy" ] 
}); 

Код модифицирована здесь: http://jsfiddle.net/OnaBai/TQnny/1/

или в альтернативном формате:

<input id="datapicker" data-role="datepicker" value="9/18/2013 12:00:00 AM" data-format="dd MMM yyyy" data-parse-formats="MM/dd/yyyy"/> 

и JS для инициализации:

kendo.init($("init")); 

Код, измененный здесь: http://jsfiddle.net/OnaBai/TQnny/2/

+0

Интересно, что неправильный формат даты обрабатывается по-разному в 2.918. предыдущие версии не отображали дату вообще, эта версия показывает все, что вводится в атрибут value, но datepicker неправильно заполнен. Если вы откроете dp в своем примере, дата будет установлена ​​на сегодняшний день, независимо от значения. См. Здесь, месяцы, установленные на «xx», все еще показывают значение http://jsfiddle.net/vojtiik/dxZV3/1/ – Vojtiik

+0

OnaBai, указанный мной формат является тем, который я пытаюсь получить. Это не формат для синтаксического анализа. Проверьте эту скрипту http://jsfiddle.net/TQnny/ выберите дату и посмотрите, как формат отображается правильно. Проблема в том, что изначально, когда загружается страница, она не обрабатывает и не отображает дату. – Mentor

+0

Итак, вы хотите получать даты в одном формате ('MM/dd/yyy'), но затем отображать/обрабатывать их в другом (' dd MMM yyyy '), правильно? – OnaBai

1

Необходимо указать правильный формат даты, указанной в значении. например, вы даете дату в формате США и ожидаете, что кендо прочитает ее в британском формате, он не может позвонить, например. месяцы против дня неоднозначны.

http://jsfiddle.net/vojtiik/8CCqR/1/

$(':input[data-kendoDatePicker=true]').kendoDatePicker({ 
     format: "MM/dd/yyyy" 
//  format: "MM/dd/yyyy hh:mm:ss tt" 
    }); 

Date Formatting

+0

Вот почему формат для меня, так что вы можете изменить способ отображения даты. Ваш предложенный формат не вернет дату в формате, который я ищу, который вернется, например, 18 сентября 2013 года. – Mentor

0

При использовании интеграции AngularJS с Кендо UI, вы можете попробовать следующий фрагмент кода:

HTML:

<input kendo-date-time-picker ng-model="dateStr" k-ng-model="date"/> 

JS:

$scope.date = new Date(); 
$scope.dateStr = $filter('date')($scope.date, "yyyy-MM-ddTHH:mm:ss"); 

P.S. Не забудьте указать $ filter object в списке зависимостей вашего контроллера.

Смежные вопросы