angular中如何使用时间插件?

大家好,我是IT修真院郑州分院第七期的学员,一枚正直纯洁善良的WEB程序员 今天给大家分享一下,题目angular中如何使用时间插件?


一、背景介绍

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


二、知识剖析

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

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


三、常见问题

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


四、解决方案

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


五、编码实战

实战视频


六、拓展思考

如何修改日历的样式,比如说把英文(默认)修改为中文日历?

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


七、参考文献

http://www.cnblogs.com/pilixiami/p/5611346.html


八、更多讨论





PPT

感谢大家观看!

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

获得更多IT技能,请移步官网 点击链接直达:http://www.jnshu.com/login/1/17884272



PS: 以上内容,大部分为摘抄别人的,原文在参考文献处.

猜你喜欢

转载自blog.csdn.net/f056917/article/details/80371773