Вирішено: формат дати кутової сітки кендо

Звичайно, давайте заглибимося в тему обробки формату дати в Kendo Angular grid. Як розробники, ми часто стикаємося з ситуаціями, коли нам потрібно маніпулювати форматами дат, щоб відповідати вимогам додатків, які ми створюємо. Використовуючи універсальні бібліотеки Angular і Kendo UI, ми можемо вирішити такі проблеми. У цій статті ми розглянемо, як легко досягти цього в Kendo Angular Grid.

Кендо Ангуляр та Angular це потужні інструменти, які допомагають створювати динамічні складні інтерфейси користувача. Kendo UI для Angular — це професійна бібліотека інтерфейсу користувача зі 100+ компонентами для створення сучасних та цікавих програм.

// Initial date formatting in Angular
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <kendo-grid &#91;data&#93;="gridData">
      // DatePipe format: 'shortDate'
      <kendo-grid-column field="OrderDate" title="Order Date" &#91;editor&#93;="'date'" format="{0:d}">
      </kendo-grid-column>
    </kendo-grid>
  `
})
export class AppComponent {
  public gridData:any[] = products;
}

Формат дати Kendo Angular Grid: рішення

Щоб максимально використати потенціал Kendo UI, краще ознайомитися з його численними функціями. Однією з таких функцій є форматування дати в сітці.

Ви можете керувати відображенням дат та інших типів даних у сітці за допомогою властивості `format`. Ця властивість використовує ті самі правила форматування, що й `DatePipe` з Angular. Встановивши значення формату як `{0:d}`, наприклад, дату можна відображати у форматі 'shortDate'.

// Date format using Kendo UI
<kendo-grid-column field="OrderDate" title="Order Date" format="{0:d}">
</kendo-grid-column>

Покрокове пояснення коду

По-перше, ми імпортуємо необхідний пакет Angular `Component`. Потім ми визначаємо «компонент», який представляє сітку кендо. У цю сітку ми передаємо деякі дані (`gridData`). У цих даних у нас є поле під назвою "Дата замовлення".

У визначенні Kendo Grid ми визначаємо `kendo-grid-column` для `OrderDate`. Ми використовуємо властивість `format` і встановлюємо його значення як `{0:d}`, що є форматом 'shortDate' у `DatePipe` Angular.

Додаткові бібліотеки та функції

Kendo UI для Angular містить численні функції та компоненти. Для розширених операцій з датами Kendo UI для Angular підтримує модуль `DateInputs`. Він містить компоненти DatePicker, TimePicker, DateTimePicker і DateInput, які можна використовувати для різних сценаріїв.

  • Команда Вибір дати дозволяє користувачам вибрати дату зі спливаючого вікна календаря або ввівши її в поле введення.
  • Команда DateTimePicker Елементи керування нагадують компоненти DatePicker і TimePicker і надають можливість вибору як дати, так і часу.

Використовуючи ці готові компоненти інтерфейсу користувача, розробники можуть легко й ефективно виконувати складні завдання, що забезпечує більш продуктивний і плавний робочий процес.

Схожі повідомлення:

Залишити коментар