How to call callback function of CJUIDatepicker

Yii 1.1 General Discussion
1

Hi,

I want to create an event section of my project and for this, I need to set start date and end date.

I have the code as




	<div class="row">

		<?php echo $form->labelEx($model,'start_date'); ?>

<?php Yii::import('application.extensions.CJuiDateTimePicker.CJuiDateTimePicker');

    $this->widget('CJuiDateTimePicker',array(

        'model'=>$model, //Model object

        'attribute'=>'start_date', //attribute name

        'mode'=>'datetime',

        'options'=>array(

            'minDate'=>0,

            'maxDate'=>30,            

            'dateFormat'=>'yy:mm:dd',

            'timeFormat'=>'hh:mm:ss'           

        ), // jquery plugin options

        'language' => ''

    ));

?>

		<?php echo $form->error($model,'start_date'); ?>

	</div>

        <script language="javascript">

            

            function enableEndDate(){

        var start_date = $('#<?php echo Chtml::activeId($model,'start_date'); ?>');

        var end_date = $('#<?php  echo Chtml::activeId($model,'end_date'); ?>'); 

        end_date.datetimepicker('minDate', (new Date()) );

        }

        </script>

	<div class="row">

		<?php echo $form->labelEx($model,'end_date'); ?>

<?php Yii::import('application.extensions.CJuiDateTimePicker.CJuiDateTimePicker');

    $this->widget('CJuiDateTimePicker',array(

        'model'=>$model, //Model object

        'attribute'=>'end_date', //attribute name

        'mode'=>'datetime', 

        'options'=>array(

            'minDate'=>0,

            'maxDate'=>30,            

            'dateFormat'=>'yy:mm:dd',

            'timeFormat'=>'hh:mm:ss'

        ), // jquery plugin options

        'language' => ''        

    ));

?>

		<?php echo $form->error($model,'end_date'); ?>

	</div>

What I want is that the end date should be set only when the start date is set. I know the callback functions of data picker but unable to know where to call them in Yii widget

Any help?

2

Hi, I have a different solution to the same issue and is mostly done by Javascript tricks.

In my case, an event also required hours to be set and for that, I included the great addon datetimepicker: http://trentrichardson.com/examples/timepicker/

Then, in my form, I added the following text fields, which they are initialized with the model values (if any) but they will be updated anyway :):




<div style="width:48%;float:left">

<?php echo $form->labelEx($model, 'start_date'); ?>

<?php echo $form->textfield($model, 'start_date', array('class'=>'datetimepicker'));?>

<div style="clear:both"></div>

<?php echo $form->error($model, 'start_date', array('class' => 'form-msg-error-advanced-big', 'style'=>'width:260px')); ?>

</div>

<div style="width:48%;float:right">

<?php echo $form->labelEx($model, 'end_date'); ?>

<?php echo $form->textfield($model, 'end_date', array('class'=>'datetimepicker'));?>

<div style="clear:both"></div>

<?php echo $form->error($model, 'end_date', array('class' => 'form-msg-error-advanced-big', 'style'=>'width:260px')); ?>

</div>

After, on the page that renders the form, I register this script to convert to datetimepicker:




$(".datetimepicker").datetimepicker({

		minDate: 0,

		timeFormat: 'hh:mm',

		hour: 20,

		minute: 00,

		showOn: "button",

		buttonImage: "images/calendar.png", // i have this image, make sure you point to the right one

		buttonImageOnly: true,

		buttonText: "choose"

	}).keypress(function(){return false;}); // I do not allow the insertion of typed dates

Finally, the code… an end_date was not allowed to be inserted before start date… so the javascript to accomplish that is the following:




$startDateId = CHtml::activeId($model, 'start_date');

$endDateId = CHtml::activeId($model, 'end_date');


Yii::app()->registerScript('datesJS',

<<<EOD

$('#{$startDateId}').datepicker('setDate','{$model->start_date}').data('datepicker').settings.onSelect = function(dateText, inst){

		var _dt = new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay, inst.settings.timepicker.hour, inst.settings.timepicker.minute);

		

		var _cdt = $('#{$endDateId}').datepicker('getDate');

		if (_cdt <= _dt){ // is bigger than start date?

			_dt.setDate(_dt.getDate()+1); // one more day

			$('#{$endDateId}').datetimepicker('setDate',_dt).datetimepicker('option','minDate',_dt);} // minimum date to select is one more day

		else $('#{$endDateId}').datetimepicker('option','minDate',_dt); // set its min date

	};

EOD

,CClientScript::POS_READY);

Hope it helps PeroChak, sorry is not full Yii…

3

Thanks Antonio

4

Hi,

I just wished to mention that

Yii::app()->registerScript(… is not enough.

Obviously this is right

Yii::app()->clientScript->registerScript( …