在Angular7中使用laydate日期插件

一、下载laydate插件,下载地址戳这里

二、下载完之后解压,解压完之后将laydate文件夹(包括theme主题和一个laydate.js文件)拷贝到angular项目中的assert(放置静态资源的)目录下,如下图:

在Angular7中使用laydate日期插件

在Angular7中使用laydate日期插件

三、拷贝完之后接下来就是使用了

首先,在需要使用到的组件的ts文件中声明一个laydate变量,如果不生命在ts中是不能直接认识laydate变量的,使用的时候会报错(注:这个声明的变量名字只能是laydate,其实如果不是ts代码中,是可以直接使用laydate的,这里是因为ts才需要去声明)

在Angular7中使用laydate日期插件

声明完之后,就可以使用了:

在Angular7中使用laydate日期插件

在Angular7中使用laydate日期插件

调用方式,laydate.render({....})

——第一个参数elem:选择器指定绑定的html元素,即点击哪个元素时触发

——第二个参数type:指定日期控件的选择类型,date表示日期(也就是年月日),datetime是年月日时分秒

——第三个参数done:是一个回调函数(value,date,endDate),我打印出来的值如下图:value,date,endDate

在Angular7中使用laydate日期插件

操作这些得到的值就完事了。最后效果如下图:

在Angular7中使用laydate日期插件