Knockout-Kendo.js Форматирование даты в сетке

Я использую интеграцию Knockout.js с Kendo UI Grid (http://rniemeyer.github.io/knockout-kendo/web/Grid.html).

В моем JSON я возвращаю дату, которая отображается как Oct 06 2015, 03:54 PM -04:00.

Я указал тип столбца и формат как формат: "{0:MM/dd/yyyy HH:mm tt}", но, похоже, он полностью игнорируется.

Ниже приведено определение привязки kendogrid:

<div data-bind="kendoGrid: {
  data: projectSubmissions,
  dataSource: {
    schema: {
      model: {
        fields: {
          SubmissionId: { type: 'number' } ,
          FormName: { type: 'string' } ,
          IdVersion: { type: 'string' },
          SubmittedDateFormatted: { type: 'string'},
          SubmittedDate: { type: 'date'},
        }
      }
    }
  },
  groupable: false,
  scrollable: false,
  filterable: {
    extra: false,
    operators: {
      string: {
          startswith: 'Starts with',
          eq: 'Is equal to',
          neq: 'Is not equal to'
      }
    }
  },
  sortable: true,
  pageable: { pageSize: 10 },
  columns: [
    {
      field: 'SubmissionId',
      title: 'No.',
      width: 70,
    }
    ,{ field: 'FormName', title: 'Form', width:120 }
    ,{ field: 'IdVersion', title: 'Id/Version', width:100}
    ,{
      field: 'SubmittedDate',
      filterable: true,
      title: 'Submitted Date',
      format: '{0:MM/dd/yyyy HH:mm tt}',
      width: 120
    }
    ,{ field: 'Inspector', title: 'Inspector', filterable: true, width:140 }
    ,{ field: 'CellNo', title: 'Cell No.', width:100, filterable: false }
  ]
}"></div>

kendo-grid knockout.js knockout-kendo
person David    schedule 07.10.2015    source источник
comment
В вашем коде есть опечатка: ''{0:MM/dd/yyyy HH:mm tt}', вы используете две цитаты перед использованием формата.   -  person Buzinas    schedule 07.10.2015
comment
Спасибо - исправил (это была просто ошибка при вставке образца)   -  person David    schedule 07.10.2015
comment
Как вы разбираете свой json?   -  person Amit    schedule 07.10.2015
comment
Я использую ko.mapping.fromJS (данные, {}, это); выполнить сопоставление. Результирующее свойство выглядит следующим образом: SubmittedDate: 2015-10-06T15:54:02.047,   -  person David    schedule 07.10.2015
comment
Я также не могу заставить фильтр UI: datepicker работать, я надеюсь, что эти проблемы могут быть решены   -  person David    schedule 07.10.2015

Ответы (2)


arrow_upward
3
arrow_downward

Ваша проблема не в настройке формата . Это определяет, как форматировать значение для отображения. Ваша проблема связана с самим значением. Чтобы формат был успешным, значение должно быть объектом Date для начала, а сейчас это строка.

Вы можете использовать объект сопоставления (как показано здесь), чтобы создать объект Date во время сопоставления. обработать:

var mapping = {
  SubmittedDate: {
    create: function(options) {
              return new Date(options.data);
    }
};
ko.mapping.fromJS(data, mapping, this);
person Amit    schedule 07.10.2015
comment
Это решило мою проблему, спасибо. У меня есть аналогичная проблема с фильтруемым ui: datepicker с нокаутирующей сеткой кендо, а также фильтр сетки uidatepicker"> stackoverflow.com/questions/32994344/ - person David; 07.10.2015

arrow_upward
1
arrow_downward

Основная проблема заключается в том, что спецификация JSON не определяет тип данных Date. Поскольку стандарта нет, для представления дат в документах JSON используются всевозможные строковые форматы. Однако Kendo Grid ожидает Date объектов, а не строк.

В вашем случае кажется, что сервер отправляет "Oct 06 2015, 03:54 PM -04:00", что на самом деле является одним из форматов, которые принимает Date.parse().

функция JSON.parse() JavaScript устраняет это упущение в стандарте приняв функцию reviver, которая может преобразовывать любые специальные значения в вашем JSON в соответствии с вашими правилами. Это обычно используется для «оживления» дат.

Адаптировано к вашему вводу JSON:

function reviveDates(key, val) {
    if ( key === "SubmittedDate" ) {
        return new Date(val);
    }
    return val;
}

а также

JSON.parse(yourJSON, reviveDates);

Чтобы сделать это более удобным, вы можете интегрировать это в низкоуровневые процедуры Ajax jQuery, чтобы вам вообще не приходилось иметь дело с преобразованием даты на более высоком уровне:

$.ajaxSetup({
    converters: {
        'text json': function (data) {
            try {
                return JSON.parse(data, reviveDates);
            } catch (ex) {
                $.error("Invalid JSON: " + data);
            }
        }
    }
});
person Tomalak    schedule 07.10.2015
comment
Это тоже выглядит довольно интересно, я пытался добавить, но что-то не совсем так. В приведенном выше примере, что такое RevivDates ... что-то не так? Спасибо - person David; 07.10.2015
comment
@David reviveDates — это функция, которую я определяю в своем первом примере кода. - person Tomalak; 07.10.2015
comment
Преимущество использования этого подхода заключается в том, что он расположен в ядре jQuery, и все даты, которые вы получаете, будут автоматически преобразованы. Вам больше никогда не придется заботиться о нокауте. Это как если бы сервер отправлял фактические даты. Конечно, вы также можете использовать его для предварительной обработки любых других данных JSON, которые вы получаете. - person Tomalak; 07.10.2015
comment
Это на уровне ядра, что хорошо, однако вы по-прежнему указываете функцию для каждого набора данных, который возвращается через json... т.е. Функция RevivDates. Сначала я подумал, что здорово, что это будет применяться ко всем датам, и он волшебным образом выяснит, какие поля были датой, но, к сожалению, для каждого запроса json мне пришлось бы иметь функцию для анализа этих полей даты. Есть ли способ сделать общие даты возрождения для любых полей даты? - person David; 07.10.2015
comment
@David Просто адаптируй функцию. В моей примерной функции используется проверка if (key === "SubmittedDate"). Все, что вам нужно сделать, это сделать эту проверку более общей, чтобы она применялась ко всем полям даты, которые вы получаете. Вам не нужно создавать специальную функцию для каждого запроса JSON. Это решение предназначено для выполнения ровно один раз при загрузке страницы. - person Tomalak; 07.10.2015