Skip to content

g00fy-/angular-datepicker

Folders and files

NameName
Last commit message
Last commit date

Latest commit

28c312d · Jun 15, 2016
Jun 15, 2016
Jun 15, 2016
Mar 9, 2016
Oct 3, 2013
Oct 3, 2013
Oct 3, 2013
Oct 5, 2015
Feb 12, 2016
Jun 7, 2015
Feb 12, 2016
Mar 12, 2014
Jun 15, 2016
Apr 4, 2016
Jun 7, 2015
May 15, 2015
Oct 3, 2013
Mar 9, 2016
Apr 8, 2016

Repository files navigation

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'
});