Display current date AngularJS

Question

I want that when the user navigates to my page to see the current date displayed in my html as a default value.

This is my html for the date picker select:

        <div class="row">
    <div class="col-lg-12">
        <div class="panel panel-primary">
            <div class="panel-heading">
                {{card}}
            </div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-lg-12">
                        <p>{{DatePickerCtrl.chosenStartDate | date : 'longDate'}} - {{DatePickerCtrl.chosenEndDate | date : 'longDate'}}</p>
                    </div>
                </div>
                <ng-include></ng-include>
            </div>
            <a href ng-click="footerLinkClicked()">
                <div class="panel-footer">
                    <span class="pull-left">Select Date</span>
                    <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                    <div class="clearfix"></div>
                </div>
            </a>
        </div>
    </div>
</div>

This is my controller corresponding to my date picker:

    angular.module('App').directive('datePicker', function($mdDialog, $rootScope, $filter) {
    return {
        restrict: 'E',
        templateUrl: 'components/date-picker-select/date-picker-select.html',
        scope: {
            card: '='
        },
        controller: function($scope) {
            var self = this;
            $rootScope.$on("dateWasChosen", function() {
                self.chosenStartDate = JSON.parse(localStorage.getItem('chosenStartDate'));
                self.chosenEndDate = JSON.parse(localStorage.getItem('chosenEndDate'));
            });
            $scope.footerLinkClicked = function() {
                $mdDialog.show({
                    controller: datePickerController,
                    templateUrl: 'components/date-picker-select/date-picker-modal.html',
                    parent: angular.element(document.body),
                    clickOutsideToClose: true
                }).then(function(answer) {
                    console.log("Fff");
                }, function() {});
            }
        },

        controllerAs: 'DatePickerCtrl'
    }
})
function datePickerController($scope, $mdDialog, $rootScope, datePickerFactory, $filter) {
    console.log("suntem in date picker sel");
    $scope.startDateL = new Date();
    $scope.endDateL = new Date();
    $scope.close = function() {
        $mdDialog.hide();
        console.log("closing");
    }
    $scope.setDate = function(startDate, endDate) {
        $rootScope.startDate = $scope.startDateL;
        $rootScope.endDate = $scope.endDateL;
        var stDate = $filter('date')($rootScope.startDate, 'yyyy-MM-dd');
        var enDate = $filter('date')($rootScope.endDate, 'yyyy-MM-dd');
        console.log(stDate);
        console.log(enDate);
        datePickerFactory.save({
            sDate: stDate,
            eDate: enDate
        }, function() {})

        localStorage.setItem('chosenStartDate', JSON.stringify($rootScope.startDate));
        localStorage.setItem('chosenEndDate', JSON.stringify($rootScope.endDate));
        $rootScope.$broadcast("dateWasChosen");
        $mdDialog.hide();
    }
}

I want today's date to be displayed when i enter the page.

Thanks in advance!

Mahendra Kulkarni · Accepted Answer · 2016-06-29 13:45:43Z

1

Simply create a date object in the controller first

function Ctrl($scope){
   $scope.date = new Date();
}

then in your template do something like:

<div ng-app ng-controller="Ctrl">
    {{date | date:'yyyy-MM-dd'}}
</div>

function Ctrl($scope){
   $scope.date = new Date();
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="Ctrl">
     {{date | date:'yyyy-MM-dd'}}
</div>

and format it the way you want.

edited Jun 29, 2016 at 13:45

Mahendra Kulkarni

1,5153 gold badges26 silver badges37 bronze badges

answered Jun 29, 2016 at 13:00

Jean-Michel Provencher

7336 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

blaa Over a year ago

but what I want afterwards is to be able to change the date. You know what I mean ?

blaa Over a year ago

i set the date with setDate() function and then I broadcast it

Jean-Michel Provencher Over a year ago

No I don't. What my code will do is get the current Date everytime you reload the page.

Jean-Michel Provencher Over a year ago

Well simply use setDate() instead of new Date()

blaa Over a year ago

if I do that it gives me setDate() is not a function

|

Mahendra Kulkarni · Accepted Answer · 2016-06-29 13:16:34Z

0

You just need to assign the Date object to scope where You want to evaluate this expression.

answered Jun 29, 2016 at 13:16

Mahendra Kulkarni

1,5153 gold badges26 silver badges37 bronze badges

Collectives™ on Stack Overflow

Display current date AngularJS

2 Answers 2

9 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related