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'