Hello,
I have two datepickers on my form to select a date range.
If I switch between them without selecting a date from the calender, the target datepicker does not show the calender at all. I have to go back to the first datepicker and select a date or click the done button.
Is there a solution to this issue ?
Thanks
Can you post your code? I’ve often used range datepickers, and I’ve just checked, I can’t reproduce the issue you mention.
Here it is:
<div class="row">
<?php echo $form->labelEx($model,'checkin'); ?>
<?php $this->widget('zii.widgets.jui.CJuiDatePicker',
array(
'attribute'=>'checkin',
'name'=>'checkin',
'model'=>$model,
'value' => $model->checkin,
'options'=> array(
'showOn'=>'both',
'buttonImage'=>Yii::app()->baseUrl.'/images/calendar.gif',
'buttonImageOnly'=>true,
'changeMonth'=>true,
'changeYear'=>true,
'showAnim'=>'fold',
'showButtonPanel'=>true,
'autoSize'=>true,
'dateFormat'=>'yy-mm-dd',
'defaultDate'=>$model->checkin,
'minDate'=> date("Y-m-d"),
'onClose'=>'js:function() {
var checkindate = $("#checkin").datepicker("getDate");
if (checkindate)
{
var d = new Date(checkindate.getFullYear(), checkindate.getMonth(),checkindate.getDate() + 1);
//$("#checkout").datepicker("option", "defaultDate", d);
$("#checkout").datepicker("option", "minDate", d);
}
}'
),
'htmlOptions'=>array(
'class'=>'date'
)
)); ?>
<?php echo $form->error($model,'checkin'); ?>
<?php echo $form->labelEx($model,'checkout'); ?>
<?php $this->widget('zii.widgets.jui.CJuiDatePicker',
array(
'attribute'=>'checkout',
'name'=>'checkout',
'model'=>$model,
'value' => $model->checkout,
'options'=> array(
'showOn'=>'both',
'buttonImage'=>Yii::app()->baseUrl.'/images/calendar.gif',
'buttonImageOnly'=>true,
'changeMonth'=>true,
'changeYear'=>true,
'showAnim'=>'fold',
'showButtonPanel'=>true,
'autoSize'=>true,
'dateFormat'=>'yy-mm-dd',
'minDate'=> date("Y-m-d"),
'defaultDate'=>$model->checkout,
),
'htmlOptions'=>array(
'class'=>'date'
)
)); ?>
<?php echo $form->error($model,'checkout'); ?>
</div>
Well there’s something different from what I use. Let’s say your model is named “Model”, I’d use the code below. Try it and tell me:
<?php $this->widget('zii.widgets.jui.CJuiDatePicker', array(
'model'=>$model,
'attribute'=>'checkin',
'name'=>'Model[checkin]',
'language'=>Yii::app()->language,
'options'=>array(
'onSelect'=>'js:function(selectedDate) {
$("#Model_checkout").datepicker("option", "minDate", selectedDate);
}',
'showAnim'=>'fold',
'showOn'=>'both',
'buttonText'=>Yii::t('ui','Full calendar'),
'buttonImage'=>$baseUrl.'/images/calendar.png',
'buttonImageOnly'=>false,
'changeMonth'=>true,
'changeYear'=>true,
'showButtonPanel'=>true,
'autoSize'=>false,
'yearRange'=>'1980:2020',
'minDate'=>'+0'
),
'htmlOptions'=>array(
'size'=>10,
'style'=>'width:80px;vertical-align:top'
),
));
?>
…
<?php $this->widget('zii.widgets.jui.CJuiDatePicker', array(
'model'=>$model,
'attribute'=>'checkout',
'name'=>'Model[checkout]',
'language'=>Yii::app()->language,
'options'=>array(
'onSelect'=>'js:function(selectedDate) {
$("#Model_checkin").datepicker("option", "maxDate", selectedDate);
}',
'showAnim'=>'fold',
'showOn'=>'both',
'buttonText'=>Yii::t('ui','Full calendar'),
'buttonImage'=>$baseUrl.'/images/calendar.png',
'buttonImageOnly'=>false,
'changeMonth'=>true,
'changeYear'=>true,
'showButtonPanel'=>true,
'autoSize'=>false,
'yearRange'=>'1980:2020',
'minDate'=>'+0'
),
'htmlOptions'=>array(
'size'=>10,
'style'=>'width:80px;vertical-align:top'
),
));
?>
Still, even your code is not working.
Interestingly, the issue doesn’t happen if I switch using the calender button/image instead of focusing on the text field.
Thank you for trying. Can you post your view after using my code?
I managed to fix the issue by changing the picker’s animation from fold to fade. This reduced the animation total time and made it close faster.
I think the problem was that the first calender takes too much time in animation to close blocking the next calender from showing at the time of switching.
Very weird issue, seems like jquery bug to me!
Thanks a lot for your help!
Nice okashino !
I had the same issue and changing the animation worked fine!
For select date rang do this.I used this in current project & it’s work…
$this->widget(‘zii.widgets.jui.CJuiDatePicker’,array(
'model'=>$model,
'attribute'=>'date_of_birth',
'options'=>array(
‘yearRange’=>‘1949:today’),// if u put ‘today’ as max date in there, it will increase automatically by year .
THANK U…
Mine did not seem to be the same problem. My Date Pickers were popping up and I could not make them disappear, even by clicking the "Done" button. But the solution was the same, and that was to set the animation from "fold" to "fade". Now the Date Picker fades away after the date is picked.
So thanks for posting this. I tried all sorts of things and this is what fixed the problem!