大家好,我是IT修真院武汉分院第12期学员,一枚正直善良的web程序员。
今天给大家分享一下,修真院官网JS-8任务中angular如何使用日历插件?
1.背景介绍
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均是从真实项目中提炼出来的技能点,
强调实战演练+自学优先+师兄辅导的学习方式,
严格的日报体系,欢乐的交流讨论学习气氛,更有无数师兄师姐帮你解疑!
点击官网注册 官网 ,使用师兄邀请链接有优惠。