Skip to main content

Angular Date Pipe Tutorial with Date Format Examples

In this Angular DatePipe tutorial, we are going to learn how to use Date Pipe operator to format the date as per the locale rule. 

Angular DatePipe offers various predefined date formats; furthermore, we can also customize the date formats using DatePipe.

 

Angular 14 Date Pipe Example

The Angular Date Pipe is a built-in pipe in Angular that formats a date value according to a specified format. The Date Pipe accepts various formats such as year, month, day, hour, minute, and second.

To use the Date Pipe in your Angular application, you need to import the DatePipe module from the '@angular/common' package in your component.ts file.

Here is an example of using the Date Pipe in an Angular component template: 

The current date and time is {{ currentDate | date: 'short' }}

In the above example, currentDate is a variable containing the current date and time, and the date pipe is used to format the date value using the 'short' format.

Now, let's take a look at some common date formats that can be used with the Angular Date Pipe:

1. Short Date Format: 'short'

The 'short' format displays the date in the format 'M/d/yy, h:mm a'. Here is an example: 

The current date is {{ currentDate | date: 'shortDate' }}

2. Long Date Format: 'long'

The 'long' format displays the date in the format 'MMMM d, y, h:mm:ss a z'. Here is an example: 

The current date is {{ currentDate | date: 'long' }}

3. Custom Date Format:

You can also create a custom date format using the following pattern:

  • y: year
  • M: month
  • d: day
  • h: hour
  • m: minute
  • s: second
  • a: AM/PM marker
  • Z: timezone offset

Here are some examples:

The current year is {{ currentDate | date: 'y' }}
The current date is {{ currentDate | date: 'M/d/yyyy' }}
The current time is {{ currentDate | date: 'h:mm:ss a' }}
The current timezone is {{ currentDate | date: 'Z' }}

Note that you can also combine the above formats to create a custom format that suits your needs.

Labels:

Comments

Post a Comment

Popular posts from this blog

Angular 14 CRUD Operation with Web API .Net 6.0

How to Perform CRUD Operation Using Angular 14 In this article, we will learn the angular crud (create, read, update, delete) tutorial with ASP.NET Core 6 web API. We will use the SQL Server database and responsive user interface for our Web app, we will use the Bootstrap 5. Let's start step by step. Step 1 - Create Database and Web API First we need to create Employee database in SQL Server and web API to communicate with database. so you can use my previous article CRUD operations in web API using net 6.0 to create web API step by step. As you can see, after creating all the required API and database, our API creation part is completed. Now we have to do the angular part like installing angular CLI, creating angular 14 project, command for building and running angular application...etc. Step 2 - Install Angular CLI Now we have to install angular CLI into our system. If you have already installed angular CLI into your system then skip this step.  To install angular CLI ope...
Post a Comment
Read more

Angular 14 : 404 error during refresh page after deployment

In this article, We will learn how to solve 404 file or directory not found angular error in production.  Refresh browser angular 404 file or directory not found error You have built an Angular app and created a production build with ng build --prod You deploy it to a production server. Everything works fine until you refresh the page. The app throws The requested URL was not found on this server message (Status code 404 not found). It appears that angular routing not working on the production server when you refresh the page. The error appears on the following scenarios When you type the URL directly in the address bar. When you refresh the page The error appears on all the pages except the root page.   Reason for the requested URL was not found on this server error In a Multi-page web application, every time the application needs to display a page it has to send a request to the web server. You can do that by either typing the URL in the address bar, clicking on the Me...
Post a Comment
Read more

Send an Email via SMTP with MailKit Using .NET 6

How to Send an Email in .NET Core This tutorial show you how to send an email in .NET 6.0 using the MailKit email client library. Install MailKit via NuGet Visual Studio Package Manager Console: Install-Package MailKit How to Send an HTML Email in .NET 6.0 This code sends a simple HTML email using the Gmail SMTP service. There are instructions further below on how to use a few other popular SMTP providers - Gmail, Hotmail, Office 365. // create email message var email = new MimeMessage(); email.From.Add(MailboxAddress.Parse("from_address@example.com")); email.To.Add(MailboxAddress.Parse("to_address@example.com")); email.Subject = "Email Subject"; email.Body = new TextPart(TextFormat.Html) { Text = "<h1>Test HTML Message Body</h1>" }; // send email using var smtp = new SmtpClient(); smtp.Connect("smtp.gmail.com", 587, SecureSocketOptions.StartTls); smtp.Authenticate("[Username]", "[Password]"); smtp.Se...
Post a Comment
Read more