Angular4比较好用的日期插件 --- laydate

此文章转载窗外雪儿飞大佬文章 在此之上补充一点点  附链接:https://www.jianshu.com/p/573c9b135505

第一步:上官网下载独立版本的日期与时间组件文件包:http://www.layui.com/laydate/  (本人现在用的是v5.0.9)

01

第二步:Angular2.x之后推荐将资源文件放到 src\assets 目录下,所以将下载好的文件 laydate文件夹下的 theme 文件夹和 laydate.js 一起复制(拷贝)一份到项目 src\assets 目录下,如图所示:

02

第三步:由于我是使用脚手架 angular-cli 生成的项目,所以在引入外部文件的时候需要在 .angular-cli.json 文件中配置,配置项信息如下:

03

第四步: 用过laydate的都知道在执行的时候需要一个laydate实例,然后由于是ts文件,直接使用 laydate.render() 方法实例化一个日期组件会报错,说laydate未定义该变量的声明而报错,所以需要在组件你的 xxx.component.ts 文件里边声明laydate变量,声明如下:

04

第五步:声明之后按理说就可以实例化一个日期时间控件了,但是仍然为报laydate找不到定义的错误,所以我们需要,原因就是我们程序没有访问到自己的路径,所以我们需要修改 laydate.js文件中theme源文件路径,用文本编辑器打开laydate.js 文件,全局搜索如下内容: modules/laydate/":"theme/

05-1

修改theme文件夹的路径为 assets/theme,并将返回的默认版本信息删除,修改之后文件如下:

05-2

05-03 此处补充一下 :本人按照步骤出现了问题(看提示css5.0.9) 在js中将版本删除以及上图中提到的laydate.css后面的n.v+r去掉重启就ok了~


第六步:做完以上步骤之后,接下来就是轻松愉快是使用啦,(*^__^*) 嘻嘻。

06-1

06-2

laydate的使用手册可以参考官网文档: http://www.layui.com/doc/modules/laydate.html

你可能感兴趣的:(Angular4比较好用的日期插件 --- laydate)