layui laydate自制简单多选日历(JS控件)

公司最近需要做一个日历，所用的框架是layui，听完需求以后我就觉得要凉，因为laydate做这个并不好做。

所以虽然我这边实现了一个简易的layui-calendar，但我奉劝还没开始的各位，选用其它控件可能更合适些。

如果只能选用，那希望我的这篇文章能给你启迪。

首先，可以到我的github上去下载这个控件的源码，layui-calendar点击这里下载。

这里我简单解释一下，借用laydate中options的mark来实现。

mark属性需要对应的json值，在源码中通过传入相应的json来实现日历的初始化，然后在点选的时候也是通过更改这个json值来实现着色。

mark默认的样式是laydate-day-mark，通过重写这个样式，就可以实现着色了。

如果你需要全选当前页的这个月的所有日子，可以通过一下代码来实现，github上的源码没有这块。

function allPick(){
var ym = $('.laydate-theme-grid .laydate-set-ym').find('span').eq(0).attr('lay-ym').split('-')
var dnum = getCountDays(ym)
for (var i = 1; i <= 9; i++) {
    data[ym[0] + '-' + ym[1] + '-0' + i] = ''
}
for (var i = 10; i <= dnum; i++) {
    data[ym[0] + '-' + ym[1] + '-' + i] = ''
}
$('#test-n2').html('');
loding_date(new Date([ym[0] + '-' + ym[1] + '-' + dnum]), data);
}

 

//获取某月有多少天
function getCountDays(ym) {
    var curDate = new Date(ym);
    var curMonth = curDate.getMonth();
    curDate.setMonth(curMonth + 1);
    curDate.setDate(0);
    return curDate.getDate();
}