Uandishi wa Tarehe Kwa Kutumia Mifereji (Pipes) Katika Angular
Kwa kutumia mfereji DatePipe tunaweza
kuweka muundo maalum wa tarehe inayotolewa.
Mfereji huu unaweza kukubua vigezo vifuatavyo
kwa muundo wa kuonyesha tarehe:
| Muundo | Sawa Na | Mfano (kwa en-US locale) |
|---|---|---|
'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 |
Mifano
Wacha tuone utendakazi wa mfereji kwa mifano.
Ili kufanya hivyo, katika darasa la sehemu (component) tuweke
sifa myDate, ambayo tutaandika
tarehe:
export class AppComponent {
public myDate: number = Date.parse('2025-12-31');
}
Mfano
Wacha tuonyeshe tarehe yetu, bila kukabidhi vigezo vyovyote kwenye mfereji:
<div>
{{ myDate | date }}
</div>
Matokeo ya msimbo uliofanyika:
<div>Dec 31, 2025</div>
Mfano
Sasa tuonyeshe muundo mfupi wa tarehe:
<div>
{{ myDate | date:'shortDate' }}
</div>
Matokeo ya msimbo uliofanyika:
<div>12/31/25</div>
Mfano
Wacha tuonyeshe tarehe yetu na wakati huo huo tujue ni siku gani ya wiki ilikuwa:
<div>
{{ myDate | date:'fullDate' }}
</div>
Matokeo ya msimbo uliofanyika:
<div>Wednesday, December 31, 2025</div>
Kazi Za Vitendo
Tarehe iliyopewa:
public myDate: number = Date.parse('2025-01-02');
Iandae kwa muundo ufuatao:
'Jan 2, 2025'
Andaa tarehe kutoka kwa kazi iliyotangulia kwa muundo ufuatao:
'1/2/25, 3:00 AM'
Andaa tarehe kwa muundo ufuatao:
'1/2/25'
Andaa tarehe kwa muundo ufuatao:
'January 2, 2025 at 3:00:00 AM GMT+3'
Andaa tarehe kwa muundo ufuatao:
'Thursday, January 2, 2025'
