文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

如何设置TP5.1+layui时间范围

2023-06-20 20:25

关注

小编给大家分享一下如何设置TP5.1+layui时间范围,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

在制作一个项目时遇到一个问题,就是开始时间和结束时间是相关联的,结束时间的选择范围是最小为开始时间,最大为开始时间90天后的时间,我这边用的是layui的插件获取的日期,里面有两个参数min和max分别可以设置日期范围;

其代码如下所示:

layui.use('laydate', function(){  var laydate = layui.laydate;  //限定可选日期  var ins22 = laydate.render({    elem: '#test-limit1'    ,min: '2016-10-14'    ,max: '2080-10-14'  });});

但是怎么获取max和min的值时,我遇到了难点,后面经过反复研究Layui官方文档和反复的尝试,终于解决了这一问题,分享给大家:

a.定义变量当前时间、最小时间、最大时间

var now = new Date();       var min = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + (now.getDate() + 1);       var max = now.getFullYear() + "-" + (now.getMonth() + 2) + "-" + (now.getDate() + 2);

b.根据当前选择的时间重新给max和min赋值

要获取maxmin的值,首先要了解时间换算单位,大概思路为基本换算单位以小时为准,1小时为3600秒,因为laui中的时间戳是以毫秒为计算单位,所以需要再3600的基础上再乘以1000,一天为24小时,总共90天所以是90*24*3600*1000.

在选择了开始时间后done: function (value, date) 中value的值为当前选择的时间,将该值转化为时间戳为:var date1 = new Date(value).getTime();

90天后的时间戳为:var date2 = date1 + 90 * 24 * 3600 * 1000;

再将获取的时间转化为年月日:

var date5 = {                   'date': date3.getDate(),                   'month': date3.getMonth() + 1,                   'year': date3.getFullYear()               };

将获取到的值赋值给结束时间的最小值和最大值:

end.config.max = date5;               end.config.max.month = date5.month - 1;               end.config.min = date;               end.config.min.month = date.month - 1;

所以完整的代码为:

var start = laydate.render({           elem: '#bx_start',           type: 'date',           max: max,           min: min,           showBottom: false,           btns: ['clear', 'confirm'],           done: function (value, date) {               var date1 = new Date(value).getTime();//将当前选择的时间转化为时间戳               var date2 = date1 + 90 * 24 * 3600 * 1000;//获取90天后的时间               var date3 = new Date(date2);               var date5 = {                   'date': date3.getDate(),                   'month': date3.getMonth() + 1,                   'year': date3.getFullYear()               };               end.config.max = date5;               end.config.max.month = date5.month - 1;               end.config.min = date;               end.config.min.month = date.month - 1;           }       });

c.将获取的min和max传给结束时间

var end = laydate.render({           elem: '#bx_end',           type: 'date',           max: max,           min: min,           showBottom: false,           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;           }       });

以下为完整代码

<script>   layui.use(['form','layedit', 'laydate','layer','element'], function() {       $ = layui.jquery;       layer = layui.layer;       var form = layui.form;       layedit = layui.layedit;       laydate = layui.laydate;//定义变量当前时间、最小时间、最大时间       var now = new Date();       var min = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + (now.getDate() + 1);       var max = now.getFullYear() + "-" + (now.getMonth() + 2) + "-" + (now.getDate() + 2);       var start = laydate.render({           elem: '#bx_start',           type: 'date',           max: max,           min: min,           showBottom: false,           btns: ['clear', 'confirm'],           done: function (value, date) {               var date1 = new Date(value).getTime();//将当前选择的时间转化为时间戳               var date2 = date1 + 90 * 24 * 3600 * 1000;//获取90天后的               var date3 = new Date(date2);               var date5 = {                   'date': date3.getDate(),                   'month': date3.getMonth() + 1,                   'year': date3.getFullYear()               };               end.config.max = date5;               end.config.max.month = date5.month - 1;               end.config.min = date;               end.config.min.month = date.month - 1;           }       });       var end = laydate.render({           elem: '#bx_end',           type: 'date',           max: max,           min: min,           showBottom: false,           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;           }       });   });</script>

以上是“如何设置TP5.1+layui时间范围”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网行业资讯频道!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯