Angularjs Bootstrap Datepicker enable/disable dates with configuration example

enable/disable dates angularjs bootstrap datepicker example angularjs bootstrap datepicker not working angularjs bootstrap datepicker validation angularjs bootstrap datepicker format angularjs bootstrap datepicker directive angular bootstrap datepicker init-date angular bootstrap datepicker invalid date angular bootstrap datepicker opens only once

Adding calendar to the angularjs application is more than easy to any other application if you configured it properly. Angularjs Bootstrap DatePicker have more features than any other available calendar, you can set all your condition in html from data format to min-date, max-date, date disabled for Saturday and Sunday, first day of the week, todays button text, Week button text, close button text, clear button text, and many more, let's see some very common and every day required features.

Files we need to add in our index.html, CSS and JavaScript

  • bootstrap.css or bootstrap.min.css
  • ui-bootstrap-tpls-version.js say ui-bootstrap-tpls-0.11.2.js
  • we need to inject 'ui.bootstrap' in module, angular.module('xyz', ['ui.bootstrap'])

Configure calendar

It's better to configure the calendar for entire application so whenever we need to change the date format, starting date, show or hide the week or any other change must be for entire application rather than checking entire application and made changes one by one.

 app.config(['datepickerConfig', 'datepickerPopupConfig', function (datepickerConfig, datepickerPopupConfig) {
    datepickerConfig.startingDay = 1;
    datepickerConfig.showWeeks = false;

    datepickerPopupConfig.datepickerPopup = "MM/dd/yyyy";
    datepickerPopupConfig.currentText = "Now";
    datepickerPopupConfig.clearText = "Erase";
    datepickerPopupConfig.closeText = "Close";
}]);
  • startingDay: default 0 (Sunday)
  • showWeeks: default true, so it will show the wee number on left side aand button which I don't want so set it false
  • datepickerPopup: Default: 'yyyy-MM-dd' but I changed it to 'MM/dd/yyyy'
  • currentText: Current date button text, default 'Today', I changed it to 'Now' to show the changes
  • clearText: clear selected date button text, Default: 'Clear', I changed it to Erase
  • closeText: close calendar button text, Default: 'Done', which I changed to Close

Now let's create a very basic calendar which need to be open on clicking the text box as well as on calendar Icon

// Put to value on scope, model and calendar open state
$scope.startDate = new Date();
$scope.opened = false;

<div class="form-group">
  <div class='input-group'>
      <input type='text' 
             class="form-control" 
             datepicker-popup
             ng-model="startDate" 
             is-open="opened" 
             ng-click="opened = !opened" 
             ng-readonly='true' />
      <span class="input-group-addon" 
            ng-click="opened = !opened; $event.stopPropagation()">
          <i class="glyphicon glyphicon-calendar"></i>
      </span>
  </div>
</div>

Let's look the input text box attributes to understand one by one

  • datepicker-popup: you need to provide the date format, but I already set into the config so need to pass any value
  • ng-model: the model variable to bind the value
  • is-open: calendar status, open or close (true/false), we used opened which is false, so by default calendar will be closed, change it to true and see the effect
  • ng-click: on cliecking the textbox, I am toggling the value to true/false, to open/close the calendar
  • ng-readonly: make it true, to disable the typing by using
  • On date calendar I again written the same code to toggle the open/close and added extra code to propagate the event.

Let's take another example of two date calendar on the same page say start date and end date. The very first validation we need to give, start date must not be greater than end date, and end date must not be less than start date. If you are using jquery calendar then it is not so easy but with Angularjs Bootstrap DatePicker it is more than easy, just we need to pass min and max value to each other, let's check it

In controller we need to add our model and calendar status for both calendar

// both calendar need to be close by default
$scope.opened ={
  start: false,
  end: false
};

$scope.model = {
    startDate: new Date('09/21/2015'),
    endDate: new Date()
};

In html we need to use the min-date and max-date to stop the user to select the start date greater than end date and end date earlier than the start date,

// In start date input textbox
max-date='model.endDate'

// In end date input textbox
min-date='model.startDate'

Here is the complete code:

Start Date 
<div class="form-group">
  <div class='input-group'>
      <input type='text' class="form-control" 
             datepicker-popup
             ng-model="model.startDate" 
             is-open="opened.start" 
             ng-click="opened.start = !opened.start" 
             max-date='model.endDate'
             ng-readonly='true'/>
      <span class="input-group-addon" for='start' 
            ng-click="opened.start = !opened.start; $event.stopPropagation()">
          <i class="glyphicon glyphicon-calendar"></i>
      </span>
  </div>
</div>
End Date
<div class="form-group">
  <div class='input-group'>
      <input type='text' 
             class="form-control" 
             datepicker-popup
             ng-model="model.endDate" 
             is-open="opened.end" 
             ng-click="opened.end = !opened.end"
             min-date='model.startDate' 
             ng-readonly='true'  />
      <span class="input-group-addon" 
            ng-click="opened.end = !opened.end;  $event.stopPropagation()">
          <span class="glyphicon glyphicon-calendar"></span>
      </span>
  </div>
</div>

To Disable Future Dates

To disable future dates, first we need the current date in our controller, we will get the current date by using Date function, see this

In site controller:

$scope.today = new Date();

In our text box HTML:

max-date="today"

We are done, but there is a problem, we need to be careful, it is the client machine date so if he will change his system date and refresh the page, it will take his system date. To solve it, we need to take the date from server and put on the scope.

To Disable Past Dates

To disable past dates, first we need the current date in our controller, to get the current date either we can get by Date function or return from the server (recommended) , see this

In site controller:

$scope.today = new Date();

In our text box HTML:

min-date="today"

Conditional Start/End, From/To Date Max/Min Value:

It is very common scenario to search by From/Start and To/End date and requirement always are same From/Start date must not be greater then To/End date, with angulrjs it is really more that easy. Let's say our page or search model is like this (in controller)

$scope.model = {
    startdate:'',
    enddate: '',
    ...........
    ...........
}

Let's understand what we need

  1. Start date must not be greater then model.enddate
  2. End date must not be model less than model.startdate

We have done, just put the max-date and min date attribute in html with these two values:

Start Date text box HTML add

max-date="model.enddate"

End Date text box HTML add

min-date="model.startdate"

Until the user is selecting any date, both the calendar will be free or you can bind the min date of start date and max date of end date text box by some value.

Disable weekends

In some case if you want to disable the date for Saturday and Sunday then

Create a function on the scope like this

// Disable weekend selection
$scope.disabled = function(date, mode) {
   return ( mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ) );
};

// in your input box just add
date-disabled="disabled(date, mode)"
Ali Adravi Having 10+ years of experience in Microsoft Technologies (C#, ASP.Net, MVC and SQL Server). Worked with Metaoption LLC, for more than 8 years and still with the same company. Always ready to learn new technologies and tricks.
  • angularjs
  • bootstrap
  • Datepicker
  • Calendar
By Ali Adravi On 22 Sep, 15  Viewed: 14,483

Other blogs you may like

Angularjs powerful paging on table and searching with delay and demo

Paging on table is the basic requirement and most of us look for some grid so it can provide the complete feature of paging and sorting but in Angularjs it is so easy that anyone can achieve it by writing some code. I checked and found most of the available code give the paging feature in for 1 to... By Ali Adravi   On 14 Aug 2015  Viewed: 5,565

Angularjs Cascading Dropdown/Select with demo

Cascading dropdown with angularjs is easier than MVC and ASP.Net. In Angularjs ng-change is the best event to hook the function to get the second dropdown list items. In this article, we will try to fill the state dropdown on selection change of country and then fill the city dropdown on change... By Ali Adravi   On 06 Aug 2015  Viewed: 25,243

Angularjs CRUD with Web API, Entity Framework & Bootstrap modal popup part 2

Add/Edid Customer in Modal Popup --- In previous article we discussed how to search, delete and show detail of customer and contact list. In this article we will try to open the modal popup to add new customer and edit an existing customer record. I divided article in two parts because of the... By Ali Adravi   On 29 Jul 2015  Viewed: 10,376

Custom Directives in AngularJS with example and demo

Angularjs custom directives are the common to avoid the duplicate code, it is easy powerful and really nice. There are already too many directive have been created by experts but as a developer we need to write our own to achieve our specific goal. ng-model, ng-if, ng-show, ng-repeat all these are... By Ali Adravi   On 29 Jul 2015  Viewed: 1,816

Angularjs CRUD with Web API, Entity Framework & Bootstrap modal popup part 1

Search sort Insert update and delete are the basic features we need to learn first to learn any language, In this article we will try to create these features with Web API, bootstrap modal popup and ui.router. We will use enetity framework code first to save and retrieve data from database. We... By Ali Adravi   On 28 Jul 2015  Viewed: 19,358