front-angular-datepicker

AngularJS datepicker directives

WIP

Requirements

• Angular v1.2+

Development version

Checkout, run npm install and bower install. To build run grunt build

Examples

Live demo

Installation

Install with bower bower install --save angular-datepicker Inject the dependency angular.module('testApp', ['datePicker'])

defaults

<div date-picker="start"></div>

views:

(initial) view

<div date-picker="start" view="year"></div>

(max) view

<div date-picker="start" max-view="month"></div>

(min) view

only date view

<div date-picker="start" min-view="date"></div>

Close the picker when min-view is reached

<div date-picker="start" auto-close="true"></div>

Min and Max Date

Only add's validation to ngModel, must be provided a valid date object or valid date string.

<div date-picker="start" min-date="Date string | Expression" max-date="Date string | Expression"></div>

Watch direct date changes within the parent scope and update the view accordingly

Without this attribute the date picker stays on the same view page when you update the date within the parent scope manually even if the picked date happens to be on another one. For example, you pick September 18 2015, then you manually change it to October 25 2014, nonetheless the picked date updates accordingly, the date picker still displays the pick screen for September 2015 and you have to swipe pages manually.

<div date-picker="start" watch-direct-changes></div>

Execute callback upon date set

Execute callback when a new date set in a highest resolution available, e.g. if you specify min-view="hour" the callback will be executed only when the user picks an hour, not just date, month or year. Alternatively, you can bind to a new event 'setMaxDate'.

Within your controller

```js function callback() { doStuff(); } ```

In your html

```html

```

input as datepicker

<input type="datetime" date-time ng-model="start">

input with formatted value

<input type="datetime" date-time ng-model="end" format="short">

date-range picker

<div date-range start="start" end="end"></div>

How to release

After a new distribution package has been pushed, a new release can be triggered with grunt-bump :

grunt bump

You can see what the release process will do by doing a dry run :

grunt bump --dry-run