日历插件js，直接可以使用
下边完整代码可以试试，css和js文件路径自己改动一下就o
<html lang="ru-RU">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="js03/kalendae.css" type="text/css" charset="utf-8"/>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js03/kalendae.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css" media="screen">
.kalendae span.closed {
red;
}
</style>
</head>
<body>
<h1>Kalendae</h1>
<p>Single Select</p>
<script type="text/javascript" charset="utf-8">
new Kalendae(document.body, {
months: 1,
mode: 'single',
selected: Kalendae.moment().subtract({ M: 1 })
});
new Kalendae({
attachTo: document.body,
months: 2,
mode: 'single',
selected: Kalendae.moment().subtract({ M: 1 })
});
new Kalendae({
attachTo: document.body,
months: 3,
mode: 'single',
selected: Kalendae.moment().subtract({ M: 1 })
});
</script>
<p>Range Select</p>
<script type="text/javascript" charset="utf-8">
new Kalendae(document.body, {
months: 1,
mode: 'range',
selected: [Kalendae.moment().subtract({ M: 1 }), Kalendae.moment().add({ M: 1 })]
});
new Kalendae({
attachTo: document.body,
months: 2,
mode: 'range',
selected: [Kalendae.moment().subtract({ M: 1 }), Kalendae.moment().add({ M: 1 })]
});
new Kalendae({
attachTo: document.body,
months: 3,
mode: 'range',
selected: [Kalendae.moment().subtract({ M: 1 }), Kalendae.moment().add({ M: 1 })]
});
</script>
<p>Multi-Select</p>
<script type="text/javascript" charset="utf-8">
new Kalendae(document.body, {
months: 1,
mode: 'multiple',
selected: [Kalendae.moment().subtract({ M: 1 }), Kalendae.moment().add({ M: 1 })]
});
new Kalendae({
attachTo: document.body,
months: 2,
mode: 'multiple',
selected: [Kalendae.moment().subtract({ M: 1 }), Kalendae.moment().add({ M: 1 })]
});
new Kalendae({
attachTo: document.body,
months: 3,
mode: 'multiple',
selected: [Kalendae.moment().subtract({ M: 1 }), Kalendae.moment().add({ M: 1 })]
});
</script>
<hr>
<p>Blackout and Direction Tests</p>
<script type="text/javascript" charset="utf-8">
//direction
new Kalendae(document.body, {
months: 3,
direction: 'future'
});
//direction
new Kalendae(document.body, {
months: 3,
direction: 'past'
});
//blackout
new Kalendae(document.body, {
blackout: function (date) {
return Kalendae.moment(date).date() % 2; //blackout every other day
}
});
//blackout AND direction
new Kalendae(document.body, {
direction: 'future',
blackout: function (date) {
return [1, 0, 0, 0, 0, 0, 1][Kalendae.moment(date).day()]; //blackout weekends
}
});
</script>
<hr>
<p>Class Map Test</p>
<script type="text/javascript" charset="utf-8">
//direction
var classMap = [];
classMap[Kalendae.moment().add({ d: 5 }).format('YYYY-MM-DD')] = 'closed';
new Kalendae(document.body, {
dateClassMap: classMap
});
</script>
<hr>
Click this input element: <input type="text" value="2/16/2012" id="input1">
<script type="text/javascript" charset="utf-8">
var k4 = new Kalendae.Input('input1', {
months: 2
});
</script>
<hr>
This calendar is auto-created.
<div class="auto-kal"></div>
<hr>
So is the one on this input.
<input type="text" class="auto-kal"/>
</body>
</html>
共同学习，写下你的评论
评论加载中...
作者其他优质文章
