Определить формат даты редактирования в AG Grid - PullRequest
Новая
       18

Определить формат даты редактирования в AG Grid

0 голосов
/ 27 сентября 2018

У меня есть таблица SQL Server, которая содержит столбец DATETIME SaleDate - и, к сожалению, на данный момент я не могу изменить тип данных на DATE (этого было бы достаточно).

Iя пытаюсь показать данные из этого столбца в приложении Angular, используя Ag Grid.

Для отображения я смог использовать это в своем коде Typescript: 

columnDefs = [
    ....
    { headerName: 'Sale', field: 'SaleDate', width: 120, editable: true,
      cellRenderer: (data) => {
          return data.value ? (new Date(data.value)).toLocaleDateString('de-CH', this.options) : '';
    },
    ....
]

, и это работаетдовольно мило.

Однако, когда я пытаюсь отредактировать эту ячейку, к сожалению, отображаются все детали DATETIME (включая часть времени): 

[ 2018-09-27T08:43:59 ]

Это будет довольносбивает с толку пользователей .... так есть ли способ как-то установить / определить формат для редактирования в ячейке AG-Grid?

1 Ответ

0 голосов
/ 27 сентября 2018

Если вам нужно обойти (подготовить визуальные и реальные данные) для display и edit вещей, вы должны создать собственные cellRenderer и cellEditor для этой ячейки.

Или вы можете просто создать cellEditor для компонента календаря и valueFormatter для отображения даты.

Просто мой случай для тех же требованийvalueFormatter: 

let result: string;
if (params.value) {
    var formats = [
        moment.ISO_8601
    ];
    let date = moment(params.value, formats, true);

    if (date.isValid()) {
        let dateObject: Date = date.toDate();
        result = ('0' + dateObject.getDate()).slice(-2) + '.'
            + ('0' + (dateObject.getMonth() + 1)).slice(-2) + '.'
            + dateObject.getFullYear();
        if (element.DataType == "datetime")
            result += ' ' + ('0' + dateObject.getHours()).slice(-2) + ':'
                + ('0' + dateObject.getMinutes()).slice(-2) + ':'
                + ('0' + dateObject.getSeconds()).slice(-2);
    }
}
return result;

На заказ cellEditor главное это getValue функция - которая будет использоваться внутри (для переплета) 

getValue(): any {
    let value =  (this.selectedDate.getFullYear() + '-' 
        + ('0' + (this.selectedDate.getMonth() + 1)).slice(-2) + '-' 
        + ('0' +  this.selectedDate.getDate()).slice(-2)
        +  'T'
        + ('0' + this.selectedDate.getHours()).slice(-2) + ':'
        + ('0' + this.selectedDate.getMinutes()).slice(-2) + ':'
        + ('0' + this.selectedDate.getSeconds()).slice(-2));
    return value;
}

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

...