【JS-task11】angular如何使用日历插件？

小课堂【武汉第172期】

分享人：王峰

1.背景介绍

       日历在网页中的应用有很多，比如说后台的搜索功能，备忘录功能等等。要实现日历功能，有很多插件可以实现，利用angular实现相关的日历功能的插件也就只有几个，比如说ui-jquery,angular-datepicker,ui-bootstrap等等，这些都可以实现部分功能的日历插件；但是说到好用的话，我个人觉得还是angular-datepicker要好用一些，因为这个插件的demo简单易懂，很多种情况都考虑到了，比如说时区、设定日历的最大最小值，日期格式，起始时间和终止时间，都有相对应的demo，这样就更加直观，清晰易懂。

2.知识剖析

在这个日历插件中，有以下相关属性:

1.时区：一般都是用date-picker timezone属性来表示；timezone有以下值'Europe/London'， 'Asia/Hong_Kong'  'America/Vancouver'

<div date-picker="dates.today" timezone="Europe/London" view="hours" min-view="hours" watch-direct-changes="true"></div>


<div date-picker="dates.today" timezone="Asia/Hong_Kong" view="hours" min-view="hours" watch-direct-changes="true"></div>


<h4>No timezone (Uses local)</h4>

<div date-picker="dates.today" view="hours" min-view="hours" watch-direct-changes="true"></div>

2.日期格式date-time format属性,格式可以自行设定，插件属性值有

"MMMM YYYY","DD MMM YYYY", "ddd MMM DD YYYY", "D MMM YYYY HH:mm","lll",

<div ng-repeat="format in formats">
<h5>{{format}}</h5>
<input type="text" date-time ng-model="dates.today" view="hours" format="YY-MM-DD">
</div>

3.date-time min-date,max-date属性：用于表示最大日期和最小日期；

</div>
<div class="span4">
  <h2>Update events</h2>
  <div>
    <h4>Minimum date</h4>
    <input date-time ng-model="dates.minDate" id="pickerMinSelector" date-change="changeMinMax" max-date="maxDate" view="date" timezone="UTC" format="lll"  >
  </div>
  <div>
    <h4>Maximum date</h4>
    <input date-time ng-model="dates.maxDate" id="pickerMaxSelector" date-change="changeMinMax" min-date="minDate" view="date" timezone="UTC" format="lll" readonly>
  </div>
  </div>

4.view:日期/时间的默认选择级别；属性值有year、month、date、hours、minutes

3.常见问题

如何实现设置开始日期和结束日期

4.解决方案

首先新建2个div标签，然后分别在两个标签内的ng-model绑定dates.minDate和dates.maxDate、分别在max-date和min-date属性设置maxDate和minDate(目的是为了保证日历在开始日期在结束日期前面),对两个标签都添加date-change属性，然后在通过date-change属性中的方法来对ng-model为dates.minDate和dates.maxDate进行更新

5.编码实战

6.扩展思考

如何修改日历的样式，比如说把英文（默认）修改为中文日历？

这时候就需要使用webstorm的全局查找功能了（不要使用cdn加载js文件，否则会出现找不到的情况，也就无法修改样式），通过全局查找找到相关单词之后，然后修改成中文就行了。

7.参考文献

来源：https://github.com/g00fy-/angular-datepicker     github g00fy- / angular- datepicker

8.更多讨论

1.小宇同学问：日历插件怎么实现禁止点击效果，点击不会出现日历；

自答曰：通过对日历所在的input标签中设置disabled属性，则点击之后不会出现日历；

2.官网后台日历插件使用的是angular-strap插件，与这个插件相比有什么特殊的地方；

答曰：angular-datepicker插件有很多相关属性，可以自行定义一组想要的日历。不过官网的日历插件更易上手，因为需要配置的属性很少。

3.如何实现不能在日历中输入内容的效果，但是又可以实现日历功能？

答曰：这个就在angular-datepicker插件的input标签中输入readly只读属性，就能够完成只读功能啦