Yii 1.1: fjuidatepicker

DatePicker input control, can be used standalone or combined to allow user select date range.

Use in pair to support date range input without JS validation for start < end. Also can be used in CGridView as a filter input.


No special requirement except that we test this widget on Yii 1.1.3


Use in CGridView as usual. This widget fix a JS event binding bug caused when the grid is updated by Ajax filter.

Allow user to select a date range: set the range property in both start date and end date widget to the same value (see sample below).

<div class="row">
        <label>Period start</label>
        <?php $this->widget('FJuiDatePicker', array('model'=>$model, 'attribute'=>'period_start', 'range' => 'eval_period')); ?>
    <div class="row">
        <label>Period end</label>
        <?php $this->widget('FJuiDatePicker', array('model'=>$model, 'attribute'=>'period_end', 'range' => 'eval_period')); ?>

Total 4 comments

#4387 report it
Johnatan at 2011/07/04 10:21am
Patch by wiseloren doesn't work with CGridView.

The patch offered by wiseloren doesn't work properly as filter in CGridView and that's basically the main idea of this extension. When CGridView renews the body the filter with datapicker stops working. The only thing worth taking from wiseloren´s patch is clean init() method and clean js code.

#3684 report it
angelo noguera at 2011/04/27 03:36pm
how to use in a CGridView

Please, how to use this extension how a filter to CGridView?

#3050 report it
cs24 at 2011/03/10 07:20am
It recommend changing init and run to the above

good extension .Thnx wiseloren ;)

#2475 report it
Loren at 2011/01/06 07:44pm
Code Changes

I recommend changing init and run to the below: I removed the setting overrides in the init function and changed run to do settings and then call the parent function. I also removed the commented out java that required the date format variable.

public function init() {
    public function run()
        if ($this->range != '') {
            $this->options['beforeShow'] = <<<EOD
js:function(input, inst) {
    $('.hasDatepicker.{$this->range}').each(function(index, elm){
        if (index == 0) from = elm;
        if (index == 1) to = elm;
    if (to.id == input.id) to = null;
    if (from.id == input.id) from = null;
    if (to) {
        //this one is a 'from' date
        maxDate = $(to).val();
        if (maxDate)
            $(inst.input).datepicker("option", "maxDate", maxDate);
    if (from) {
        //this one is a 'to' date
        minDate = $(from).val();
        if (minDate)
            $(inst.input).datepicker("option", "minDate", minDate);
            $this->range = ' '.$this->range;
            if (isset($this->htmlOptions['class']))

Leave a comment

Please to leave your comment.

Create extension
  • Yii Version: 1.1
  • License: Other Open Source License
  • Developed by: Hudson Nguyen
  • Category: Date and Time
  • Votes: +6
  • Downloaded: 1,789 times
  • Created on: Dec 28, 2010
  • Last updated: Dec 28, 2010
  • Tags: date, datepicker