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.

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

    <p>Date format using Formats EEE</p>

    <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>
</html>

Try it

👉 See this Demo (Using Formats EEE and EEEE)

Select a Date

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.

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.

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

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

        Select a Date: <input type="date" id="date" ng-model="datevalue" />

        <p> {{ result }} </p>
    </div>
</body>

<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>
</html>

Try it

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.

See this demo

← PreviousNext →