Yii Framework Forum: datepicker in admin.php as a filter - Yii Framework Forum

Jump to content

  • (2 Pages)
  • +
  • 1
  • 2
  • You cannot start a new topic
  • You cannot reply to this topic

datepicker in admin.php as a filter Rate Topic: -----

#1 User is offline   cappadochian 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 147
  • Joined: 02-January 11

Posted 23 March 2012 - 04:24 AM

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!
0

#2 User is offline   bettor 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 749
  • Joined: 02-February 09

Posted 23 March 2012 - 04:57 AM

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

#3 User is offline   cappadochian 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 147
  • Joined: 02-January 11

Posted 23 March 2012 - 07:31 AM

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!
0

#4 User is offline   cappadochian 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 147
  • Joined: 02-January 11

Posted 24 March 2012 - 07:11 AM

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

#5 User is offline   softark 

  • Keep It Simple
  • Yii
  • Group: Moderators
  • Posts: 2,045
  • Joined: 16-February 11
  • Location:Japan

Posted 24 March 2012 - 07:56 AM

View Postcappadochian, 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?
0

#6 User is offline   cappadochian 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 147
  • Joined: 02-January 11

Posted 25 March 2012 - 08:12 AM

View Postsoftark, 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.
0

#7 User is offline   softark 

  • Keep It Simple
  • Yii
  • Group: Moderators
  • Posts: 2,045
  • Joined: 16-February 11
  • Location:Japan

Posted 25 March 2012 - 10:08 AM

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".
1

#8 User is offline   cappadochian 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 147
  • Joined: 02-January 11

Posted 25 March 2012 - 04:36 PM

View Postsoftark, 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.
0

#9 User is offline   softark 

  • Keep It Simple
  • Yii
  • Group: Moderators
  • Posts: 2,045
  • Joined: 16-February 11
  • Location:Japan

Posted 25 March 2012 - 07:24 PM

View Postcappadochian, on 25 March 2012 - 04:36 PM, said:

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

Yes, of course.
0

#10 User is offline   cappadochian 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 147
  • Joined: 02-January 11

Posted 26 March 2012 - 03:43 AM

View Postsoftark, 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.
0

#11 User is offline   softark 

  • Keep It Simple
  • Yii
  • Group: Moderators
  • Posts: 2,045
  • Joined: 16-February 11
  • Location:Japan

Posted 26 March 2012 - 03:51 AM

Could you post your code?
0

#12 User is offline   cappadochian 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 147
  • Joined: 02-January 11

Posted 26 March 2012 - 11:15 AM

View Postsoftark, 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',
		),
	),
));

?>


0

#13 User is offline   softark 

  • Keep It Simple
  • Yii
  • Group: Moderators
  • Posts: 2,045
  • Joined: 16-February 11
  • Location:Japan

Posted 26 March 2012 - 02:18 PM

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.
1

#14 User is offline   cappadochian 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 147
  • Joined: 02-January 11

Posted 27 March 2012 - 03:11 AM

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?
0

#15 User is offline   softark 

  • Keep It Simple
  • Yii
  • Group: Moderators
  • Posts: 2,045
  • Joined: 16-February 11
  • Location:Japan

Posted 27 March 2012 - 03:52 AM

Yeah, congrats! :D

View Postcappadochian, 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/
0

#16 User is offline   cappadochian 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 147
  • Joined: 02-January 11

Posted 27 March 2012 - 05:21 AM

View Postsoftark, 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!

View Postsoftark, on 27 March 2012 - 03:52 AM, said:

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

done

View Postsoftark, 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!
0

#17 User is offline   cappadochian 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 147
  • Joined: 02-January 11

Posted 27 March 2012 - 05:28 AM

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!
0

#18 User is offline   bennouna 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 1,165
  • Joined: 05-January 12
  • Location:Morocco

Posted 27 March 2012 - 05:42 AM

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?
0

#19 User is offline   cappadochian 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 147
  • Joined: 02-January 11

Posted 27 March 2012 - 05:55 AM

View Postbennouna, 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.
0

#20 User is offline   softark 

  • Keep It Simple
  • Yii
  • Group: Moderators
  • Posts: 2,045
  • Joined: 16-February 11
  • Location:Japan

Posted 27 March 2012 - 05:59 AM

View Postbennouna, 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?
0

Share this topic:


  • (2 Pages)
  • +
  • 1
  • 2
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users