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!
can you post what you’ve tried that didn’t work
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!
for example, I have tried now edaterangepicker also. and I just get an error message…
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.
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".
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.
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.
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><</b>, <b><=</b>, <b>></b>, <b>>=</b>, <b><></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',
),
),
));
?>
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.
...
array(
'name' => 'mrsktrvd',
'filter' => $this->widget('zii.widgets.jui.CJuiDatePicker', array(
'model' => $model,
'attribute' => 'mrsktrvd',
'htmlOptions' => array(
'id' => 'datepicker_for_mrsktrvd',
'size' => '10',
),
),
true),
),
...
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?
Yeah, congrats! 
I’ve written a simple wiki article on this, please take a look at it.
http://www.yiiframework.com/wiki/318/using-cjuidatepicker-for-cgridview-filter/
What you have to do next will be
set "afterAjaxUpdate" option for the grid,
register javascript for it,
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.
I managed to do everything! your sample is very good, and it’s the first that is working for me! thank you very much!
done
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!
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!
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.
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?