How to Get the Day of Week or Weekday from a Date using AngularJS date Filter

There are a couple of ways to get the day of week from a given date in AngularJS. Either you can use AngularJS date filter and its in-built date formats to get the weekday or you can simply do it from your controller. Along with its in-built feature, I’ll show you how to get the weekdays in numbers of a given date in your AngularJS controller.

-----------------

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

AngularJS Tutorial for Beginners – My First AngularJS App “Hello World”

-----------------

Get Weekday of a Date using AngularJS Date Filter and its in-built Format

On my web page, I have a date element. Its an input element of type date. I can choose a date from it. I’ll bind the model object (date) to an expression {{ }}, along with the AngularJS date filter and the formats EEE or EEEE.

1) Format EEE denotes, Day in Week in short, such as, Mon, Tue, Wed etc.
2) Format EEEE shows day in week as a full word, such as, Monday, Tuesday, Wednesday etc.

The Markup
<!DOCTYPE html>
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js">
        </script>

    <div ng-app="dateApp" 
        ng-controller="dateController">

        <input type="date" id="date" ng-model="datevalue" />

        <p> {{ datevalue | date : 'EEE' }} </p>
    </div>
</body>
<script>
    var dtApp = angular.module('dateApp', []);
    dtApp.controller('dateController',
        function ($scope, $filter)
        { }
    );
</script>

Try this Demo (Using Formats EEE and EEEE)

Select a Date
{{ datevalue | date : 'EEE' }}
{{ datevalue | date : 'EEEE' }}

Simple isn’t it.

Now lets make it a little more dynamic. I want to get the day of week converted to a number. I can’t use any format here. However, there is a workaround.

Convert the Day of Week in number from AngularJS Controller

The JavaScript getDay() method converts a given week day, in a number or a numeric value. For example, if the weekday is Tuesday, the method will return the value “2” (or 3 for Wednesday and so on). I can use this method in my AngularJS controller to convert weekdays in numbers.

The Markup

Here’s a rewrite of the above markup. There is a slight change. I am not using the date filter in the expression {{ }}. However, I’ll update the expression through my controller.

<div ng-app="dateApp" 
    ng-controller="dateController">

    <input type="date" id="date" ng-model="datevalue" />

    <p> {{ result }} </p>
</div>
The Script
<script>
    var dtApp = angular.module('dateApp', []);

    dtApp.controller(
        'dateController',
        function ($scope, $filter) {
            $scope.$watch('datevalue', function (val) {
                if (val != undefined)
                    $scope.result = new Date(val).getDay();
            }, true);
        }
    );
</script>

See this Demo

The AngularJS $watch helps listen any change in the $scope. Therefore, whenever I select a date from the date picker, the $watch detects the change and executes a function. Inside the function, I am first checking if the parameter val has a value. Next, using the .getDay() method (of Date function), I’ll convert the week day to a numeric value and update my Expression.

That’s it. Thanks for reading.

Previous - How to Implement a Search Filter on a Table in AngularJSNext - Email Validation in AngularJS using ng-pattern Directive



Like this Article? Subscribe now, and get all the latest articles and tips, right in your inbox.

Enter your email id

Delivered by FeedBurner
Tweet this article Facebook Google+

Related Posts:

Join our Google Plus Community and be a part of a discussion!