基于layDate的时间范围选择器

最新推荐文章于 2024-08-16 08:20:25 发布

F小滚石R

最新推荐文章于 2024-08-16 08:20:25 发布

阅读量2.3k

点赞数

分类专栏： js layDate 文章标签： layDate js 时间范围选择框

本文链接：https://blog.csdn.net/qq_39840470/article/details/90236127

版权

js 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

layDate

1 篇文章 0 订阅

订阅专栏

基于layDate的时间范围选择器

基于layDate的时间范围选择器

基于layDate的时间范围选择器

实现效果
在这里插入图片描述

使用layDate

获得 layDate 文件包后，解压并将 laydate 整个文件夹（不要拆分结构）存放到你项目的任意目录，使用时，只需引入 laydate.js 即可。具体参数配置可看文档介绍。

HTML

// 
<body>
    
    <td width="120" class="text_r"><label>创建时间：</label></td>

    <td>
        <input type="text" readonly="readonly" placeholder="开始时间" class="kxht_input cxtj" name="startTime" id="startTime" 
       
        />至
        <input type="text" readonly="readonly" placeholder="结束时间" class="kxht_input cxtj" name="endTime" id="endTime"  />
    </td>



</body>

js

// 
<script src="laydate/laydate.js"></script>
<script type="text/javascript">
    
// 设置最大时间为当前时间
function getNowFormatDate() {
          var date = new Date();
          var seperator1 = "-";
          var seperator2 = ":";
          var month = date.getMonth() + 1;
          var strDate = date.getDate();
          if (month >= 1 && month <= 9) {
              month = "0" + month;
          }
          if (strDate >= 0 && strDate <= 9) {
              strDate = "0" + strDate;
          }
          var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
              + " " + date.getHours() + seperator2 + date.getMinutes()
              + seperator2 + date.getSeconds();
          return currentdate;
      }
//开始时间时间
var start = laydate.render({
        elem: '#startTime',
        min: '1900-1-1 00:00:00',
        max: getNowFormatDate(),
        trigger: 'click', //采用click弹出
        done: function (value, date, endDate) {
            end.config.min = {
                year: date.year,
                month: date.month - 1,
                date: date.date,
                hours: date.hours,
                minutes: date.minutes,
                seconds: date.seconds
            }; //开始日选好后，重置结束日的最小日期
            end.config.value = {
                year: date.year,
                month: date.month - 1,
                date: date.date,
                hours: date.hours,
                minutes: date.minutes,
                seconds: date.seconds
            }; //将结束日的初始值设定为开始日
        }
    });


    //结束时间
    var end = laydate.render({
        elem: '#endTime',
        min: '1900-1-1 00:00:00',
        max: getNowFormatDate(),
        trigger: 'click', //采用click弹出
        done: function (value, date, endDate) {
            console.log(start.config)
            console.log(value)
            console.log(date)
            start.config.max = {
                year: date.year,
                month: date.month - 1,
                date: date.date,
                hours: date.hours,
                minutes: date.minutes,
                seconds: date.seconds
            }; //结束日选好后，重置开始日的最大日期
        }
    });

</script>

F小滚石R

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基于layDate的时间范围选择器

基于layDate的时间范围选择器基于layDate的时间范围选择器使用layDateHTMLjs基于layDate的时间范围选择器实现效果使用layDate获得 layDate 文件包后，解压并将 laydate 整个文件夹（不要拆分结构）存放到你项目的任意目录，使用时，只需引入 laydate.js 即可。具体参数配置可看文档介绍。HTML// <body> ...
复制链接

扫一扫

专栏目录