layui日期范围初始化各种限制

最新推荐文章于 2023-12-06 15:28:05 发布

往事不堪回首..

最新推荐文章于 2023-12-06 15:28:05 发布

阅读量1.6k

点赞数

文章标签： layui 前端 html

本文链接：https://blog.csdn.net/qq3892997/article/details/126052319

版权

可在在线示例 - Layui (layuion.com) 中在线测试（左边导航栏第一个就是在线测试，把测试代码替换成以下代码进行测试）

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>在线测试</title>
  <link href="https://cdn.staticfile.org/layui/2.7.5/css/layui.css" rel="stylesheet">
  <style>
    body{padding: 6px 16px;}
    .demo-carousel{height: 200px; line-height: 200px; text-align: center;}
  </style>
</head>
<body>

<div class="layui-form-item">
<div class="layui-inline" id="test6" lay-key="1">
  <div class="layui-input-inline">
    <input type="text" autocomplete="off" name="stDate" id="stDate" class="layui-input" placeholder="开始日期">
 </div>
 <div class="layui-form-mid">-</div>
 <div class="layui-input-inline">
   <input type="text" autocomplete="off" name="endDate" id="endDate" class="layui-input" placeholder="结束日期">
 </div>
</div>

<div class="layui-inline" >
<input type="text" autocomplete="off" name="aa" id="test1" class="layui-input" placeholder="日期范围">

</div>



  
<script src="https://cdn.staticfile.org/layui/2.7.5/layui.js"></script>
<script>
layui.use(function(){
  // 得到需要的内置组件
  var layer = layui.layer; //弹层
  var laypage = layui.laypage; //分页
  var laydate = layui.laydate; //日期
  var table = layui.table; //表格
  var carousel = layui.carousel; //轮播
  var upload = layui.upload; //上传
  var element = layui.element; //元素操作
  var slider = layui.slider; //滑块
  var dropdown = layui.dropdown; //下拉菜单
  
  //日期范围
			//日期范围
laydate.render({
	elem: '#test6'
	//设置开始日期、日期日期的 input 选择器
	//数组格式为 2.6.6 开始新增，之前版本直接配置 true 或任意分割字符即可
	,range: ['#stDate', '#endDate']
       ,value: [getRecentDay(-30), getRecentDay(-0)] //默认值上月当天到当天
      ,max:0 //最大日期只能选择当天
});

laydate.render({ 
  elem: '#test1'
  ,range: true //或 range: '~' 来自定义分割字符
 ,value: [getRecentDay(-30) +' - '+ getRecentDay(-0)]//默认值上月当天到当天 ，当前格式不能改，否则点击时间插件时会被插件认为格式不正常初始化一个时间
,max:0 //最大日期只能选择当天
});



/**获取近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;
}

				  
  
 
});
</script>
</body>
</html>

以下是两个日期范围的实例：

参考：(240条消息) layui时间日期控件【设置默认值，结束时间大于开始时间】--精确到秒(可自己设置)_WHY-YYDS的博客-CSDN博客_layui时间控件