运用Kalendae插件实现日历多选
//html
<div class="row">
<div class="col-md-12 wrap" id="datepk1"></div>
</div>
//js调用
var $form;
var form;
var $;
var layer;
var laytpl;
var result = [];
var arr;
var obj = [];
layui.use([ 'element', 'layer', 'form', 'layedit', 'laydate', 'laypage', 'laytpl', 'datatable' ], function() {
$ = layui.jquery, layer = layui.layer, element = layui.element(), form = layui.form(), layedit = layui.layedit, laydate = layui.laydate, laytpl = layui.laytpl, laypage = layui.laypage;
$.ajax({
url : ProviderApi.queryHolidayDate,
type : "get",
timeout : 10000,
dataType : 'json',
success : function(data) {
$.each(data.data, function(i, item) {
obj.push(item);
})
date("datepk1", obj);
},
error : function() {
layer.msg('亲,日历新增接口有问题!!', {
icon : 0,
time : 1500
}, function() {
});
}
});
// 点击修改
dataAjax();
//重置
$("#reset").on("click",function () {
location.reload();
})
//返回
$("#back").on("click",function () {
var index = parent.layer.getFrameIndex(window.name);
// // 先得到当前iframe层的索引
// parent.location.reload();
parent.layer.close(index); // 再执行关闭
})
});
function date(id, item) {
var date = new Kalendae(document.getElementById("" + id + ""), {
mode : 'multiple',
months : 12,
blackout : function(date) {
return [ 0, 0, 0, 0, 0, 0, 0 ][Kalendae.moment(date).day()]; // blackout
// weekends
},
viewStartDate : Kalendae.moment().subtract({
M : 2
}),
subscribe : {
'date-clicked' : function(date) {
arr = [];
arr.push(this.getSelected());
arr.push(date._i);
return arr;
}
}
})
date.setSelected(item);
}
function dataAjax() {
$(document).on('click', '#btn-save', function() {
debugger
var $spans = $(".kalendae .k-days").find("span");
var dates = arr || obj;
if (dates.length == 2) {
var $last = dates[dates.length - 1];
$.each($spans, function(i, obj) {
var self = $(obj);
if ($last == self.data("date")) {
if (self.hasClass("k-selected")) {
$.each(dates, function(index, item) {
result.push(item);
})
} else {
dates.pop();
var _data = dates[0];
var _holiday = _data.split(',');
var _index;
$.each(_holiday, function(index, item) {
if ($last == item.trim()) {
_index = index;
}
})
_holiday.splice(_index, 1);
$.each(_holiday, function(index, item) {
result.push(item);
})
}
}
})
}else {
$.each(dates, function(index, item) {
result.push(item);
})
}
$.ajax({
url : ProviderApi.holidayDate,
data : {
holidayDate : JSON.stringify(result)
},
type : "get",
timeout : 10000,
dataType : 'json',
success : function(data) {
if (data.success == true) {
layer.msg(data.msg, {
icon : 1,
time : 1500
}, function() {
var index = parent.layer.getFrameIndex(window.name);
// // 先得到当前iframe层的索引
// parent.location.reload();
parent.layer.close(index); // 再执行关闭
});
} else {
layer.msg(data.msg, {
icon : 2,
time : 1500
}, function() {
});
}
},
error : function() {
layer.msg('亲,日历新增接口有问题!!', {
icon : 0,
time : 1500
}, function() {
});
}
});
});
}