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