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 ගුණාංගයක් අර්ථ දක්වා
දිනයක් ලියන්නෙමු:
export class AppComponent {
public myDate: number = Date.parse('2025-12-31');
}
උදාහරණය
නලයට කිසිදු පරාමිතියක් යොමු නොකර අපගේ දිනය ප්රතිදානය කරමු:
<div>
{{ myDate | date }}
</div>
ක්රියාත්මක කළ කේතයේ ප්රතිපලය:
<div>Dec 31, 2025</div>
උදාහරණය
දැන් දිනය කෙටි ආකාරයෙන් ප්රදර්ශනය කරමු:
<div>
{{ myDate | date:'shortDate' }}
</div>
ක්රියාත්මක කළ කේතයේ ප්රතිපලය:
<div>12/31/25</div>
උදාහරණය
අපගේ දිනය ප්රතිදානය කර එය සතියේ කුමන දිනට යැදුනේදැයි දැන ගනිමු:
<div>
{{ myDate | date:'fullDate' }}
</div>
ක්රියාත්මක කළ කේතයේ ප්රතිපලය:
<div>Wednesday, December 31, 2025</div>
ප්රායෝගික කාර්යයන්
දිනයක් ලබා දී ඇත:
public myDate: number = Date.parse('2025-01-02');
එය පහත ආකාරයට ආකෘතිකරණය කරන්න:
'Jan 2, 2025'
පෙර කාර්යයේ දිනය පහත ආකාරයට ආකෘතිකරණය කරන්න:
'1/2/25, 3:00 AM'
දිනය පහත ආකාරයට ආකෘතිකරණය කරන්න:
'1/2/25'
දිනය පහත ආකාරයට ආකෘතිකරණය කරන්න:
'January 2, 2025 at 3:00:00 AM GMT+3'
දිනය පහත ආකාරයට ආකෘතිකරණය කරන්න:
'Thursday, January 2, 2025'
