Javascript:日期排班功能实现
背景:
近期,公司的产品经常会遇到日期排班类似的功能;
需求的排班日期长短不一:有些是两周,有些是四周;要求选中的时候有一个active的状态区分,另外要提供钩子获取选中日期的形如:【2018-04-11】这种格式的数据。
实现:
/*
* 获取当天及之后的排班时间
* @param dayCount:相对于今天的天数,形如:0,1,2.......
*/
function getDateData(dayCount) {
var d = new Date();
d.setDate(d.getDate() + dayCount);
var y = d.getFullYear();
var m = (d.getMonth() + 1) > 9 ? d.getMonth() + 1 : '0' + (d.getMonth() + 1);
var d = d.getDate() > 9 ? d.getDate() : '0' + d.getDate();
return y + "-" + m + "-" + d;
}
/*
* 获取日期对应的星期名称
* @param date:待转换日期,形如:'2018-04-11' 或 '2018-4-11'
*/
function dateToDay(date) {
var dayNo = new Date(date).getDay();
switch (dayNo) {
case 0:
return '星期日';
break;
case 1:
return '星期一';
break;
case 2:
return '星期二';
break;
case 3:
return '星期三';
break;
case 4:
return '星期四';
break;
case 5:
return '星期五';
break;
case 6:
return '星期六';
break;
default:
break;
}
}
/*
* 通过参数动态获取排班日期
* @param weekCount:排班周数,int型
* @param domId: 输出DomId
*/
function initWeekData(weekCount, domId) {
var weekDateTempl = '',
tableTempl = '',
tableTh = '',
tableTd = '',
tableTdArr = [],
weekData = [],
weekDataFinal = [],
weekDateEle;
for (var i = 0; i < weekCount * 7; i++) {
weekData[i] = getDateData(i);
}
for (var i = 0; i < weekData.length; i = i + 7) {
weekDataFinal.push(weekData.slice(i, i + 7));
}
weekDataFinal.forEach(function(item, index) {
if (index === 0) {
for (var i = 0; i < item.length; i++) {
tableTh += '<th>' + dateToDay(item[i]) + '</th>'
}
tableTh = '<tr>' + tableTh + '</tr>';
//firstWeek
for (var j = 0; j < item.length; j++) {
if (j === 0) {
tableTd += '<td attr-date=' + item[j] + ' class="active">今天</td>';
} else {
tableTd += '<td attr-date=' + item[j] + '>' + new Date(item[j]).getDate() + '</td>';
}
}
tableTd = '<tr>' + tableTd + '</tr>';
tableTdArr[index] = tableTd;
tableTd = '';
} else {
for (var k = 0; k < item.length; k++) {
tableTd += '<td attr-date=' + item[k] + '>' + new Date(item[k]).getDate() + '</td>';
}
tableTd = '<tr>' + tableTd + '</tr>';
tableTdArr[index] = tableTd;
tableTd = '';
}
});
tableTempl = tableTh + tableTdArr.join('');
weekDateEle = document.querySelector('#' + domId);
weekDateEle.innerHTML = tableTempl;
weekDateEle.querySelectorAll('tr>td').forEach(function(item, index) {
item.addEventListener("click", function() {
weekDateEle.querySelectorAll('tr>td').forEach(function(item, index) {
item.classList.remove('active');
});
this.classList.add('active');
alert(this.getAttribute('attr-date'))
});
});
}
调用实例:
//调用实例
initWeekData(2, 'twoWeekDate'); initWeekData(4, 'fourWeekDate');
实现效果:
线上DEMO:
https://codepen.io/kevinInsight/pen/mxoOaz
-------------------------------- 间隔线 --------------------------------
后来过了一段时间,需要一个如下图所示的排班:
要求:星期title固定;指定月份第一天如果不是周一,则前面置空;最后一天如果不是周日,则后面置空;已经排版的日期,加一个激活态(active),点击可以查看具体时间(如:2019-2-14)
实现:
/*
* 获取当天及之后的排班时间
* @param month:指定的月份
* @param dayCount:相对于今天的天数,形如:0,1,2.......
*/
function getDateData(month, dayCount) {
let yy, mm, dd;
let d = new Date();
let initDay = d.getFullYear() + '-' + month + '-01';
d = new Date(initDay);
d.setDate(d.getDate() + dayCount);
yy = d.getFullYear();
mm = (d.getMonth() + 1) > 9 ? d.getMonth() + 1 : '0' + (d.getMonth() + 1);
dd = d.getDate() > 9 ? d.getDate() : '0' + d.getDate();
return yy + "-" + mm + "-" + dd;
} /*
* 根据月份查询排班结果
* @param month: 指定月份,整型数字1-12
*/ function schedueByMonth(month) {
let dates = [],
weekData = [],
weekDataFinal = [],
d, m, w, weekNum, lastWeek, lastWeekDiff = [];
let formatMonth = month > 9 ? month : '0' + month;
for (let i = 0; i <= 31; i++) {
d = getDateData(formatMonth, i);
m = new Date(d).getMonth() + 1;
if (m === month) {
dates.push(d)
}
}
w = new Date(dates[0]).getDay();
if (w > 0) {
for (let j = 0; j < w - 1; j++) {
dates.unshift('')
}
} else if (w === 0) {
for (let j = 0; j < 6; j++) {
dates.unshift('')
}
}
//dates分组:每组7天
for (let i = 0; i < dates.length; i = i + 7) {
weekDataFinal.push(dates.slice(i, i + 7));
}
//最后一行不够7个,则补齐
lastWeek = weekDataFinal[weekDataFinal.length - 1];
if (lastWeek.length < 7) {
for (let k = 0; k < (7 - lastWeek.length); k++) {
lastWeekDiff.push('')
}
lastWeek = lastWeek.concat(lastWeekDiff)
weekDataFinal[weekDataFinal.length - 1] = lastWeek;
}
pendingWeekData(dates, weekDataFinal)
} function pendingWeekData(dates, weekDataFinal) {
let weekTitles = '<tr><td>星期一</td><td>星期二</td><td>星期三</td><td>星期四</td><td>星期五</td><td>星期六</td><td>星期日</td></tr>';
let scheduDom = '',
weeksDom = '',
weekDom = '';
weekDataFinal.forEach(function(item) {
item.forEach(function(subItem) {
weekDom += '<td attr-date="' + subItem + '">' + delWithDay(subItem) + '</td>';
})
weeksDom += '<tr>' + weekDom + '</tr>';
weekDom = '';
})
scheduDom = weekTitles + weeksDom;
$('#schedue').html(scheduDom); //加入业务数据
let date = ['2019-12-07', '2019-12-12', '2019-12-31']; //date为接口返回的排班时间,形如:['2019-12-07', '2019-12-12', '2019-12-28']
delWithSchedue(dates, date)
} function delWithSchedue(dates, date) {
let pesoDates = date; //date为接口返回的排班时间
let index;
if (pesoDates.length > 0) {
pesoDates.forEach(function(item, index) {
index = dates.indexOf(item)
$('#schedue').find('td').eq(index + 7).addClass('active').click(function() {
alert($(this).attr('attr-date'))
})
})
}
} function delWithDay(day) {
if (day) {
return new Date(day).getDate()
} else {
return ''
}
}
//调用实例
schedueByMonth(12)
线上DEMO:
https://codepen.io/kevinInsight/pen/omPeMM
Javascript:日期排班功能实现的更多相关文章
- 使用SQL语句使数据从坚向排列转化成横向排列(排班表)
知识重点: 1.extract(day from schedule01::timestamp)=13 Extract 属于 SQL 的 DML(即数据库管理语言)函数,同样,InterBase 也支持 ...
- (排班表一)使用SQL语句使数据从坚向排列转化成横向排列
知识重点: 1.extract(day from schedule01::timestamp)=13 Extract 属于 SQL 的 DML(即数据库管理语言)函数,同样,InterBase 也支持 ...
- 详解 OneAlert 排班可以帮你做什么
排班的存在,实质是通过有序安排,降低企业/团队人力成本,提升工作效率. 阅读导航(预计2min) 1. 详解排班功能 轮班机制 工作时间 双视图展示 灵活调整 2. 利用排班如何助力运维团队 排班 ...
- js jquery 实现 排班,轮班,日历,日程。使用fullcalendar 插件
如果想用fullcalendar实现排班功能,或者日历.日程功能.那么只需要简单的几步: 这里先挂官网链接: fullcalendar fullcalendar官网下载链接 一.下载及简单配置 1.这 ...
- 运维告警排班太复杂?试试Cloud Alert智能告警排班
前言: 之前的几篇文章有说过,通过智能告警平台Cloud Alert,将指定条件的告警以多样化的通知方式,通知到指定的人,其中的通知的方式包含电话.短信.邮件.微信.APP.钉钉等. 本篇文章就来说下 ...
- Moment.js 超棒Javascript日期处理类库
Moment.js 不容错过的超棒Javascript日期处理类库 主要特性: 3.2kb超轻量级 独立类库,意味这你不需要倒入一堆js 日期处理支持UNIX 时间戳,String,指定格式的Date ...
- c++实现医院检验科排班程序
c++实现医院检验科排班程序 1.背景: 医院急诊检验科24h×7×365值班.工作人员固定.採取轮班制度.确保24h都有人值班. 本文就通过C++实现编敲代码自己主动排班,并能够转为Excel打印. ...
- (排班表二)后台动态绘制Grid表格
后台动态绘制值班表(Grid表格 列名不固定) 要求:表头除了值班人姓名,还要显示日期,及每天的星期值,用斜杠‘/’分隔.即:几号/星期几 最终实现的效果:根据查询的年月显示每个值班人查询月份每天的值 ...
- [Javascript] 5个最佳的Javascript日期处理类库
在大家日常网站开发和web应用开发中,我们往往需要有效的调用Javascript处理日期和时间格式相关的函数,在Javascript中已经包含了部分最基本的内建处理方法. 在大家日常网站开发和web应 ...
随机推荐
- golang之strings
针对golang中的字符串的介绍,提供了一些常用的函数和方法 package main import ( "fmt" "strings" ) func main ...
- ubuntu10.10手工安装jdk1.6
声明:以下操作是在root用户下操作. 一.下载JDK首先,在Oracle的官网上下载JDK.http://www.oracle.com/technetwork/java/javase/downloa ...
- MySQL数据库篇之索引原理与慢查询优化之二
接上篇 7️⃣ 正确使用索引 一.索引未命中 并不是说我们创建了索引就一定会加快查询速度,若想利用索引达到预想的提高查询速度的效果, 我们在添加索引时,必须遵循以下问题: #1 范围问题,或者说条件 ...
- DBArtist之Oracle入门第2步: 了解Oracle的Database Control
之前安装好数据库后,会有下面这个弹窗,然后根据Database Control URL地址进入瞧一瞧,看一看! 根据地址进入以后,是一个登录界面,用system账户登录,密码就是安装Oracle的时候 ...
- ubuntu18 tensorflow faster_rcnn cpu训练自己数据集
(flappbird) luo@luo-ThinkPad-W540:tf-faster-rcnn$ ./experiments/scripts/train_faster_rcnn.sh 0 pasca ...
- 用kettle实现数据库迁移之oracle到mysql
项目完成后,需要把历史oracle 的数据库转移mysql 用kettle 转换数据. 步骤: 1.打开spoon.bat,文件-->新建-->转换,点击“主对象树”,DB连接右键“新建” ...
- clickonce发布winform必备组件
ClickOnce 发布,在系统必备中勾选了 .NET Framework 4,并选择了"从与我的应用程序相同的位置下载系统必备组件"时,执行发布,会提示缺少很多文件 使用 Pac ...
- [GO]使用select实现超时
package main import ( "fmt" "time" ) func main() { ch := make(chan int) quit := ...
- centos7部署JavaWeb项目
centos7部署JavaWeb项目共有三步 1.配置java环境 2.配置tomcat环境. 3.部署JavaWeb项目 一.配置java环境 1.1安装java 参考我的另一篇博文:https:/ ...
- java Jvm工作原理学习笔记
一. JVM的生命周期 1. JVM实例对应了一个独立运行的java程序它是进程级别 a) 启动.启动一个Java程序时,一个JVM实例就产生了,任何一个拥有pub ...