前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Layui 时间控件限制[通俗易懂]

Layui 时间控件限制[通俗易懂]

作者头像
全栈程序员站长
发布2022-08-31 19:07:52
1.8K0
发布2022-08-31 19:07:52
举报

大家好,又见面了,我是你们的朋友全栈君。

代码语言:javascript
复制
						<div class="layui-inline" style="">
                            <label class="layui-form-label">时间</label>
                            <div class="layui-input-inline" style="">
                                <input type="text"  name="openTime1" class="layui-input" id="test5" value=""  placeholder="yyyy-MM-dd HH:mm:ss">
                            </div>
                            <div class="layui-form-mid">-</div>
                            <div class="layui-input-inline" style="">
                                <input type="text"  name="openTime2" class="layui-input" id="test6" value=""  placeholder="yyyy-MM-dd HH:mm:ss">
                            </div>
                        </div>

//当前时间
  var nowTime = new Date();
  //console.log(nowTime);

  // 时间范围控制
  var test5 = laydate.render({
    elem: '#test5'
    ,calendar:true
    ,type:"datetime"
    ,value: new Date((new Date() - 5184000000)) // 2个月前
    //,range: true
    ,min: -1000 //60天前
    ,max: 'nowTime' //0天后
    //,max: 0 //0天后
    ,btn:['confirm']
    ,change: function(value, date, endDate){ //值改变回调
      console.log(value); //得到日期生成的值,如:2017-08-18
      console.log(date); //得到日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
      //console.log(endDate); //得结束的日期时间对象,开启范围选择(range: true)才会返回。对象成员同上。
    }
    ,done: function(value, date, endDate){//点击之后回调
      console.log(value); //得到日期生成的值,如:2017-08-18
      console.log(date); //得到日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
 //     console.log(endDate); //得结束的日期时间对象,开启范围选择(range: true)才会返回。对象成员同上。
      test6.config.min={
        year:date.year,
        month:date.month-1,//关键
        date:date.date,
        hours:date.hours,
        minutes:date.minutes,
        seconds:date.seconds
      };
    }
  });


  var test6 = laydate.render({
    elem: '#test6'
    ,calendar:true
    ,type:"datetime"
    ,value: new Date()
    //,theme: 'molv'
    ,min: -1000 //60天前
    ,max: 'nowTime' //0天后
    //,max: 0 //0天后
    ,change: function(value, date, endDate){
      console.log(value); //得到日期生成的值,如:2017-08-18
      console.log(date); //得到日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
      //console.log(endDate); //得结束的日期时间对象,开启范围选择(range: true)才会返回。对象成员同上。
    }
    ,done: function(value, date, endDate){
      console.log(value); //得到日期生成的值,如:2017-08-18
      console.log(date); //得到日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
      console.log(endDate); //得结束的日期时间对象,开启范围选择(range: true)才会返回。对象成员同上。
      test5.config.max= {
        year: date.year,
        month: date.month - 1,//关键
        date: date.date,
        hours: date.hours,
        minutes: date.minutes,
        seconds: date.seconds
      }
    }
  });

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/142445.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022年5月2,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档