### 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