Disable weekends in Angular UI bootstrap datepicker

This example shows you how to disable weekend days in AngularJS UI bootstrap datepicker. To disable weekends in AngularJS UI bootstrap datepicker we need implement the function for event date-disabled.

Syntax

<input type="text" uib-datepicker-popup="{{dateformat}}" ng-model="dt" is-open="showdp" date-disabled="disabled(date, mode)" /> $scope.disabled = function (date, mode) { return (mode === 'day' && (date.getDay() === 0 || date.getDay() === 6)); };

Example

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" date-disabled="disabled(date, mode)" /> <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(2015, 10, 16); }; $scope.dateformat="MM/dd/yyyy"; $scope.today(); $scope.showcalendar = function ($event) { $scope.showdp = true; }; $scope.showdp = false; $scope.disabled = function (date, mode) { return (mode === 'day' && (date.getDay() === 0 || date.getDay() === 6)); }; }); </script> </form> </body> </html>