Включить значение переменной в конвейер даты в кендо (динамический формат): AngularJS

Question

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

Теперь я хочу изменить формат столбца сетки кендо в соответствии с форматом даты

Моя проблема / вопрос: - Я получаю формат даты, такой как dd-MM-гггг или MM-дд-гггг, или дд-мм-гг, или MM-дд-гг, из localStorage, который является динамическим в соответствии спредпочтения пользователя.

Но всякий раз, когда я использую эту переменную в шаблоне (содержащий формат даты, например: dd-MM-гггг) вместо канала даты по умолчанию, имеющего тот же формат канала даты по умолчанию, кендо Не приниматьи выдает ошибку: не удается прочитать свойство 'timeout' неопределенного кендо

const myDateFormat = this.$localStorage.dateFormat;   
function getDefaultColumns($translate) {
        return [
            {
              field: 'INVOICE_DATE',
              title: $translate.instant('invoiceDate'),
              headerTemplate: '{{ \'invDate\' | translate }}',
              template: '{{ dataItem.INVOICE_DATE | date: \'yyyy-MM-dd\' }}',//i am using the localStorage value here 
              filterable: {
                ui(element) {
                  element.kendoDatePicker({
                    format: 'yyyy-MM-dd'
                  });
                }
              },
              width: 100
            }
        ];
    }

Answer 1

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

Рассмотрите эту модификацию списка программ:

function getDefaultColumns($translate) {
    let dateFormat = 'yyyy-MM-dd';
    return [
    {
          field: 'INVOICE_DATE',
          title: $translate.instant('invoiceDate'),
          headerTemplate: '{{ \'invDate\' | translate }}',
          template: `{{ dataItem.INVOICE_DATE | date: \'${dateFormat}\' }}`,
          filterable: {
            ui(element) {
              element.kendoDatePicker({
                format: dateFormat
              });
            }
          },
          width: 100
        }
    ];
}