Html5添加用戶選擇一個日期時間範圍的日期選擇器插件教程

1、使用方法
<link rel="stylesheet" href="daterangepicker.css" />
<script src="moment.min.js"></script>
<script src="jquery.daterangepicker.js"></script>  

2、調用插件
$('#dom-id').dateRangePicker(configObject);

3、配置參數
{
format: 'YYYY-MM-DD',
separator: ' to ',
language: 'auto',
startOfWeek: 'sunday',//or monday
getValue: function()
{
return this.value;
},
setValue: function(s)
{
this.value=s;
},
startDate: false,
endDate: false,
minDays: 0,
maxDays: 0,
showShortcuts: true,
time:{
enabled: false
},
shortcuts:
{
'next-days':[3,5,7],
'next' :['week','month','year']
},
customShortcuts : [],
inline:false,
container: 'body',
alwaysOpen:false,
singleDate:false,
batchMode:false,
beforeShowDay: [function],
dayDivAttrs: [],
dayTdAttrs: [],
applyBtnClass: ''
}

4、事件
$('#dom-id')
.dateRangePicker()
.bind('datepicker-change',function(event,obj)
{
console.log(obj);
})
.bind('datepicker-apply',function(event,obj)
{
console.log(obj);
})
.bind('datepicker-close',function()
{
console.log('close');
});

5、API
$(dom).data('dateRangePicker')
.setDateRange('2013-11-20','2013-11-25');      
.clear();    
.close();
.open();   
.destroy();      
                

應用推廣KeyMob移動端廣告平臺，國內專業的「管理工具」一站式移動營銷應用推廣平臺。致力於爲廣告主提供基於移動營銷廣告進行高效的優化管理服務。