Kalendae多选日历插件

近期需要做日期选择,各种百度都没有满足要求的插件,(要求多选,多月份,可随意禁用日期,可默认选择等等。。。)直到在灯火阑珊处遇见它--Kalendae!

代码下载  github-Kalendae

终于等到你~

首先,引入两个必要文件咯 

<link rel="stylesheet" type="text/css" href="kalendae.css" />

<script type="text/javascript" src="kalendae.standalone.js"></script>

然后你的html 来个input~

<input type="text" id="schedule_date"  value="" />

接下来就是js啦

<script type="text/javascript">
//日历插件
function calendarTool(inputName, disableTime = [], selectedTime = []) {
new Kalendae.Input(inputName, {
direction: 'any', //past过去   today-past过去(包括当天)  future未来   today-future未来(包括当天)   any任何  
directionScrolling: true, //指定 direction设定的进行展示,其他不展示
months: 3, //展示几个月
mode: 'multiple', //模式 single 单选, multiple 多选, range 范围选择
blackout: function(date) { //指定日期不能选择
for(var i = 0; i < disableTime.length; i++) {
if(Kalendae.moment(date).format("YYYY-MM-DD") == disableTime[i]) {
return true
};
}
},
selected: selectedTime //默认选择日期
});
};
var disableTime = ['2018-05-22', '2018-05-18', '2018-05-19'];
                var selectedTime = ['2018-05-21','2018-05-25'];

calendarTool('schedule_date',disableTime,selectedTime)

</script>


Bingo!!!

代码下载  github-Kalendae





  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值