Sharing Top Content from the Angular-sphere.

How to Use a date Filter in AngularJS?

  • In this article too, I’ll show you how you can add the “date” filter to an HTML template using an expression.
  • In the later part of this article, I’ll show you how to Inject the “date” filter to a controller using JavaScript.
  • Simply, add the format after the date filter, as I have shown in the above examples.
  • First, the filter date, which is followed by the date_value, the format at which you may want to display the date and finally the timezone.
  • In the explicit method, I have defined the fullDate format with the date filter followed by adding the system date as the value.

In this article we will learn how to use the date filter in AngularJS or how to inject AngularJS date filter in Controller.

@theEncodeDna: #HowTo: Inject #AngularJS date Filter in Controller using #JavaScript ~ #webdevelopment…

In AngularJS, the “date” filter formats a text to a given date format. You can check the AngularJS Docs for a detail summary of its in-built date formatting functions. It provides various formats, which you may add with the filter to get a desired result.

If you are new to AngularJS, then I recommend you to read my first article that I have written for beginners.

Previously, I have explained with examples about AngularJS filters (it’s an introduction about filters in AngularJS). In that post, I have also covered briefly about various filters such as number filter (using decimals too), uppercase filter and lowercase filter. Later, I have written a post each about the currency filter (covers how to inject currency in a controller) and how to convert a string to upper case using the “uppercase” filter in AngularJS.

In this article too, I’ll show you how you can add the “date” filter to an HTML template using an expression. In the later part of this article, I’ll show you how to Inject the “date” filter to a controller using JavaScript.

The date filter supports the below mentioned formats.

a) medium

b) short

c) fullDate

d) longDate

e) shortDate

f) mediumTime

g) shortTime

{{ date_expression | date : format : timezone}}

For example, I wish to display the date using fullDate format.

In the above method, I am using HTML5 &ltinput> type “date”, to select a date. Be adviced, the &ltinput> type “date” does not work with many browsers. However, it works fine using Chrome.

In the next part of this article, I have written the “date” formatting procedure in a Controller using JavaScript. Don’t miss that article.

Similarly, you may try using the shortDate format too.

Along with above-mentioned formats, you can format a string using standard date formats such as, MM/dd/yyyy or dd/MM/yyyy etc. Simply, add the format after the date filter, as I have shown in the above examples.

This process is common among all AngularJS filters. First, check the syntax for the filter.

$filter(‘date’)(date_value, format, timezone)

The above syntax speaks for itself. First, the filter date, which is followed by the date_value, the format at which you may want to display the date and finally the timezone.

You may add the filter with its formats explicitly or dynamically.

In the explicit method, I have defined the fullDate format with the date filter followed by adding the system date as the value.

Now, let’s take this to the next level and add some dynamic features to it. I want to choose a “format” from a pre-defined set of values. For this, I have added a &ltselect> element with few values in it.

That’s it. Hope you find this article and its example useful. If you have any queries, please leave a message below. Don’t forget to share this article with your friends on Twitter or Facebook.

Thanks for reading.

Previous – AngularJS “currency” Filter Next – AngularJS “orderBy” Filter

How to Use a date Filter in AngularJS?

Comments are closed, but trackbacks and pingbacks are open.