laydate-v5.0.9自定义小时范围和分钟间隔(半小时)

话不多说，先上图，看效果，符合自己的需求再往下看。

源码以放，求个积分，自己的积分不够用了。拜谢下载的，没看懂的可以评论或私聊

点我下载源码

说说上图实现的内容：type为datetime类型，1、可选时间为系统当前时间以后(可取消限制)。2、选择日期后，点击选择时间，小时设置范围8:00-17:00(展示哪几个时段，或者不间隔的小时都可以自己定义)。3、分钟改为半小时间隔(10分钟、15分钟间隔等也可以自己定义)。 4、去掉秒数列，实际就做了隐藏，懒得删除，想做的可以自己改。

注：以下说的都是type为datetime类型的时候，因为要先选日期，再选时间，所以这么做。当然有更好的方法，强烈欢迎分享，拜谢。别的范围之类的官网文档看看就知道怎么做了，设置max和min基本都能搞定。

项目需求:选择日期后，选择时间；希望时间有时间段的，非工作时间不能选；对于具体分钟没有细化的每一分钟，半小时就可以。根据以上需求，看来官方文档，搜索了一圈，都能实现一点，没有全部实现功能的参考，所以自己改的源码。

1当前时间之前不可选：官方文档，min参数设置new Date()，注格式为yyyy-MM-dd HH:mm:ss

2去掉秒那列：代码如下，想去掉别的列，可以自己试试，就child 123几个

.laydate-time-list>li:nth-child(1) {width: 50%;
}
.laydate-time-list>li:nth-child(2) {width: 50%;
}
.laydate-time-list>li:nth-child(3) {display:none !important;
}
.laydate-time-list ol li {width: 100%;padding-left: 58.5px;
}

3改分钟为半小时等间隔：只想改分钟间隔的不需要改源码，代码如下：原理就是在初始化ready里实现自定义方法，在方法里找到想要的0和30分钟，删除其余元素

//自定义分钟
var showtime = $($(".laydate-time-list li ol")[1]).find("li");
for (var i = 0; i < showtime.length; i++) {var t00 = showtime[i].innerText;if (t00 != "00" && t00 != "30") {//如果不等于0 和 30 分钟删除其余元素showtime[i].remove();}
}
$($(".laydate-time-list li ol")[2]).find("li").remove();  //清空秒

4改小时的范围：不能按照上面改分钟去做，原因a.当天之前不可以选择功能失效 b.24小时变为10小时，点击的跳转动作出bug了，无视效果的可以忽略 c.如果不做删除，做不可点击设置。初次选择小时可用，再次选择小时不可点击被重置了，例如设置8-17点，重置之后的18点等又可以重新点击了。所以修改了源码，无bug，且点击动作修改为可用。

下为修改源码的代码：没有laydate的源码，所以只能做到格式化之后，在代码的基础上实现功能，仔细看还是可以找到代码位置的

//展示的读数
var hourDisplay = ["8","9","10","11","12","13","14","15","16","17"];
var secondDisplay = ["0","30"];
//此处重新设置小时和秒数
w.each([10, 2, 60],function(e, t) {var a = w.elem("li"),//头部显示的文字：时、分、秒 i = ["<p>" + r.time[e] + "</p><ol>"];w.each(new Array(t),function(t) {if(e == 0){i.push("<li" + (n[x][C[e]] === t ? ' class="' + o + '"': "") + ">" + w.digit(hourDisplay[t], 2) + "</li>")}else if(e == 1){i.push("<li" + (n[x][C[e]] === t ? ' class="' + o + '"': "") + ">" + w.digit(secondDisplay[t], 2) + "</li>")}else{i.push("<li" + (n[x][C[e]] === t ? ' class="' + o + '"': "") + ">" + w.digit(t, 2) + "</li>")}}),a.innerHTML = i.join("") + "</ol>",d.appendChild(a)}

k = function() {w(d).find("ol").each(function(e) {var t = this,a = w(t).find("li");if(C[e] == "hours"){//根据数组元素，获取数组下标var hourIndex =  n.contains(hourDisplay,""+n[x][C[e]]+"");//小时下标t.scrollTop = 30 * (hourIndex - 2);}else if(C[e] == "minutes"){//根据数组元素，获取数组下标var secondIndex =  n.contains(secondDisplay,""+n[x][C[e]]+"");//小时下标t.scrollTop = 30 * (secondIndex - 2);}else{t.scrollTop = 30 * (n[x][C[e]] - 2);}t.scrollTop <= 0 && a.each(function(e, n) {if (!w(this).hasClass(s)) return t.scrollTop = 30 * (e - 2),!0})})
}

昨天遗漏了初始化代码，补充上：

$(document).ready(function() {var dateType = "date";if('${pattern}' == 'yyyy-MM-dd'){dateType = "date";}else if('${pattern}' == 'yyyy-MM-dd HH:mm:ss'){dateType = "datetime";}laydateCustomize.newRender({elem : 'input#' + '${id}', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'type : dateType,min: formatDate(new Date(),'yyyy-MM-dd HH:mm:ss'), //设定最小日期为当前日期format : '${pattern}',position : 'fixed',theme : 'molv',/* 方案三去掉注释ready: function(value, date, endDate){var timeDom = $('#layui-laydate1').find("span[lay-type='datetime']")[0];$(timeDom).click(function(){formatminutes();//此方法里写方案三中的分钟转换成半小时});},*/});
});

记录自己的代码，顺便让有需要的人可以参考一下，代码还可以优化，懒得写了

laydate-v5.0.9自定义小时范围和分钟间隔(半小时)相关推荐

python3 获取整分钟数的时间，如间隔半小时
关于作用: 像实时数据文件,假如要每隔半小时导出副本,并传到其他服务器. 自动传输软件一般要格式化点的文件名,写实时时间不一定支持. 算法: 大体思路是,获取当前的整点时间和下一个整点时间,用时间间隔 ...
一年工作 3600 小时，被裁只要半小时
2021 开年,拼夕夕热搜不断. 我在想拼夕夕的公关们都要感叹:2021 有点艰难. 回顾一下拼夕夕的这几天的热点: 2020 年 12 月 29 日 23 岁拼夕夕员工凌晨回家路上猝死... 后来知 ...
mysql 分钟转小时_将分钟转化为**小时**分钟，，将秒转化为**天**小时**分钟**秒...
// 分钟转化成多少小时多少分钟 toHourMinute(minutes){ return (Math.floor(minutes/60) + "小时" + (minutes%6 ...
Oracle时间以半小时为单位取整
一.不足半小时不参与计算,抹去多余分钟数: SELECT CASE WHEN TO_NUMBER (TO_CHAR (SYSDATE, 'mi')) = 30 ...
mysql按半小时分组
mysql分组查询(按每小时) 这个很简单,只要字段是时间类型 select DATE_FORMAT( tf.curr_time ,'%H') as dataStartTime from t_fund ...
《半小时漫画中国哲学史》读书摘记
半小时漫画中国哲学史陈磊·半小时漫画团队 ◆ 一.中国哲学的起源哲学一词源于希腊语philosophia,它是由爱(philo)和智慧(sophia)组成的,意思是"爱智慧". ...
《半小时漫画预防常见病》读书摘记
半小时漫画预防常见病陈磊·半小时漫画团队 ◆ 一.流感肆虐,你中招了吗多锻炼.少熬夜,增强免疫力是关键! 流行性感冒,人们通常叫它流感,它的元凶叫作流感病毒. 流感属于急性呼吸道传染病. 神经系统 ...
几何画板自定义工具_几何画板sketchpad下载-几何画板sketchpad免费版下载v5.0.6.5
对于学生来说,抽象的几何和函数比较难以理解,几何画板sketchpad让老师可以用形象的方式讲述知识点,软件的功能强大,支持多种快捷键,用户可以根据需要改变相应的工具参数. 功能介绍 1．增强的表现力 ...
火绒安全v5.0.45 附单文件版
文章目录[隐藏] 软件介绍软件截图软件介绍火绒是一款轻巧.高效.超强防御的安全防护软件.功能强悍,体量轻巧,既干净又安静.它能全面防御病毒.木马.流氓软件.流氓网站等对电脑系统和用户信息的威胁行 ...

laydate-v5.0.9自定义小时范围和分钟间隔(半小时)

laydate-v5.0.9自定义小时范围和分钟间隔(半小时)相关推荐

最新文章

热门文章