AngularJS datepicker directives

Requirements

• Angular v1.2+
• MomentJS
• Moment Timezone (If timezones are being used)

Installation

via bower

bower install  angular-datepicker --save

via npm

npm install  angular-datepicker --save

After the install add the js, css and the moment files to your page.

Add the following module to your page : datePicker

Usage Example

Live demo

New features

This fork of angular-datepicker contains several features.

Timezone Support

• The directive will work with or without a specified timezone.
• If the timezone is known, it can be assigned to the datepicker via the timezone attribute.
• If no timezone is provided, then the local time will be used.

No timezone information

<div date-picker></div>

Specific timezone (London, UK)

<div date-picker timezone="Europe/London"></div>

Specific timezone (Hong Kong, CN)

<div date-picker timezone="Asia/Hong_Kong"></div>

Maximum / minimum dates:

• These attributes restrict the dates that can be selected.
• These work differently from the original min-date and max-date attributes, which they replace.
• The original attributes allow selecting any dates and just mark the input as invalid.
• With these attributes, if a date in the picker is outside of the valid range, then it will not be selectable.

Minimum date:

<input date-time min-date="minDate">

Maximum date:

<input date-time max-date="maxDate">

Minimum and maximum date:

<input date-time min-date="minDate" max-date="maxDate">

Date format (for input fields):

• A custom format for a date can be assigned via the format atribute.
  • This format will be used to display the date on an input field.
  • If not provided, a default format will be used.
  • See: format options

<input date-time format="yyyy-MM-dd HH:mm">

Callback on date change

• Adding a date-change attribute containing a function name will cause this function to be called when the date changes in the picker.

<input date-time date-change="changeDate">

Update events

• An event can be broadcast from the parent scope which will update specific pickers with new settings. The settings which can be changed are:
  • minDate: Earliest selectable date for this picker. Disabled if this value is falsy.
  • maxDate: Latest selectable date for this picker. Disabled if this value is falsy.
  • minView: Minimum zoom level for date/time selection. Disabled if this value is falsy.
  • maxView: Maximum zoom level for date/time selection. Disabled if this value is falsy.
  • view: Default zoom level for date/time selection. Set to default value if this value is falsy.
  • format: Format string used to display dates on the input field. Set to default value if this value is falsy.
  • See: format options
  • This option cannot be used on the date-picker directive directly, it must be used on a date-time input field.
• The possible for the view, minView and maxView fields are:
  • year, month, date, hours, minutes.
• The event is targeted at specific pickers using their ID attributes.
  • If a picker exists with the same ID then the information in this picker will be updated.
  • A single ID can be used, or an array of IDs

Create picker with ID

<input date-time id="pickerToUpdate">

Update one picker.

$scope.$broadcast('pickerUpdate', 'pickerToUpdate', {
    format: 'D MMM YYYY HH:mm',
    maxDate: maxSelectableDate, //A moment object, date object, or date/time string parsable by momentjs
    minView: 'hours',
    view: false //Use default
});

Update multiple pickers.

$scope.$broadcast('pickerUpdate', ['pickerToUpdate', 'secondPickerToUpdate'], {
    format: 'lll'
});