Angular Datepicker 教程

🌙
手机阅读
本文目录结构
axihe

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

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

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

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

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

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

Bilibili(B站)

朱安邦

Anbang