yii日历选取时间段
效果
如果第一个日历选择日期后,如何让第二个日历选取的日期只能是第一个日历选择的日期的后面;
如果第二个日历选择日期后,如何让第一个日历选取的日期只能是第二个日历选择的日期的前面;
代码如下:
<span id="date_pan">
从<?php $this->widget('zii.widgets.jui.CJuiDatePicker',
array(
'language'=>'zh_cn',
'model'=>$model,
'attribute'=>'startTime',
'options'=>array(
'showAnim'=>'fold',
'showOn'=>'both',
'buttonImage'=> 'http://web.safe.com/assets/default/img/calender1.png',
'buttonImageOnly'=>true,
'showAnim'=>'fold',
'showOn'=>'both',
// 'minDate'=>'new Date()',
// 'maxDate'=>date('Y-m-d',strtotime("+30 days")),
'minDate'=>date('Y-m-d', strtotime("-3 years")),
'maxDate'=>date('Y-m-d',strtotime("-1 days")),
//'yearRange'=>'0:+1',
//'changeYear'=> true,
//'changeMonth'=> true,
//'buttonImageOnly'=>true,
'dateFormat'=>'yy-mm-dd',
'altFormat'=>'yy-mm-dd',
),
'htmlOptions'=>array(
'readonly'=>'readonly',
'style'=>'width:100px;',
),
));
?>
开始,到
<?php $this->widget('zii.widgets.jui.CJuiDatePicker',
array(
'language'=>'zh_cn',
'model'=>$model,
'attribute'=>'endTime',
'options'=>array(
'showAnim'=>'fold',
'showOn'=>'both',
'buttonImage'=> 'http://web.safe.com/assets/default/img/calender1.png',//SITE_URL.yii::app()->theme->baseUrl.HT_IMG_URL.'calendar.png',
// 'minDate'=>'new Date()',//当前日期
'minDate'=>date('Y-m-d', strtotime("-3 years")),
// 'maxDate'=>date('Y-m-d',strtotime("+12 months")),//当前日期后12个月
'maxDate'=>date('Y-m-d', strtotime("+0 days")),
//'yearRange'=>'0:+1',
//'changeYear'=> true,
//'changeMonth'=> true,
//'buttonImageOnly'=>true,
'dateFormat'=>'yy-mm-dd',
'altFormat'=>'yy-mm-dd',
),
'htmlOptions'=>array(
'readonly'=>'readonly',
'style'=>'width:100px;',
),
));
?>结束
</span>
<script type="text/javascript">
$(document).ready(function(){ //如果选择了开始时间 如2017-04-10,结果时间开始的选项加一天开始选择 2017-04-11
$("#model_startTime").change(function(){
var d1 = $("#model_startTime").val();
d1 = d1.replace(/-/g,"/");
var d2 = new Date(d1);
d2.setTime(d2.getTime()+24*60*60*1000);
var s = d2.getFullYear()+"-" + (d2.getMonth()+1) + "-" + d2.getDate();
$("#model_endTime").datepicker('option', 'minDate', s);
});
});
$(document).ready(function(){ //如果选择了结束时间 如2017-04-10,开始时间开始的选项结束时间 2017-04-09
$("#model_endTime").change(function(){
var d1 = $("#SearchTrTools_endTime").val();
d1 = d1.replace(/-/g,"/");
var d2 = new Date(d1);
d2.setTime(d2.getTime()-24*60*60*1000);
var s = d2.getFullYear()+"-" + (d2.getMonth()+1) + "-" + d2.getDate();
$("#model_startTime").datepicker('option', 'maxDate', s);
});
});
</script>