Calendar Demo

一、选择单天的时间段选择(TA的日期选择器):

最近七天


示例代码:(更多参数,参见用户手册)

var dateRange = new pickerDateRange('date_demo3', {
  aRecent7Days : 'aRecent7DaysDemo3', //最近7天
  isTodayValid : false, //今天是否可选
  defaultText : ' 至 ',
  inputTrigger : 'input_trigger_demo3',
  theme : 'ta',
  success : function(obj) {
    $("#dCon_demo3").html('开始时间 : ' + obj.startDate + '<br />结束时间 : ' + obj.endDate);
  }
});

二、支持点击结束日期自动提交,无须确定按钮(ta,gri主题均支持):

开始时间:2012-06-14
结束时间:2012-07-10


示例代码:(更多参数,参见用户手册)

<script type="text/javascript">
var dateRange1 = new pickerDateRange('date1', {
  isTodayValid: true, //今天是否可选
  startDate: '2017-06-04',
  endDate: '2017-06-07',
  startToday: false, //开始时间为今天
  stopToday: true, //结束时间为今天
  needCompare: false,
  defaultText: ' 至 ',
  autoSubmit: true,
  inputTrigger: 'input_trigger1',
  theme: 'ta',
  success: function (obj) {
    $("#dCon2").html('开始时间 : ' + obj.startDate + '<br />结束时间 : ' + obj.endDate);
  }
});
</script>

三、月份选择器:

开始时间:2012-06-14
结束时间:2012-07-10

示例代码:需额外引入日期的js和css

<script type="text/javascript">
monthPicker.create('month_picker', {
trigger : 'month_trigger',
autoCommit : true,
callback : function(obj){
$("#monthContainer").html('开始时间 : ' + obj.startDate + '
结束时间 : ' + obj.endDate);
}
});
</script>

四、时间段对比选择:

开始时间:2012-06-12
结束时间:2012-07-10


示例代码:(更多参数,参见用户手册)

<script type="text/javascript">
var dateRange = new pickerDateRange('date', {
isTodayValid : true,
startDate : '2012-06-12',
endDate : '2012-07-10',
needCompare : false,
defaultText : ' 至 ',
success : function(obj) {
//设置回调句柄
}
});
</script>

五、单天对比选择:

开始时间:2012-06-11
结束时间:2012-07-15


示例代码:(更多参数,参见用户手册)

<script type="text/javascript">
var dateRange = new pickerDateRange('date', {
isTodayValid : true,
startDate : '2012-06-11',
startCompareDate : '2012-07-10',
needCompare : true,
singleCompare : true,
defaultText : ' 对比 ',
success : function(obj) {
//设置回调句柄
}
});
</script>