博主信息
富贵人生
博文
87
粉丝
0
评论
0
访问量
3417
积分:0
P豆:174

TP5.1 + layui时间范围设置方法

2021年10月14日 15:31:16阅读数:29博客 / 富贵人生

最近在制作一个项目时遇到一个问题,就是开始时间和结束时间是相关联的,结束时间的选择范围是最小为开始时间,最大为开始时间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赋值

要获取max和min的值,首先要了解时间换算单位,大概思路为基本换算单位以小时为准,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>


版权申明:本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
  • 在css中,可以使用opacity属性图片的透明度,语“opacity:数值”,其中数值在“0.0-1.0”之;当数值为1表示完全不透明,当数值为0.5表示半透明,当数值为0表示完全透明
    在css中,可以使用opacity属性按钮透明,语“opacity:数值”,其中数值在“0.0-1.0”之;当数值为1表示完全不透明,当数值为0.5表示半透明,当数值为0表示完全透明。
    css鼠标手势的:可以利用cursor属性来进行,如【span.crosshair {cursor:crosshair}】,cursor属性定义了鼠标指针放在一个元素边界所用的光标形状
    premiere放大缩小轴轨道长度的:首先将线移到需要放大的位,按住箭头所指的滑块往左进行滑动;然后如果想要缩小视图,直接将滑块往右进行拖动,快捷键是减号。
    ae实现字幕逐字出现的是:1、打开ae,新建合成;2、打开文字属性栏,将透明度添加到文字属性中;3、透明度为0;4、打开【选择器】,在开始处激活关键帧;5、在线一秒处,将开始处的数值调成一百即可