Lightweight calendar for Angular

Live Demo

Click to pick dates or enter date values into the input element.

Demo Source

<date-picker ng-model="date">

<input type="text" ng-model="date">


angular-date-picker is a lightweight calendar that acts like a custom input element through regular ngModel bindings. It is:

  • Localizable
  • Pure CSS – does not use any images
  • Pure Angular – does not rely on any other libraries
  • Compatible with IE8+


Grab the latest from GitHub or use your favorite package manager:

Via Bower

bower install angular-date-picker


npm install angular-date-picker


Include angular-date-picker.js in your application, after Angular is included. Also include angular-date-picker.css to get the bare minimum styling.

<link rel="stylesheet" href="path/to/angular-date-picker.css">
<script src="path/to/angular.js"></script>
<script src="path/to/angular-date-picker.js"></script>

You may use an AMD or CommonJS loader as well.

Initialize your Angular application with the mp.datePicker module as a dependency:

angular.module('app', [ 'mp.datePicker' ]);

Then use the <date-picker> element along with an ng-model directive for two-way binding with a scope variable:

<date-picker ng-model="date">

The date format is set to the active locale by default. To use a custom format, first set up a formatter and a parser in your scope:

$scope.formatDate = function (date) {
    function pad(n) {
        return n < 10 ? '0' + n : n;

    return date && date.getFullYear()
        + '-' + pad(date.getMonth() + 1)
        + '-' + pad(date.getDate());

$scope.parseDate = function (s) {
    var tokens = /^(\d{4})-(\d{2})-(\d{2})$/.exec(s);

    return tokens && new Date(tokens[1], tokens[2] - 1, tokens[3]);

Then pass these functions to the format-date and parse-date attributes:

<date-picker ng-model="date" format-date="formatDate" parse-date="parseDate">
<input ng-model="date">

Toggle Example


Optional. Allows for custom formatting of date values selected by the date picker, before they are fed back to the model. This must be a function that takes a Date object and returns a string. By default, Date.prototype.toLocaleDateString() is used.
Optional. Allows for custom parsing of date values coming from the model. This must be a function that takes a string and returns a Date object. By default, the Date constructor is used.
Optional. Expression to evaluate when a date is picked. This is a convenience feature to do things like close a calendar dropdown when a date is picked, especially for cases where watching the model for changes may not be enough. Example: on-date-selected="closeDropdown()"


The following properties of the $locale service are being used for rendering localized month names, days of the week, and also for determining the first day of the week:



You can override the styles defined in angular-date-picker.css to match the style of your application. The classes and specifiers that are used are:

The top-level container for the entire component.
.angular-date-picker > ._month
The header containing the month and year.
.angular-date-picker > ._month > button
The previous month and next month buttons.
.angular-date-picker > ._month > button._previous
The previous month button.
.angular-date-picker > ._month > button._next
The next month button.
.angular-date-picker > ._days
The container that holds day of week headers and days of the month.
.angular-date-picker > ._days > ._day-of-week
A day of week header.
.angular-date-picker > ._days > ._day
Any day.
.angular-date-picker > ._days > ._day.-padding
A day from an adjacent month.
.angular-date-picker > ._days > ._day.-selected
The selected day.
.angular-date-picker > ._days > ._day.-today
If the current month is being shown, this marks today.