版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/jqc874789596/article/details/84578903
layDate特点:
最近发现一款比较好用的日期插件:layDate,由layui开源,作为layui独立维护的三大组件之一,界面美观,性能强悍,易上手,且个性化度高,完美贴合各种业务环境对日期插件的要求。
官方文档地址:
https://www.layui.com/laydate/
官方文档上给出了大量的示例代码,各种使用场景,稍微阅读以下就能上手,本篇文章旨在记录下使用方法及常用的场景。
使用方法:
- 下载插件 点我下载
获得 layDate 文件包后,解压并将 laydate 整个文件夹(不要拆分结构) 存放到你项目的任意目录,使用时,只需引入 laydate.js 即可。
以上这句话是引用了官方文档的说明,其实具体使用方法也就是上面所述,这里做个演示。
2.放置插件
首先把下载好的文件整个拖放到目录中,不要拆分结构。
3.引用插件
在需要用到该插件的页面引用laydate.js
<script type="text/javascript" src="/js/plugins/layDate-v5.0.9/laydate/laydate.js"></script>
4.个性化插件(也可以说是初始化插件,在js文件执行时调用这个函数)
function initLayDate(){
laydate.render({
elem : '#beginTime', //指定元素
type : 'datetime', // 年月日时分秒-格式
theme: '#393D49', //自定义主体颜色
calendar: true //节日显示
});
laydate.render({
elem : '#endTime', //指定元素
type : 'datetime', // 年月日时分秒-格式
theme: '#393D49', //自定义主体颜色
calendar: true //节日显示
});
}
laydate封装了轻量级的选择器,所以在使用的时候需要绑定对应标签的id。
因为上面的js代码对两个不同的标签进行了绑定(开始时间、结束时间),为了更简单明白,我把html代码也放一下(部分)
<div class="form-group">
<label class="col-sm-3 control-label">起始时间:</label>
<div class="col-sm-8">
<input type="text" name="beginTime" id="beginTime" class="form-control" tabindex="2" style="width: 180px;" readOnly="true"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">结束时间:</label>
<div class="col-sm-8">
<input type="text" name="endTime" id="endTime" class="form-control" tabindex="2" style="width: 180px;" readOnly="true"/>
</div>
</div>
最终效果图: