- Angular v1.2+
- MomentJS
- Moment Timezone (If timezones are being used)
bower install angular-datepicker --save
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
This fork of angular-datepicker contains several features.
- 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.
<div date-picker></div><div date-picker timezone="Europe/London"></div><div date-picker timezone="Asia/Hong_Kong"></div>- 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.
<input date-time min-date="minDate"><input date-time max-date="maxDate"><input date-time min-date="minDate" max-date="maxDate">- 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">- 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">- 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
<input date-time id="pickerToUpdate">$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
});$scope.$broadcast('pickerUpdate', ['pickerToUpdate', 'secondPickerToUpdate'], {
format: 'lll'
});
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent