Menu ▼



Posted By :
avatarmrkraju
Total Views : 1174

Show Monday as first column in AngularJS UI bootstrap datepicker

This example shows you how to show monday as first column in AngularJS UI bootstrap datepicker. To show monday as first column we need to set startingDay property value to "1" in dateOptions.

Syntax

<input type="text" uib-datepicker-popup="{{dateformat}}" ng-model="dt" is-open="showdp" datepicker-options="dateOptions" />

$scope.dateOptions  = {
    startingDay: 1
};

Example
angular datepicker show Monday as first column

Source code

<html>
<head>    
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script language="javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
    <script language="javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
    <script language="javascript" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
</head>
<body style="Padding:20px;">
    <form>
    
    <div ng-app="myApp" ng-controller="myCntrl">
    Date: 
        <input type="text" uib-datepicker-popup="{{dateformat}}" ng-model="dt" is-open="showdp" datepicker-options="dateOptions" />
        <span>
            <button type="button" class="btn btn-default" ng-click="showcalendar($event)">
                <i class="glyphicon glyphicon-calendar"></i>
            </button>
        </span>
    </div>
    <script language="javascript">
        angular.module('myApp', ['ngAnimate', 'ui.bootstrap']);
        angular.module('myApp').controller('myCntrl', function ($scope) {
            $scope.today = function () {
                $scope.dt = new Date();
            };
            $scope.dateformat="MM/dd/yyyy";
            $scope.today();
            $scope.showcalendar = function ($event) {
                $scope.showdp = true;
            };
            $scope.showdp = false;        
            $scope.dateOptions  = {
                startingDay: 1
            };
        });
    </script>
    </form>
</body>
</html>






comments powered by Disqus


Search dotnetlearners.com