angular-date-picker

Live Demo

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

Demo Source

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

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

Overview

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+

Download

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

Via Bower

bower install angular-date-picker

Via NPM

npm install angular-date-picker

Usage

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">
</date-picker>

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">
</date-picker>
<input ng-model="date">

Toggle Example

Attributes

format-date: 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.
parse-date: 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.
on-date-selected: 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()"

Localization

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:

DATETIME_FORMATS.FIRSTDAYOFWEEK
DATETIME_FORMATS.MONTH
DATETIME_FORMATS.SHORTMONTH
DATETIME_FORMATS.DAY

Theming

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:

.angular-date-picker: 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.

License

MIT