JarCastingAngularJS 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
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
timezoneattribute. - 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-dateandmax-dateattributes, 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
formatatribute.- 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-changeattribute 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-pickerdirective directly, it must be used on adate-timeinput field.
- The possible for the
view,minViewandmaxViewfields are:year,month,date,hours,minutes.
- The event is targeted at specific pickers using their
IDattributes.- If a picker exists with the same
IDthen the information in this picker will be updated. - A single
IDcan be used, or an array ofIDs
- If a picker exists with the same
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'
});