仙女日期選擇器，支持多種日歷模式，支持周選擇，樣式簡(jiǎn)潔大方，使用簡(jiǎn)單，無(wú)需二次開(kāi)發(fā)，拿來(lái)即用。此選擇器比較了市面上各種不同的日期時(shí)間選擇器，爭(zhēng)取最大化的支持各種需要的功能。
目前支持的選擇器類型有：
單日期選擇
單日期時(shí)間選擇
日期/日期時(shí)間區(qū)間選擇
單月選擇
月份區(qū)間選擇
單年度選擇
年度區(qū)間選擇
按周選擇
多日期選擇
后續(xù)還將增加其他的類型和配置，敬請(qǐng)期待哦！
使用步驟
下載代碼，引用js
<script src="jquery-1.10.2.js"></script> <script src="moment.js"></script> <script type="text/javascript" src="xndatepicker.js"></script>
初始化選擇器
var date = new XNDatepicker(
$("#date"), //日歷容器，可以是input，或其他標(biāo)簽
{
type: 'daterange',
日歷類型 date,
datetime,
daterange,
datetimerange,
month,
monthrange,
year,
yearrange,
week,
multiple
showWeek: true, //是否顯示周幾
placeholder: '請(qǐng)選擇',
shortList: [], //快捷選項(xiàng)，不寫(xiě)使用默認(rèn)快捷選項(xiàng)
locale: {
month: [
'一月',
'二月',
'三月',
'四月',
'五月',
'六月',
'七月',
'八月',
'九月',
'十月',
'十一月',
'十二月',
],
monthHead: [
'1月',
'2月',
'3月',
'4月',
'5月',
'6月',
'7月',
'8月',
'9月',
'10月',
'11月',
'12月',
],
week: ['日', '一', '二', '三', '四', '五', '六'],
clear: '清空',
confirm: '確定',
yearHeadSuffix: '年'
}, //顯示信息
confirmFirst: true, //第一次就搜索
separator: ' 到 ', //雙日歷模式下的鏈接符
showType: 'modal', //顯示樣式
linkPanels: false, //雙日歷面板聯(lián)動(dòng)
showClear: true, //是否顯示清除按鈕
autoConfirm: true, //單日歷模式，和周日歷模式，是否自動(dòng)確定
showShortKeys: true, //是否顯示快捷選項(xiàng)
autoFillDate: true, //自動(dòng)變更element里面的值，如果自動(dòng)變更，則按照插件樣式顯示
firstDayOfWeek: 7, //周起始日 1-7
theme: 'default', //主題
multipleDates: [], //當(dāng)為多選日期類型時(shí)的初始值
startTime: '', //初始開(kāi)始時(shí)間
endTime: '', //初始結(jié)束時(shí)間
minDate: '', //最小時(shí)間
maxDate: '', //最大時(shí)間
},
function(data) { //選擇日期后的回調(diào)函數(shù)
console.log(data)
}, )方法
銷毀實(shí)例
fcolorpicker.destroy()
示例代碼請(qǐng)參考 src/index.html
后續(xù)功能點(diǎn)
移動(dòng)端的支持
多主題的支持
