hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 文章 - 后端开发 - 正文 看Cosplay古风插画小姐姐,合集图集打包下载:炫龙网 · 炫龙图库

layui时候控件清空以后没法一般运用的问题_WEB前端开发

2019-12-18后端开发ki4网26°c
A+ A-

处理layui时候控件清空以后没法一般运用的问题,以及时候局限的挑选。

共有两种处理体式格局:

体式格局一(layui 1.x):

html代码:

<div class="layui-inline">
<div class="layui-input-inline">
<input type="text" name="start_time" class="layui-input" id="start_time"
placeholder="入手下手时候(修正时候)">
</div>
</div>
<div class="layui-inline">
<div class="layui-input-inline">
<input type="text" name="end_time" class="layui-input" id="end_time"
placeholder="完毕时候(修正时候)">
</div>
</div>

js代码:

var start = {
istime: true,
format: 'YYYY-MM-DD hh:mm:ss',
max: '2099-06-16 23:59:59',
istoday: true,
choose: function (datas) {
end.min = datas; //入手下手日选好后,重置完毕日的最小日期
}
};
var end = {
istime: true,
format: 'YYYY-MM-DD hh:mm:ss',
max: '2099-06-16 23:59:59',
istoday: true,
choose: function (datas) {
start.max = datas; //完毕日选好后,重置入手下手日的最大日期
}
};
document.getElementById('start_time').onclick = function () {
start.elem = this;
laydate(start);
};
document.getElementById('end_time').onclick = function () {
end.elem = this;
laydate(end);
};

体式格局二(layui 2.x):

html代码

<div class="layui-inline">
<div class="layui-input-inline">
<input type="text" name="start_time" class="layui-input" id="start_time"
placeholder="入手下手时候(修正时候)">
</div>
</div>
<div class="layui-inline">
<div class="layui-input-inline">
<input type="text" name="end_time" class="layui-input" id="end_time"
placeholder="完毕时候(修正时候)">
</div>
</div>

js代码

layui.use([ 'laydate'], function(){
var $ = layui.$;
var laydate = layui.laydate;
var nowTime = new Date().valueOf();
var max = null;
var start = laydate.render({
elem: '#start_time',
type: 'datetime',
max: nowTime,
btns: ['clear', 'confirm'],
done: function(value, date){
endMax = end.config.max;
end.config.min = date;
end.config.min.month = date.month -1;
}
});
var end = laydate.render({
elem: '#end_time',
type: 'datetime',
max: nowTime,
done: function(value, date){
if($.trim(value) == ''){
var curDate = new Date();
date = {'date': curDate.getDate(), 'month': curDate.getMonth()+1, 'year': curDate.getFullYear()};
}
start.config.max = date;
start.config.max.month = date.month -1;
}
});

依据入手下手时候 动态限定完毕时候 学问点

type: 'datetime', 是带时分秒的 date 是不带时分秒的

layui.use('laydate', function(){
   /* lay('.layui-input').each(function(){
  laydate.render({
    elem: this
    ,trigger: 'click'
    ,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)才会返回。对象成员同上。
    }
  });
});  */
var $ = layui.$;
    var laydate = layui.laydate;
   var nowTime = new Date().valueOf();
    var max = null;
       var start = laydate.render({
        elem: '#start_time',
        type: 'datetime',
        btns: ['clear', 'confirm'],
        done: function(value, date){
            endMax = end.config.max;
            end.config.min = date;
            end.config.min.month = date.month -1;
        },
        change: function(value, date, endDate){
        var timestamp2 = Date.parse(new Date(value));
timestamp2 = timestamp2 / 1000;
            end.config.min = timestamp2;
            end.config.min.month = date.month -1;
    }
    });
    var end = laydate.render({
        elem: '#end_time',
        type: 'date',
        done: function(value, date){
        console.log(" ======  "+date);
            if($.trim(value) == ''){
                var curDate = new Date();
                date = {'date': curDate.getDate(), 'month': curDate.getMonth()+1, 'year': curDate.getFullYear()};
            }
            start.config.max = date;
            start.config.max.month = date.month -1;
        }
    });
});

经由过程以上代码,就已能够完成动态转变入手下手时候最大值与完毕时候最小值的转变了。下面来讲一下轻易碰到的坑:

坑一 :laydate.render没法反复衬着,当laydate.render对应一个elem已衬着过一次以后,我们是没法经由过程再次衬着来修正个中的max值与min值的。

坑二 :startDate.config.max与endDate.config.min是一个对象,不是一个字符串,在网上看到一个人不负责任的给了这么一句话,endDate.config.min="2017-01-01";说能够设置,我竟然信了他的邪掉进坑里半天。现实这里获得的是一个对象,不同于在我们衬着时的min与max了,直接将字符串赋值必定没有效果。

坑三:dates的花样虽然与endDate.config.min花样雷同然则直接让endDate.config.min=dates你会发明并非你想要的效果,是因为虽然dates中的数据是你挑选的日期,但是endDate.config.min中设置的month的值却比你输入的month的值大了一个月,因而如果你选的入手下手日期是11月13日,直接赋值给了endDate.config.min以后你会发明完毕日期的最小日期变成了12月13日,因而我们需要将dates中的月份值减一后再赋值给endDate.config.min。

更多layui学问请关注layui运用教程栏目。

以上就是layui时候控件清空以后没法一般运用的问题的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
layui时候控件清空以后没法一般运用的问题_WEB前端开发

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签:

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>