Set First and Last Date of Month in Bootstrap DatePicker in AngularJS

mahesh213
 
on Feb 18, 2020 05:02 AM
1829 Views

Hi,

Based upon below url code i need to display lastday of month in date textbox

Set Default Date in Bootstrap Datepicker in AngularJS

could you please help me

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

Hi mahesh213,

Check the below sample.

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();
            var lastDate = new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0);
            var lastDay = (lastDate.getMonth() + 1) + "/" + lastDate.getDate() + "/" + lastDate.getFullYear();
            $scope.startDate = firstDay;
            $scope.endDate = lastDay;
        });
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    Start Date: <input datepicker ng-model="startDate" />
    End Date: <input datepicker ng-model="endDate" />
</body>
</html>

Demo