写在前面
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>
//保存展示在前台的天数list
var ChooseList = new Array();
// ChooseList = ['2019-4-28','2019-5-28','2019-6-28','2019-11-23','2019-11-24']
//保存后台传输的时间list
var 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();
//获取当前操作元素的对应的val
var vv = $(this).val();
//如果当前选中 改变div底色 #ffab3f
if(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>
//保存展示在前台的天数list
var ChooseList = new Array();
// 设置初始选中日期
ChooseList = ['2019-4-28','2019-5-28','2019-6-28','2019-11-23','2019-11-24']
//保存后台传输的时间list
var 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，布局是真的不敢恭维。但是毕竟是耗费了三四天整出来的东西，成就感还是有的。
下个早班，终于可以继续跟卢克老爷爷愉快的玩耍了~
扫一扫
1258
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
