Angular හි නල හරහා දිනයන් ආකෘතිකරණය කිරීම

DatePipe නලය භාවිතයෙන් අපට ප්‍රතිදානය කරන දිනය සඳහා නිශ්චිත ආකෘතියක් සකසා දිය හැකිය. මෙම නලය දිනය ප්‍රදර්ශනය කිරීමේ ආකෘතිය සඳහා පහත පරාමිතීන් පිළිගනී:

ආකෘතිය සමාන උදාහරණය (en-US දේශීයකරණය සඳහා)
'short' 'M/d/yy, h:mm a' 12/31/25, 3:00 AM
'medium' 'MMM d, y, h:mm:ss a' Dec 31, 2025, 3:00:00 AM
'long' 'MMMM d, y, h:mm:ss a z' December 31, 2025 at 3:00:00 AM GMT+3
'full' 'EEEE, MMMM d, y, h:mm:ss a zzzz' Wednesday, December 31, 2025 at 3:00:00 AM GMT+03:00
'shortDate' 'M/d/yy' 12/31/25
'mediumDate' 'MMM d, y' Dec 31, 2025
'longDate' 'MMMM d, y' December 31, 2025
'fullDate' 'EEEE, MMMM d, y' Wednesday, December 31, 2025
'shortTime' 'h:mm a' 3:00 AM
'mediumTime' 'h:mm:ss a' 3:00:00 AM
'longTime' 'h:mm:ss a z' 3:00:00 AM GMT+3
'fullTime' 'h:mm:ss a zzzz' 3:00:00 AM GMT+03:00

උදාහරණ

උදාහරණ මගින් නලයේ ක්‍රියාකාරිත්වය බලමු. මේ සඳහා සංරචක පන්තියේ අපි 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>

ප්‍රායෝගික කාර්යයන්

Задание 1

දිනයක් ලබා දී ඇත:

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

එය පහත ආකාරයට ආකෘතිකරණය කරන්න:

typescript'Jan 2, 2025'
Задание 2

පෙර කාර්යයේ දිනය පහත ආකාරයට ආකෘතිකරණය කරන්න:

typescript'1/2/25, 3:00 AM'
Задание 3

දිනය පහත ආකාරයට ආකෘතිකරණය කරන්න:

typescript'1/2/25'
Задание 4

දිනය පහත ආකාරයට ආකෘතිකරණය කරන්න:

typescript'January 2, 2025 at 3:00:00 AM GMT+3'
Задание 5

දිනය පහත ආකාරයට ආකෘතිකරණය කරන්න:

typescript'Thursday, January 2, 2025'