layui时间日期控件【设置默认值,结束时间大于开始时间】--精确到秒(可自己设置)

layui时间日期控件【设置默认值,结束时间大于开始时间】–精确到秒(可自己设置)

1.页面代码

<div class="layui-inline">
<!-- <label class="layui-form-label">开始时间</label>-->
       <div class="layui-input-inline">
           <input type="text" id="s_startTime" name="s_startTime" placeholder="开始时间" lay-verify='datetime' class="layui-input"/>
       </div>
</div>
<div class="layui-inline">
<!-- <label class="layui-form-label">结束时间</label>-->
       <div class="layui-input-inline">
           <input type="text" id="s_endTime" name="s_endTime" placeholder="结束时间" lay-verify='datetime' class="layui-input"/>
       </div>
 </div>

2.js引入

layui.use(['layer','laydate'], function() {
    var layer = layui.layer,
        $ = layui.jquery,
        laydate = layui.laydate;
    // 时间选择器初始化 开始时间
    var start = laydate.render({
        elem: '#s_startTime',
        max:1,//最大值为当前日期
        trigger: 'click',
        type: 'datetime',//日期时间选择器
        value: getRecentDay(-3),//默认值30天前
        done:function(value,date){
            if(value && (value>$("#s_endTime").val())){
                /*开始时间大于结束时间时,清空结束时间*/
                $("#s_endTime").val("");
            }
            end.config.min ={
                year:date.year,
                month:date.month-1,
                date: date.date,
                hours:date.hours,//可注释
                minutes:date.minutes,//可注释
                seconds:date.seconds//可注释
            };
        }
    });
    //结束日期
    var end = laydate.render({
        elem: '#s_endTime',
        max : 1,//最大值为当前日期
        type: 'datetime',//日期时间选择器
        value: getRecentDay(-0),//默认值昨天
        done:function(value,date){
            start.config.max={
                year:date.year,
                month:date.month-1,
                date: date.date,
                hours:date.hours,//可注释
                minutes:date.minutes,//可注释
                seconds:date.seconds//可注释
            }
        }
    });
});

/**获取近N天*/
function getRecentDay(day){
    var today = new Date();
    var targetday_milliseconds=today.getTime() + 1000*60*60*24*day;
    today.setTime(targetday_milliseconds);
    var tYear = today.getFullYear();
    var tMonth = today.getMonth();
    var tDate = today.getDate();
    var tHours = today.getHours();//可注释
    var tMinutes = today.getMinutes();//可注释
    var tSeconds = today.getSeconds();//可注释
    tMonth = doHandleMonth(tMonth + 1);
    tDate = doHandleMonth(tDate);
    return tYear+"-"+tMonth+"-"+tDate+" "+tHours+":"+tMinutes+":"+tSeconds;
}
/**获取近N月*/
function doHandleMonth(month){
    var m = month;
    if(month.toString().length == 1){
        m = "0" + month;
    }
    return m;
}

3.页面效果图
在这里插入图片描述
4.type - 控件选择类型
在这里插入图片描述
5.format - 自定义格式
在这里插入图片描述

  • 4
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值