[cappadochian]

Hi!

I have a basic CRUD for a simple mysql table. I would like to use a datepicker (no matter wich one) for a field in protected\views\project\admin.php as a filter.
I'm new to yii and I have searched and tried a lot of different types but none of them was working.
Can you please help me a little bit with that? How to make it to make it work?

Thanks a lot!

[bettor]

can you post what you've tried that didn't work

[cappadochian]

hi!

I was playing with CJuiDatePicker here link (it's in hungarian), and here link, then I was looking for other types of datepickers and tried almost all I could find, unfortunately I don't really remember all of them, sorry. One more! fjuidatepicker, and I was also trying edatepicker. Only error messages came up...

I don't care wich one, I just need a working method.
Thanks a lot!

[cappadochian]

for example, I have tried now edaterangepicker also. and I just get an error message...

[softark]

cappadochian, on 23 March 2012 - 04:24 AM, said:

I have a basic CRUD for a simple mysql table. I would like to use a datepicker (no matter wich one) for a field in protected\views\project\admin.php as a filter.

What do you exactly mean by "a filter"?
Do you refer it to an inline filter just below the grid header, or an input field in the "advanced search" form that is initially hidden?

[cappadochian]

softark, on 24 March 2012 - 07:56 AM, said:

What do you exactly mean by "a filter"?
Do you refer it to an inline filter just below the grid header, or an input field in the "advanced search" form that is initially hidden?

in admin.php there are textboxes for each field to filter table records. there I would like to use a datepicker instead of typing the date type field.

[softark]

If you mean the inline filter below the grid header, the first step will be like this ...

$this->widget('zii.widgets.grid.CGridView', array(
	'dataProvider' => $model->search(),
	'filter' => $model,
	'columns' => array(
		...
		array(
			'name' => 'some_date',
			'filter' => $this->widget('zii.widgets.jui.CJuiDatePicker',
				array('model'=>$model, 'attribute'=>'some_date'), true),
		),
		...

The code above will turn the textfield into a datepicker, JUST FOR THE FIRST TIME.
It will return to a normal textield after you have done something(sorting, filtering, or moving to another page...).

We have to convert the textfield into a datepicker every time after the ajax has updated the grid.
So, try the following ...

$this->widget('zii.widgets.grid.CGridView', array(
	'dataProvider' => $model->search(),
	'filter' => $model,
	'afterAjaxUpdate' => 'reInstallDatepicker',
	'columns' => array(
		...
		array(
			'name' => 'some_date',
			'filter' => $this->widget('zii.widgets.jui.CJuiDatePicker', array(
				'model' => $model, 
				'attribute' => 'some_date', 
				'htmlOptions' => array(
					'id' => 'datepicker_for_some_date',
					'size' => '10',
				),
				'defaultOptions' => array(
					'showOn' => 'focus', 
					'dateFormat' => 'yy/mm/dd',
					'showOtherMonths' => true,
					'selectOtherMonths' => true,
					'changeMonth' => true,
					'changeYear' => true,
					'showButtonPanel' => true,
				)
			), 
			true),
		),
		...
));

Yii::app()->clientScript->registerScript('for-date-picker',"
function reInstallDatepicker(id, data){
	$('#datepicker_for_some_date').datepicker();
}
");

This will bring you something close to your needs, I hope.

Note: You may want to give some option parameters to the datepicker. You have to do it in the initial widget call and also in the javascript function call of datepicker().

[EDIT]
I'm sorry. I've made a mistake in the original post and updated the sample code.

Note: You may want to give some option parameters to the datepicker. You can do it with the initial widget call using "defaultOptions".

[cappadochian]

softark, on 25 March 2012 - 10:08 AM, said:

If you mean the inline filter below the grid header, the first step will be like this ...

$this->widget('zii.widgets.grid.CGridView', array(
	'dataProvider' => $model->search(),
	'filter' => $model,
	'columns' => array(
		...
		array(
			'name' => 'some_date',
			'filter' => $this->widget('zii.widgets.jui.CJuiDatePicker',
				array('model'=>$model, 'attribute'=>'some_date'), true),
		),
		...

The code above will turn the textfield into a datepicker, JUST FOR THE FIRST TIME.

No I'm sorry, maybe I'm too beginner, but for me it's not popping up.
Should I change 'some_date' to my original date field name? because with 'some_date' I only get error that it's not defined.

[softark]

cappadochian, on 25 March 2012 - 04:36 PM, said:

Should I change 'some_date' to my original date field name?

Yes, of course.

[cappadochian]

softark, on 25 March 2012 - 07:24 PM, said:

Yes, of course.

okay, first step:

                array(
                        'name' => 'some_date',
                        'filter' => $this->widget('zii.widgets.jui.CJuiDatePicker',
                                array('model'=>$model, 'attribute'=>'some_date'), true),
                ),

second step: change variable name.

it still doesn't popping up... not even for the first time.

[softark]

Could you post your code?

[cappadochian]

softark, on 26 March 2012 - 03:51 AM, said:

Could you post your code?

<?php
$this->breadcrumbs=array(
	'Mrsk2s'=>array('index'),
	'Manage',
);

$this->menu=array(
	array('label'=>'List Mrsk2', 'url'=>array('index')),
	array('label'=>'Create Mrsk2', 'url'=>array('create')),
);

Yii::app()->clientScript->registerScript('search', "
$('.search-button').click(function(){
	$('.search-form').toggle();
	return false;
});
$('.search-form form').submit(function(){
	$.fn.yiiGridView.update('mrsk2-grid', {
		data: $(this).serialize()
	});
	return false;
});
");
?>

<h1>Manage Mrsk2s</h1>

<p>
You may optionally enter a comparison operator (<b>&lt;</b>, <b>&lt;=</b>, <b>&gt;</b>, <b>&gt;=</b>, <b>&lt;&gt;</b>
or <b>=</b>) at the beginning of each of your search values to specify how the comparison should be done.
</p>

<?php echo CHtml::link('Advanced Search','#',array('class'=>'search-button')); ?>
<div class="search-form" style="display:none">
<?php $this->renderPartial('_search',array(
	'model'=>$model,
)); ?>
</div><!-- search-form -->

<?php $this->widget('zii.widgets.grid.CGridView', array(
	'id'=>'mrsk2-grid',
	'dataProvider'=>$model->search(),
	'filter'=>$model,
	'columns'=>array(
		'mrsid',
		/*
		'mro',
		'mrssz',
		'mrspzc',
		'mrsvi',
		'mrsd',
		'mrsszh',
		'mrsfcsz',
		'mrscsz',
		'mrstkn',
		'mrsszn',
		'mrsdb',
		'mrsktrvd',
		*/

		array(
			'name' => 'mrsktrvd',
			'htmlOptions' => array('id'=>'datepicker_for_mrsktrvd'),
			'filter' => $this->widget('zii.widgets.jui.CJuiDatePicker',
					array('model'=>$model, 'attribute'=>'mrsktrvd'), true),
                ),
		array(
			'class'=>'CButtonColumn',
		),
	),
));

?>

[softark]

I'm sorry, there was one more mistake in my sample code

                ...
		array(
			'name' => 'mrsktrvd',
			/* 'htmlOptions' => array('id'=>'datepicker_for_mrsktrvd'), */
			'filter' => $this->widget('zii.widgets.jui.CJuiDatePicker',
					array('model'=>$model, 'attribute'=>'mrsktrvd'), true),
                ),
                ...

I was setting 'id' for the 'column', it's not appropriate.

But, even with that mistake, the code should work. In fact, it's working in my environment.
Click the text field of 'mrsktrvd', then the datepicker will popup. No ?
If not, I don't know what's wrong.

1) Would you please try it again with this one?

                ...
		array(
			'name' => 'mrsktrvd',
			'filter' => $this->widget('zii.widgets.jui.CJuiDatePicker', array(
				'model' => $model, 
				'attribute' => 'mrsktrvd', 
				'htmlOptions' => array(
					'id' => 'datepicker_for_mrsktrvd',
					'size' => '10',
				),
			), 
			true),
		),
                ...

2) And clear your assets folder, and try it again, please.

[cappadochian]

yeeeeeeeeeeeeeeeah!

it's working!
with this one:

                ...
                array(
                        'name' => 'mrsktrvd',
                        'filter' => $this->widget('zii.widgets.jui.CJuiDatePicker', array(
                                'model' => $model, 
                                'attribute' => 'mrsktrvd', 
                                'htmlOptions' => array(
                                        'id' => 'datepicker_for_mrsktrvd',
                                        'size' => '10',
                                ),
                        ), 
                        true),
                ),
                ...

you are GREAT!

what's the next step?

[softark]

Yeah, congrats!

cappadochian, on 27 March 2012 - 03:11 AM, said:

what's the next step?

I've written a simple wiki article on this, please take a look at it.
http://www.yiiframew...ridview-filter/

What you have to do next will be
1) set "afterAjaxUpdate" option for the grid,
2) register javascript for it,
3) and set the datepicker's options according to your needs and taste.
... You may want to see the documents of jQuery UI Datepicker to set those options.
http://jqueryui.com/demos/datepicker/

[cappadochian]

softark, on 27 March 2012 - 03:52 AM, said:

I've written a simple wiki article on this, please take a look at it.
http://www.yiiframew...ridview-filter/

I managed to do everything! your sample is very good, and it's the first that is working for me! thank you very much!

softark, on 27 March 2012 - 03:52 AM, said:

What you have to do next will be
1) set "afterAjaxUpdate" option for the grid,

done

softark, on 27 March 2012 - 03:52 AM, said:

2) register javascript for it,

I have only one minor issue, that for the second time when I choose a different date, the dateformat is not good.
I have tried this:

Yii::app()->clientScript->registerScript('re-install-date-picker', "
function reinstallDatePicker(id, data) {
    $('#datepicker_for_mrsktrvd').datepicker(jQuery.datepicker.regional['hu'],{'dateFormat':'yy-mm-dd'});
}
");

but still not good (it's yy.mm.dd instead of yy-mm-dd).
Do you have any ideas what should I change?
Thanks a lot!

[cappadochian]

I've managed to fix it with this:

'afterAjaxUpdate' => "function() {
jQuery('#datepicker_for_mrsktrvd').datepicker(jQuery.extend(jQuery.datepicker.regional['hu'],
{'dateFormat':'yy-mm-dd', 'showWeek':'true'}));
}",

Thanks a lot!

[bennouna]

Just a comment: I admire your perseverance to make things always work the Yii way, but sometimes isn't it just easier to do it directly in jQuery, especially that you're bound to add some jQuery when you deal Ajax?

[cappadochian]

bennouna, on 27 March 2012 - 05:42 AM, said:

Just a comment: I admire your perseverance to make things always work the Yii way, but sometimes isn't it just easier to do it directly in jQuery, especially that you're bound to add some jQuery when you deal Ajax?

I'm a very beginner, so I accept every solution. I absolutely don't mind to have an easier solution instead of Yii way. In fact I didn't even know that my solution is a Yii way or what, I just could it figure it out from tiny knowledge what I had in my mind.

[softark]

bennouna, on 27 March 2012 - 05:42 AM, said:

Just a comment: I admire your perseverance to make things always work the Yii way, but sometimes isn't it just easier to do it directly in jQuery, especially that you're bound to add some jQuery when you deal Ajax?

Yes, definitely.
I feel CJui series of widgets sometimes make things much more complicated and harder to handle. They make my head hazy.
And I have an inclination to avoid things like 'ajaxLink' and 'ajaxButton'.
You too?