Angular-да күндерді форматтау DatePipe арқылы

DatePipe арқылы біз шығарылатын күннің белгілі бір форматын белгілей аламыз. Бұл күннің көріну форматы үшін келесі параметрлерді қабылдай алады:

Мысалдар

Каналдың жұмысын мысалдар арқылы қарастырайық. Ол үшін компонент класында myDate қасиетін белгілейміз, оған күнді жазамыз:

app/app.component.tsexport class AppComponent {
  public myDate: number = Date.parse('2025-12-31');
}

Мысал

Күнді каналға ешпараметр бермей шығарайық:

app/app.component.html<div>
  {{ myDate | date }}
</div>

Орындалған кодтың нәтижесі:

html<div>Dec 31, 2025</div>

Мысал

Енді күннің қысқаша шығарылуын көрсетейік:

app/app.component.html<div>
  {{ myDate | date:'shortDate' }}
</div>

Орындалған кодтың нәтижесі:

html<div>12/31/25</div>

Мысал

Күнді шығарып, сонымен бірге оның қай апта күніне туаратынын білейік:

app/app.component.html<div>
  {{ myDate | date:'fullDate' }}
</div>

Орындалған кодтың нәтижесі:

html<div>Wednesday, December 31, 2025</div>

Практикалық тапсырмалар

typescriptpublic myDate: number = Date.parse('2025-01-02');

typescript'Jan 2, 2025'

typescript'1/2/25, 3:00 AM'

typescript'1/2/25'

typescript'January 2, 2025 at 3:00:00 AM GMT+3'

typescript'Thursday, January 2, 2025'