Html5添加用户选择一个日期时间范围的日期选择器插件教程

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

二、调用插件
$(’#dom-id’).dateRangePicker(configObject);

三、配置参数
{
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: ’’
}

四、事件
$(’#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’);
});

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

应用推广KeyMob移动端广告平台，国内专业的“管理工具”一站式移动营销应用推广平台。致力于为广告主提供基于移动营销广告进行高效的优化管理服务。