2 instances of zii.widgets.jui.CJuiDatePicker

Hello Colleagues,

I found a strange issue whet 2 instances of zii.widgets.jui.CJuiDatePicker are used in one page.

The code is:




 <td>

	<?php 

	

	$this->widget('zii.widgets.jui.CJuiDatePicker', array(

		'name'=>'arrival',

		'value' =>(isset($_GET["arrival"])? $_GET["arrival"]: date("d-m-Y", mktime()+60*60*24)),

		'language' => Yii::app()->language,

		'options'=>array(

			'showAnim'=>'fold',

			'dateFormat' => "dd-mm-yy",

			'defaultDate' => "+1d",

			'changeMonth' => true,

			'changeYear' => true,

			'yearRange' => "2012:2015",

		),

		'htmlOptions'=>array(

			'style'=>'width:80px;'

		),

	));

	?>

</td>

<td>

	<?php 

	$this->widget('zii.widgets.jui.CJuiDatePicker', array(

		'name'=>'departure',

		'value' =>(isset($_GET["departure"])? $_GET["departure"]: date("d-m-Y", mktime()+60*60*24*<img src='http://www.yiiframework.com/forum/public/style_emoticons/default/cool.gif' class='bbc_emoticon' alt='8)' />),

		'language' => Yii::app()->language,

		'options'=>array(

			'showAnim'=>'fold',

			'dateFormat' => "dd-mm-yy",

			'defaultDate' => "+8d",

			'changeMonth' => true,

			'changeYear' => true,

			'yearRange' => "2012:2015",

		),

		'htmlOptions'=>array(

			'style'=>'width:80px;'

		),

	));

	

	?>

</td>



The issue:

If I click on the first field first calendar is displayed. After than I click in the second datepicker field without click on a day from first calendar. After a second click I expected to see second calendar displayed and do not expect to see first one even so there is no one calendar displayed.

Is there any way to have more than 1 full functional CJuiDatePicker at the same page?

Thanks in advance

I think this is a JUI bug. I’ve tried this with 2 JUI datepickers and the result was, as you described. The solution that I came up with was, to destroy the other datepicker, when a field is focused and initialize a datepicker for currently focused field.

Same here, I ended up telling customers to live with it. I haven’t searched for a solution though.

@xtan, I should try your method

Can you give an example how you destroy the first and enable the second?

Hmm look at http://jqueryui.com/demos/datepicker/#date-range it works without any problem there.

That’s weird…

I am not sure but it might be a newer version of jui?

No. I just tested, my standard datepickers have these settings. Removing all of them resolved the problem. Now I have to filter down to the culprit property / settings.


'showAnim' => 'fold',

'showOn' => 'both',

'buttonText' => Yii::t('app', 'Display calendar'),

'buttonImage' => Yii::app()->request->baseUrl . '/images/calendar.png',

'buttonImageOnly' => false,

'changeMonth' => true,

'changeYear' => true,

'showButtonPanel' => true,

'autoSize' => false,

'yearRange' => '1990:2020',

'maxDate' => '-1'

Hey guess what? It was the easiest debugging ever :) It was the first setting.

So removing


'showAnim' => 'fold',

solved my problem.

Not sure why though :blink:

I think it’s safer to avoid animations at all with datepicker.

See this open issue:

http://bugs.jqueryui.com/ticket/8393

Bennouna president!

You found it!

Thanks mate!

Now it works in my project.