Set Default Date in Bootstrap Datepicker in AngularJS

mahesh213
 
on Feb 18, 2020 04:36 AM
Sample_183838.zip
3444 Views

How to load 1st day of month by default on datepicker.

initially it was not loading by default first day of month

@{
    Layout = null;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script  src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <link  rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
    <link  rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
    <link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css" rel="stylesheet"/>
    <script  src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', []);
        app.directive('datepicker', function () {
            return {
 
                restrict: 'A',
                // Always use along with an ng-model
                require: '?ngModel',
 
                link: function (scope, element, attrs, ngModel) {
                    if (!ngModel) return;
 
                    ngModel.$render = function () {
                        element.datepicker('update', ngModel.$viewValue || '');
                    };
 
                    element.datepicker().on("changeDate", function (event) {
                        scope.$apply(function () {
                            ngModel.$setViewValue(event.date);
                        });
                    });
                }
            };
        });
        app.controller('MyController', function ($scope) {
            var firstDay = new Date(new Date().getFullYear(), new Date().getMonth(), 1);           
            $scope.eventdate = firstDay;
        });
    </script>
  </head> 
<body ng-app="MyApp" ng-controller="MyController"> 
    <input datepicker ng-model="eventdate" />
    Start Date : <input type="date" ng-model="StartDate" />
    End Date : <input type="date" ng-model="EndDate" />
</body>
</html>

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Feb 18, 2020 04:51 AM

Himahesh213,

Refer below code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', []);
        app.directive('datepicker', function () {
            return {
                restrict: 'A',
                // Always use along with an ng-model
                require: '?ngModel',

                link: function (scope, element, attrs, ngModel) {
                    if (!ngModel) return;

                    ngModel.$render = function () {
                        element.datepicker('update', ngModel.$viewValue || '');
                    };

                    element.datepicker().on("changeDate", function (event) {
                        scope.$apply(function () {
                            ngModel.$setViewValue(event.date);
                        });
                    });
                }
            };
        });
        app.controller('MyController', function ($scope) {
            var firstDay = (new Date().getMonth() + 1) + "/01/" + new Date().getFullYear();
            $scope.eventdate = firstDay;
        });
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <input datepicker ng-model="eventdate" />
</body>
</html>

Demo