Angular Datepicker 教程


AngularJS datepicker directives


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


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'

AXIHE / 精选资源







我叫 朱安邦,阿西河的站长,在杭州。


业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎