阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Angular Datepicker 教程

      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'
      });
      
      卖前端学习教程

      只需几十元,就能买到培训班的内部教程!开启高薪之路!

      零基础小白阿里P7的教程都有!

      同时长期收购所有培训班的前端教程

      目录
      目录