Kalendae —— 日期多选插件

Kalendae 是一个 JavaScript 实现的日期选择工具,无需依赖其他 JS 库。

Kalendae.js下载

引用:

<link rel="stylesheet" href="/statics/kalendae/kalendae.css" type="text/css">
<script type="text/javascript" src="/statics/kalendae/kalendae.standalone.js"></script>

html页面:

<!-- 多选 -->
<input type="text" class="layui-input auto-kal" data-kal="mode:'multiple'" id="datepk">

js部分:

 可设置默认选中日期,此处为默认选中当天、距当天7天及14天 3个数据;可以通过 kal.getSelect() 获取已选中的日期

// 日期多选
var kal = new Kalendae.Input("datepk", {
	months: 2, //months属性表示日历显示几个月,值:1、2、3.....;默认值:1
	mode: 'multiple', //mode属性表示显示的是单选还是多选还是范围,值:'single'、'multiple'、'range';默认值:'single'
	dayHeaderClickable: true,
	subscribe: {
		'date-clicked': function (date) {
			console.log(date._i, this.getSelected());
		}
	}, //subscribe属性表示绑定kalendea指定的事件,支持的事件有change、date-clicked、view-changed
	selected: Kalendae.moment().subtract({M: 1})
}); 

// 设置默认选中日期
var day1 = new Date();
var day2 = new Date();
var day3 = new Date();
day1.setDate(day1.getDate());
day2.setDate(day1.getDate() - 7);
day3.setDate(day1.getDate() - 14);
var d3 = day3.format("yyyy-MM-dd");
var d2 = day2.format("yyyy-MM-dd");
var d1 = day1.format("yyyy-MM-dd");
kal.setSelected(d3 + "," + d2 + "," + d1); //设置选中日期,多个用逗号隔开

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值