前端那些事之日历多选插件篇

2019独角兽企业重金招聘Python工程师标准>>>

运用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() {

				});
			}
		});
	});
}

转载于:https://my.oschina.net/yongxinke/blog/871767