写在前面

java开发，17年大专毕业。好不容易找个工作做了一年半左右结果行业不景气，我还没凉公司先凉了，辗转一个多月终于找到了一份新的工作。

需求

项目是做交易管理系统的，也没有特定的前端，就是两个java开发兼职开发jsp。基本功能基本上完成了，剩下的就是优化前端展示（给领导邀功）了。由此，接到了我新公司的第一份需求 日期选择页面，使用可以多选日期的日期插件 。

刚接到需求内心极为抗拒的，都easyui了还要啥自行车？再说了，我是java开发呀（第一份工作项目组有前端，想要啥提需求就行），但是也是第一个需求，不能打了领导的“慧眼”啊。于是乎，是时候展示真正的实力了。刚开始有两种想法：

table列表+复选框 ，简单暴力，js拼接时间，循环组装table，每个框都是一个复选框。
扩展easyui的Calendar插件 样式都是easyui风格，不用自己再去拼写日期啥的。

思考一二，1果断放弃（什么垃圾想法）。反正也没咋写过easyui的东西，就当学习练手了。度娘走起—各种百度日期复选框的相关搜索，出来的都是那种起止时间区间选择类型，这完全不是我想要的呀，领导要的是这种

单选某个日期选定多个时间的插件。

完了，百度不到，只能吃自己了。

知己知彼

百度找不到先人的足迹，那就去官网瞅瞅吧。 _____沃兹基硕德

进去easyui官网，打开CalendarDemo的页面，开始各种沉思，终于，功夫不负有心人，各种尝试之后第一阶段终于过了

通关一阶段秘籍如下：

// An highlighted block
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>日期选择器</title><link rel="stylesheet" type="text/css" href="../jquery-easyui-1.7.0/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="../jquery-easyui-1.7.0/themes/icon.css"><link rel="stylesheet" type="text/css" href="../jquery-easyui-1.7.0/demo/demo.css"><script type="text/javascript" src="../jquery-easyui-1.7.0/jquery.min.js"></script><script type="text/javascript" src="../jquery-easyui-1.7.0/jquery.easyui.min.js"></script></head><body><table><tr><td colspan="10"><input id="yearCombobox" class="easyui-combobox" style="width:200px;" editable="false"data-options="valueField: 'val',textField: 'name',data: [{val: '2018',name: '2018年'},{val: '2019',name: '2019年'},{val: '2010',name: '2010年'}]" /></td></tr><tr><td><div class="easyui-calendar" id="dateChoose1" data-options="month:1,weeks:['日','一','二','三','四','五','六'],months:['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']"></div></td></tr></table><div><button onclick="showChooseDate()">展示选中日期数据</button></div><script>//保存展示在前台的天数listvar ChooseList = new Array();// ChooseList = ['2019-4-28','2019-5-28','2019-6-28','2019-11-23','2019-11-24']//保存后台传输的时间listvar sendToServer = new Array();//获取年份查询列表 (也可用于后台数据查询回显年份操作)$('#yearCombobox').combobox({onSelect: function(data) {var ChooseYear = Number(data.val);console.log(ChooseYear)$('.easyui-calendar').calendar({year: ChooseYear})//年份更新 数据清空 OR 重新查询数据ChooseList = new Array()sendToServer = new Array();}})//公共调用方法var mons = [1];for (var i in mons) {var mon = mons[i];//初始化渲染initChenkDate(mon);//点击触发选择事件toChooseDate(mon);}//初始化渲染function initChenkDate(mon){//遍历所有日期$('#dateChoose' + mon).calendar({formatter: function(date) {//遍历当前月所有的时间var y1 = date.getFullYear();var m1 = date.getMonth() + 1;var d1 = date.getDate();//遍历前台需要展示的选中日期数据//判断当前list中是否包含该日期var yy = y1 + "-" + m1 + "-" + d1;var a = ChooseList.indexOf(yy);if(m1 == mon){if (a == -1) {return yy.split("-")[2];} else {return '<div class="icon-ok md">' + d1 + '</div>';}}else{return d1;}}});}//点击一个日期触发事件function toChooseDate(mon) {$('#dateChoose' + mon).calendar({onSelect: function(date) {//获取当前点击的日期var y = date.getFullYear();var m = date.getMonth() + 1;var d = date.getDate();//先去判断list中是否已经选中var ttt = y + "-" + m + "-" + d;var zz = y + "-" + m + "-" + d;var a = ChooseList.indexOf(zz);if (m == mon) {if (a == -1) {//不包含ChooseList.push(zz);sendToServer.push(ttt);} else {ChooseList.splice(a, 1);sendToServer.splice(a, 1);}}//遍历所有日期 $('#dateChoose' + mon).calendar({formatter: function(date) {//遍历当前月所有的时间var y1 = date.getFullYear();var m1 = date.getMonth() + 1;var d1 = date.getDate();//遍历前台需要展示的选中日期数据//判断当前list中是否包含该日期var yy = y1 + "-" + m1 + "-" + d1;var a = ChooseList.indexOf(yy);if(m1 == mon){if (a == -1) {return yy.split("-")[2];} else {return '<div class="icon-ok md">' + d1 + '</div>';}}else{return d1;}}});},// 禁用不是当前月份的日期选择(当前月份框内不能点击其他月份时间)validator: function(date) {var m2 = date.getMonth() + 1;if (m2 == mon) {// true 可以进行点击复选  false 展示  不能进行选择return true;} else {return false;}}});}//展示数据方法function showChooseDate() {var a = JSON.stringify(sendToServer);if (sendToServer.length > 0) {alert(a);} else {alert("没有选定数据")}}</script><style scoped="scoped">.md {height: 16px;line-height: 16px;background-position: 2px center;text-align: right;font-weight: bold;padding: 0 2px;color: red;}.easyui-calendar {width: 200px;height: 200px;}</style></body>
</html>

（大佬感谢区，当时脑子挺乱的，就各种百度啥的，借鉴了很多大佬的各种经验，人太多我都忘了抄谁的了，东拼西揍。那就祝福在座的每一位新年快乐吧）

百战百胜

一月份的出来了，那么剩下月份的还会远吗？于是我兴致冲冲的cv了12个日历表，让领导大大看了我的初稿，然后，问题就出来了。。。

就是插件自带的切换时间的几个按钮组件，需要把这几个按钮禁用掉。迅雷不及掩耳盗铃儿响叮当我就懵逼了，这官网上也没写属性方法去禁用这个的啊，苦思冥想半日有余，终于在第N次去洗手间放水的瞬间来了灵感，找不到禁用的方法，但是能让你消失啊。废话不多说，开整：

F12 看组件元素

// An highlighted block<style>/* 导航箭头设置=隐藏-禁止点击下一月跳转 */.calendar-prevmonth,.calendar-nextmonth,.calendar-prevyear,.calendar-nextyear {visibility: hidden!important}/*禁止月份按钮点击事件*/.calendar-text,.calendar-title{pointer-events: none!important}</style>

大功告成，再去邀功。（嗯，你这个基本上还行，但是还是达不到我的预期，我想要的页面应该。。。应该。。。，算了，先这样吧）

入获大赦，继续接下来开发吧，把一年的时间都整上。最终成品如下：

// An highlighted block
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>日期选择器</title><link rel="stylesheet" type="text/css" href="../jquery-easyui-1.7.0/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="../jquery-easyui-1.7.0/themes/icon.css"><link rel="stylesheet" type="text/css" href="../jquery-easyui-1.7.0/demo/demo.css"><script type="text/javascript" src="../jquery-easyui-1.7.0/jquery.min.js"></script><script type="text/javascript" src="../jquery-easyui-1.7.0/jquery.easyui.min.js"></script></head><body><h2>Custom Calendar</h2><p>This example shows how to custom the calendar date by using 'formatter' function.</p><table><tr><td colspan="10"><input id="yearCombobox" class="easyui-combobox" style="width:200px;" editable="false"data-options="valueField: 'val',textField: 'name',data: [{val: '2018',name: '2018年'},{val: '2019',name: '2019年'},{val: '2010',name: '2010年'}]" /></td></tr><tr><td><div class="choose-month-title" id="check-div1" onclick="clickChooseDiv(1)"><table><tr><td width="20"><input class="my-checkbox" type="checkbox" name = "monthCheck" value="1" id="checkbox-month1" ></td><td width="50"><span id="check-status1">未复核</span></td><td width="50"><span id="update-name1">张三</span></td><td ><span id="update-step1">修改</span></td></tr></table><div class="easyui-calendar" id="dateChoose1" data-options="month:1,weeks:['日','一','二','三','四','五','六'],months:['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']"></div></div></td><td><div class="choose-month-title" id="check-div2" onclick="clickChooseDiv(2)"><table><tr><td width="20"><input class="my-checkbox" type="checkbox" name = "monthCheck" value="2" id="checkbox-month2" ></td><td width="50"><span id="check-status2">未复核</span></td><td width="50"><span id="update-name2">张三</span></td><td ><span id="update-step2">修改</span></td></tr></table><div class="easyui-calendar" id="dateChoose2" data-options="month:2,weeks:['日','一','二','三','四','五','六'],months:['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']"></div></div></td><td><div class="choose-month-title" id="check-div3" onclick="clickChooseDiv(3)"><table><tr><td width="20"><input class="my-checkbox" type="checkbox" name = "monthCheck" value="3" id="checkbox-month3" ></td><td width="50"><span id="check-status3">未复核</span></td><td width="50"><span id="update-name3">张三</span></td><td ><span id="update-step3">修改</span></td></tr></table><div class="easyui-calendar" id="dateChoose3" data-options="month:3,weeks:['日','一','二','三','四','五','六'],months:['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']"></div></div></td><td><div class="choose-month-title" id="check-div4" onclick="clickChooseDiv(4)"><table><tr><td width="20"><input class="my-checkbox" type="checkbox" name = "monthCheck" value="4" id="checkbox-month4" ></td><td width="50"><span id="check-status4">未复核</span></td><td width="50"><span id="update-name4">张三</span></td><td ><span id="update-step4">修改</span></td></tr></table><div class="easyui-calendar" id="dateChoose4" data-options="month:4,weeks:['日','一','二','三','四','五','六'],months:['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']"></div></div></td><td><div class="choose-month-title" id="check-div5" onclick="clickChooseDiv(5)"><table><tr><td width="20"><input class="my-checkbox" type="checkbox" name = "monthCheck" value="5" id="checkbox-month5" ></td><td width="50"><span id="check-status5">未复核</span></td><td width="50"><span id="update-name5">张三</span></td><td ><span id="update-step5">修改</span></td></tr></table><div class="easyui-calendar" id="dateChoose5" data-options="month:5,weeks:['日','一','二','三','四','五','六'],months:['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']"></div></div></td><td><div class="choose-month-title" id="check-div6" onclick="clickChooseDiv(6)"><table><tr><td width="20"><input class="my-checkbox" type="checkbox" name = "monthCheck" value="6" id="checkbox-month6" ></td><td width="50"><span id="check-status6">未复核</span></td><td width="50"><span id="update-name6">张三</span></td><td ><span id="update-step6">修改</span></td></tr></table><div class="easyui-calendar" id="dateChoose6" data-options="month:6,weeks:['日','一','二','三','四','五','六'],months:['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']"></div></div></td></tr><tr><td><div class="choose-month-title" id="check-div7" onclick="clickChooseDiv(7)"><table><tr><td width="20"><input class="my-checkbox" type="checkbox" name = "monthCheck" value="7" id="checkbox-month7" ></td><td width="50"><span id="check-status7">未复核</span></td><td width="50"><span id="update-name7">张三</span></td><td ><span id="update-step7">修改</span></td></tr></table><div class="easyui-calendar" id="dateChoose7" data-options="month:7,weeks:['日','一','二','三','四','五','六'],months:['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']"></div></div></td><td><div class="choose-month-title" id="check-div8" onclick="clickChooseDiv(8)"><table><tr><td width="20"><input class="my-checkbox" type="checkbox" name = "monthCheck" value="8" id="checkbox-month8" ></td><td width="50"><span id="check-status8">未复核</span></td><td width="50"><span id="update-name8">张三</span></td><td ><span id="update-step8">修改</span></td></tr></table><div class="easyui-calendar" id="dateChoose8" data-options="month:8,weeks:['日','一','二','三','四','五','六'],months:['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']"></div></div></td><td><div class="choose-month-title" id="check-div9" onclick="clickChooseDiv(9)"><table><tr><td width="20"><input class="my-checkbox" type="checkbox" name = "monthCheck" value="9" id="checkbox-month9" ></td><td width="50"><span id="check-status9">未复核</span></td><td width="50"><span id="update-name9">张三</span></td><td ><span id="update-step9">修改</span></td></tr></table><div class="easyui-calendar" id="dateChoose9" data-options="month:9,weeks:['日','一','二','三','四','五','六'],months:['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']"></div></div></td><td><div class="choose-month-title" id="check-div10" onclick="clickChooseDiv(10)"><table><tr><td width="20"><input class="my-checkbox" type="checkbox" name = "monthCheck" value="10" id="checkbox-month10" ></td><td width="50"><span id="check-status10">未复核</span></td><td width="50"><span id="update-name10">张三</span></td><td ><span id="update-step10">修改</span></td></tr></table><div class="easyui-calendar" id="dateChoose10" data-options="month:10,weeks:['日','一','二','三','四','五','六'],months:['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']"></div></div></td><td><div class="choose-month-title" id="check-div11" onclick="clickChooseDiv(11)"><table><tr><td width="20"><input class="my-checkbox" type="checkbox" name = "monthCheck" value="11" id="checkbox-month11" ></td><td width="50"><span id="check-status11">未复核</span></td><td width="50"><span id="update-name11">张三</span></td><td ><span id="update-step11">修改</span></td></tr></table><div class="easyui-calendar" id="dateChoose11" data-options="month:11,weeks:['日','一','二','三','四','五','六'],months:['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']"></div></div></td><td><div class="choose-month-title" id="check-div12" onclick="clickChooseDiv(12)"><table><tr><td width="20"><input class="my-checkbox" type="checkbox" name = "monthCheck" value="12" id="checkbox-month12"></td><td width="50"><span id="check-status12">未复核</span></td><td width="50"><span id="update-name12">张三</span></td><td ><span id="update-step12">修改</span></td></tr></table><div class="easyui-calendar" id="dateChoose12" data-options="month:12,weeks:['日','一','二','三','四','五','六'],months:['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']"></div></div></td></tr></table><div style="margin:20px 0"></div><div><button onclick="showChooseDate()">展示选中日期数据</button><button onclick="showAllCheckVal()">展示复选框选中数据</button></div><script>//设置复选框的操作$(".easyui-checkbox").checkbox({onChange:function(ck){//阻止事件冒泡方法 -- 点击var event = arguments.callee.caller.caller.arguments[0];event.stopPropagation();//获取当前操作元素的对应的valvar vv = $(this).val();//如果当前选中 改变div底色 #ffab3fif(ck){$("#check-div"+vv).css('background-color','#ffab3f');}else{$("#check-div"+vv).css('background-color','#FFFFFF');}}})//展示所有复选框的数据信息function showAllCheckVal(){//循环获取所有复选框选中的value值var serialNos = getAllCheckedMonth();alert(serialNos);}//获取当前所有的选中月份集合方法function getAllCheckedMonth(){var serialNos = $("input[name='monthCheck']:checked").map(function () {return $(this).val();}).get().join(',');return serialNos.split(",");}//div点击选中事件function clickChooseDiv(val){}//设置复选框反选操作 div背景色刷新function checkBoxCheck(id,st,vv){}</script><script>//保存展示在前台的天数listvar ChooseList = new Array();// 设置初始选中日期ChooseList = ['2019-4-28','2019-5-28','2019-6-28','2019-11-23','2019-11-24']//保存后台传输的时间listvar sendToServer = new Array();// sendToServer = ['2019-4-28','2019-5-28','2019-6-28','2019-11-23','2019-11-24']//获取年份查询列表 (也可用于后台数据查询回显年份操作)$('#yearCombobox').combobox({onSelect: function(data) {var ChooseYear = Number(data.val);console.log(ChooseYear)$('.easyui-calendar').calendar({year: ChooseYear})//年份更新 数据清空 OR 重新查询数据ChooseList = new Array()sendToServer = new Array();}})//公共调用方法var mons = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];for (var i in mons) {var mon = mons[i];//初始化渲染initChenkDate(mon);//点击触发选择事件toChooseDate(mon);}//初始化渲染function initChenkDate(mon){//遍历所有日期$('#dateChoose' + mon).calendar({formatter: function(date) {//遍历当前月所有的时间var y1 = date.getFullYear();var m1 = date.getMonth() + 1;var d1 = date.getDate();//遍历前台需要展示的选中日期数据//判断当前list中是否包含该日期var yy = y1 + "-" + m1 + "-" + d1;var a = ChooseList.indexOf(yy);if(m1 == mon){if (a == -1) {return yy.split("-")[2];} else {return '<div class="icon-ok md">' + d1 + '</div>';}}else{return d1;}}});}//点击一个日期触发事件function toChooseDate(mon) {$('#dateChoose' + mon).calendar({onSelect: function(date) {//获取当前点击的日期var y = date.getFullYear();var m = date.getMonth() + 1;var d = date.getDate();//先去判断list中是否已经选中var ttt = y + "-" + m + "-" + d;var zz = y + "-" + m + "-" + d;var a = ChooseList.indexOf(zz);if (m == mon) {if (a == -1) {//不包含ChooseList.push(zz);sendToServer.push(ttt);} else {ChooseList.splice(a, 1);sendToServer.splice(a, 1);}}//遍历所有日期 $('#dateChoose' + mon).calendar({formatter: function(date) {//遍历当前月所有的时间var y1 = date.getFullYear();var m1 = date.getMonth() + 1;var d1 = date.getDate();//遍历前台需要展示的选中日期数据//判断当前list中是否包含该日期var yy = y1 + "-" + m1 + "-" + d1;var a = ChooseList.indexOf(yy);if(m1 == mon){if (a == -1) {return yy.split("-")[2];} else {return '<div class="icon-ok md">' + d1 + '</div>';}}else{return d1;}}});},// 禁用不是当前月份的日期选择validator: function(date) {var m2 = date.getMonth() + 1;if (m2 == mon) {// true 可以进行点击复选  false 展示  不能进行选择return true;} else {return false;}}});}//展示数据方法function showChooseDate() {var a = JSON.stringify(sendToServer);if (sendToServer.length > 0) {alert(a);} else {alert("没有选定数据")}}</script><style scoped="scoped">.md {height: 16px;line-height: 16px;background-position: 2px center;text-align: right;font-weight: bold;padding: 0 2px;color: red;}.easyui-calendar {width: 200px;height: 200px;}/* 导航箭头设置=隐藏-禁止点击下一月跳转 */.calendar-prevmonth,.calendar-nextmonth,.calendar-prevyear,.calendar-nextyear {visibility: hidden!important}/*禁止月份按钮点击事件*/.calendar-text,.calendar-title{pointer-events: none!important}</style></body>
</html>

写完收工

发现写页面就会用div + table，布局是真的不敢恭维。但是毕竟是耗费了三四天整出来的东西，成就感还是有的。

下个早班，终于可以继续跟卢克老爷爷愉快的玩耍了~

记一次easyui使用calendar日期插件实现日期多选相关推荐

【js】日期插件 my97日期控件
http://my97.net/dp/demo/index.htm 功能不错的日期插件转载于:https://www.cnblogs.com/merlini/archive/2013/06/09/3 ...
My97日期插件实现日期多选
-##一.story 项目中一个查询页面的日期输入框需要实现多选,日期插件用的是My97,由于原始的My97不支持日期多选,只能选用其他日期插件或对My97进行改造,下面介绍下用js修改My97的属性 ...
jquery日期插件_AngularJS 日期时间选择组件（附详细使用方法）
插件简介 AngularJS是一款目前非常火的JavaScript脚本库,应用范围十分广阔.今天给大家分享一款基于AngularJS和jQuery的日期时间选择组件,和别的日期选择插件一样,它同样支持 ...
java中jsp时间插件_日期插件 - WEB源码|JSP源码/Java|源代码 - 源码中国
日期插件\My97DatePicker\calendar.js 日期插件\My97DatePicker\lang\en.js 日期插件\My97DatePicker\lang\zh-cn.js 日期插 ...
WdatePicker日期插件
WdatePicker日期插件 WdatePicker日期插件应用步骤如下: 1.引入jQuery核心包和WdatePicker.js文件 2.使用onfocus事件触发WdatePicker函数 3 ...
html引入kendo日期控件,kendo ui 日期插件：kendoDatePicker详解
项目中引入了kendoUI,为了保持风格一致,项目中引入的组件,尽量优先使用kendoUI中已有的,避免引入更多的第三方库文件,不利于日后的管理和维护. kendoUI2018最新版库文件中的日期插件 ...
jQuery日期插件
1.下载jQuery日期插件,见附件. 2.导入相应的js文件和jquery源码.例如 <link rel="stylesheet" type="text/css& ...
My97DatePicker-WdatePicker日历日期插件详细示例
插件下载地址: https://download.csdn.net/download/lianzhang861/10433412 此日期插件功能还可以,用着挺顺手目前的版本是:4.8 正式版 My9 ...
uniapp 日期插件_Calendar 日历
更新记录 1.3.14(2020-05-22) 修复自定义easycom规则,子组件提示未找到的Bug 1.3.13(2020-05-22) 修复自定义easycom规则,子组件提示未找到的Bug ...

记一次easyui使用calendar日期插件实现日期多选

easyui使用calendar日期插件实现日期多选

写在前面

需求

知己知彼

百战百胜

写完收工

记一次easyui使用calendar日期插件实现日期多选相关推荐

最新文章

热门文章