界面中如何使用layDate日期与时间组件
in 前端 with 0 comment

界面中如何使用layDate日期与时间组件

in 前端 with 0 comment

在商业应用中经常会需要选择日期和时间,Layui提供了一个独立的日期与时间组件layDate,引入js文件,应用代码非常便能实现自己想到的效果。

layDate.jpg

关于layDate

layDate组件是Layui独立维护的三大组件之一。
layDate组件提供的日期与时间选择界面主题简约却又不失灵活多样。
layDate组件内部代码是零依赖的原生JavaScript编写的,可以作为独立组件使用。
layDate组件支持五种类型选择方式,年/年月/日期/时间/日期时间。
layDate组件内置自定义日期格式解析和合法校正机制,有中英两个版本。

引入layDate

获得layDate文件包后,解压laydate整个文件夹(不要拆分结构)。
存放到项目的任意目录,使用时,只需引入laydate.js文件即可,无需引入样式。

<!-- 配置你自己的路径 -->
<script src="/laydate/laydate.js"></script>

基础案例

<!-- 引入JS -->
<script src="/laydate/laydate.js"></script>
<!-- 需要添加时间组件的input框 -->
<input type="text" id="mebugs">
<script>
laydate.render({
    //指定元素
    elem: '#mebugs' 
});
</script>

常用属性

如果需要对layDate组件进行自定义,只需要再上放代码中添加自己想要的东西。
没有添加的会采用默认值。

<script>
laydate.render({
    //指定元素
    elem: '#mebugs',
    //控件选择器 默认date
    type: 'datetime',
    //范围选择器 默认false
    range: true,
    //日期格式自定义 默认yyyy-MM-dd
    format: 'yyyy年MM月dd日',
    //初始值 默认是当天
    value: '2018-10-12'
    //等等
});
</script>

回调函数

<script>
laydate.render({
    elem: '#mebugs',
    //不显示底部栏
    showBottom: false,
    //控件选择完毕后的回调
    done: function(value, date, endDate){
        //点击日期、清空、现在、确定均会触发
        //比如隐藏了底部栏,选择了日期后会触发去焦,控件将不再悬浮
        $("#mebugs").blur();
    },
    change: function(value, date, endDate){
        //年月日时间被切换时都会触发,通过控件上的左右<>箭头
    },
    ready: function(date){
        //控件在打开时触发,初始化的时候
    }
});
</script>

layDate下载

这是layDate独立组件包的下载地址。
提供了大量的类型案例,并且直接提供了调用代码示例。
https://www.Layui.com/laydate/
layDate组件的帮助文档,提供了Layui和layDate独立组件的完整调用教程。
https://www.Layui.com/doc/modules/laydate.html

Responses