angular如何使用日历插件

大家好，我是IT修真院武汉分院第12期学员，一枚正直善良的web程序员。

今天给大家分享一下，修真院官网JS-8任务中angular如何使用日历插件？

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'
2.日期格式date-time format属性,格式可以自行设定，插件属性值有 "MMMM YYYY", "DD MMM YYYY", "ddd MMM DD YYYY", "D MMM YYYY HH:mm", "lll",
3.date-time min-date,max-date属性：用于表示最大日期和最小日期；

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.参考文献

 参考一：github g00fy- / angular- datepicker

 参考二：ui.bootstrap.datepickerPopup

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~

技能树-IT修真院

IT修真院是一个免费的线上IT技术学习平台 。

每个职业以15个左右的task为初学者提供更快速高效的学习方式 ；

所有task均是从真实项目中提炼出来的技能点，

强调实战演练+自学优先+师兄辅导的学习方式，

严格的日报体系，欢乐的交流讨论学习气氛，更有无数师兄师姐帮你解疑！

点击官网注册  官网 ，使用师兄邀请链接有优惠。