使用Layui时间组件(laydate)

在一般的程序或者软件业务的操作上,通常涉及时间的记录,需要记录业务时间,或者根据时间来筛 选业务。
选择时间,可以直接输入,也可以弹出日期进行选择。
在layui中提供了,layDate日期时间模块,
主要提供了五种选择器:年选择器,年月选择器,日期选择器,时间选择器,日期时间选择器。

   <div class="layui-inline">
        <label class="layui-form-label">中文版:</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="Chinese" placeholder="yyyy-MM-dd">
            <i class="layui-icon Date_icon">&#xe637;</i>
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">国际版:</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="English" placeholder="yyyy-MM-dd">
            <i class="layui-icon Date_icon">&#xe637;</i>
        </div>
    </div>
    <div class="layui-inline mt-3">
        <label class="layui-form-label" style="width:120px;">日期时间选择器:</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="shijianriqi" placeholder="yyyy-MM-dd HH:mm:ss">
            <i class="layui-icon Date_icon">&#xe637;</i>
        </div>
    </div>
    <h6 class="mb-3 mt-3">嵌套显示</h6>
    <div class="site-demo-laydate">
        <div class="layui-inline mr-3" id="nestnne"></div>
        <div class="layui-inline ml-3" id="nestwo"></div>            
    </div>

  <script>
    //声明变量
    var layer, layDate;
    $(function () {
        //预加载模块
        layui.use(['layer', 'laydate'], function () {
            //加载模块
            layer = layui.layer;
            layDate = layui.laydate;
            //中文
            layDate.render({
                elem: '#Chinese',//绑定元素
                theme:'#393D49'//主题
            });
            //英文
            layDate.render({
                elem: '#English',
                lang: 'en',
                theme: '#ff0000'
            });
            //日期时间选择器
            layDate.render({
                elem: '#shijianriqi',
                type:'datetime',
                theme: '#000000'
            });
            //嵌套显示
            layDate.render({
                elem: '#nestnne',
                theme: '#ff0000',
                position: 'static'
            });
            layDate.render({
                elem: '#nestwo',
                lang: 'en',
                theme: '#ea7c12',
                position: 'static'//页面嵌套显示
            });
        });
    });
</script>

layui的laydate模块提供多属性支持,可嵌套在页面上,可设置主题的颜色等等。
layui的laydate模块,提供了type–控件选择类型:

type可选值名称用途
year年选择器只提供年列表选择
date年月选择器只提供年、月选择
year日期选择器可选择:年、月、日。type默认值,一般可不填
time时间选择器只提供时、分、秒选择
datetime日期时间选择器可选择:年、月、日、时、分、秒

laydate提供format属性–自定义时间格式 默认格式:yyyy-MM-dd
在这里插入图片描述
Layui的laydate时间日期控件中的中文版和英文版,其实区别不是很大,区别是弹出或嵌套显示的
时间日期选择页面中的中文全部英文形式代替,如果格式一样,那么进行选择后显示的是一样的。
主要以阿拉伯数字显示。

laydate详情请查看Layui官网:https://www.layui.com/

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值