Using Date Picker when updating

I have looked through about 50 forum posts concerning issues with "date picker", but have not found posts addressing the issue that I have had. The closest one I found was this one: DatePicker submit date onselect, but I am not sure it is exactly the same, so I am posting details about my issue and what I have used for a work-around. In brief, the problem that I have tried to solve is to use the CJuiDatePicker for picking a date and have the initial date displayed from the database in the text box associated with the CJuiDatePicker. From my initial testing it was an either/or - either use the CJuiDatePicker OR display the initial date from the database, but not both at the same time (assuming that I wanted to also save any changes back to the database after clicking the Submit button).

So the first thing I did was to use gii to create a model, crud and controller for a class that I called Myitem. It has several different types of fields. The one that is of interest here is the date_val field that is of type ‘date’ in the MySQL database. For the _form.php, by default the following text field is generated by gii:




<div class="row">

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

<?php echo $form->textField($model,'date_val'); ?>

</div>



That works fine for displaying the current value from the database and for updating the Myitem fields in the database with a new date value when using keyboard text input.

So now I replace the date_val input box with the date picker widget and have the following.




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

<?php 

  Yii::import('application.extensions.CJuiDatePicker.CJuiDatePicker');

  $this->widget('zii.widgets.jui.CJuiDatePicker', array(

	        'model'=>Myitem::model(),   // model object

		'attribute'=>'date_val',

		'value'=>$model->date_val,

		'options'=>array('autoSize'=>true,

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

                    'defaultDate'=>$model->date_val,

                    'buttonImage'=>Yii::app()->baseUrl.'/images/icons.date.png',

                    'buttomImageOnly'=>true,

                    'buttonText'=>'Select',

                    'showAnim'=>'fold',

                    'showOn'=>'button',

                    'showButtonPanel'=>true,

                    'yearRange'=>'1900',

                ),

		'language'=>'en-AU',

           ));

?>



This code works fine for popping up a calendar widget and setting the value in the text box from the calendar widget and then saving it back to the database after submit. However, the problem is that the text box does not initially show the current value of the date_val from the database. The text box for the date_val associated with the widget is initially blank.

Now if I use the following code for the widget, using ‘name’ instead of the ‘model’ and ‘attribute’, then the text box DOES initially display the date value from the database in the text box (as in the default input box generated by gii, shown in the first code above).




  $this->widget('zii.widgets.jui.CJuiDatePicker', array(

    'name'=>'date_val',

    'value'=>$model->date_val,

    'options'=>array('dateFormat'=>'yy-mm-dd',

                    'defaultDate'=>$model->date_val,

                    'yearRange'=>'1900',

                    ),

    'language'=>'en-AU',

  ));



However, in this case when I save a value that is selected from the widget, the new value does not get saved back to the database upon update.

But I want to both display the initial value from the database and save any new value back to the database upon update.

So what I have done is to create a workaround for the first case with the date picker widget. With the initial display of the form, I go ahead and display the date_val text box with the button for the date widget, and then use javascript to fill the value for the date_val textbox from the database. The code for the first part of this is as follows (same as above except I just add setting the $date_val).




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

<?php 

  Yii::import('application.extensions.CJuiDateTimePicker.CJuiDateTimePicker');

  $this->widget('zii.widgets.jui.CJuiDatePicker', array(

	        'model'=>Myitem::model(),   // model object

		'attribute'=>'date_val',

		'value'=>$model->date_val,

		'options'=>array('autoSize'=>true,

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

                    'defaultDate'=>$model->date_val,

                    'buttonImage'=>Yii::app()->baseUrl.'/images/icons.date.png',

                    'buttomImageOnly'=>true,

                    'buttonText'=>'Select',

                    'showAnim'=>'fold',

                    'showOn'=>'button',

                    'showButtonPanel'=>true,

                    'yearRange'=>'1900',

                ),

		'language'=>'en-AU',

           ));


    $date_val = $model->date_val;

?>



And then at the end of the file I add the following javascript.




<script type="text/javascript">

    function fillVals() {

      //  Set widget with actual value

      var x = document.getElementById("Myitem_date_val");

      x.value='<?php echo $date_val; ?>';

    }

</script>


<script>

  window.onload=fillVals();  

</script>



I am pretty new to Yii, so this may be the long way around something that I am not setting correctly somewhere. If so, I would love to hear about a better way to do this. But if someone else is running into this same issue, I thought that it could be helpful to share what is working for me.

I think if you change this line:


'model'=>Myitem::model(),   // model object

to this:


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

then you will not need that javascript.

Thanks, Joshua, for the advice. Indeed your suggestion fixes the problem.

Now I am facing another issue that is related and I am using the same solution, so I am just adding on to this thread rather than re-posting all of the code in the first post. In this case, it has to do with the formatting of the date. I am using MySQL, which prefers the date format of Y-m-d (PHP formatting). However, my users want a format of ‘dd-M-yy’ (Javascript formatting), or something like ‘31-Oct-2012’.

I can use the following for the CJuiDatePicker widget:




  $this->widget('zii.widgets.jui.CJuiDatePicker', array(

    'model'     => $model,

    //  Use Javascript format for datetime here

    'options'   => array(

       'showAnim' => 'fold',

       'dateFormat' => 'dd-M-yy',

       'altFormat' => 'dd-M-yy'

    ),

    'language'  => 'en-AU',

    'attribute' => 'mydate',

    'id'        => 'mydate', 

    ));




And so when the date picker popup is selected and displays a date, then after the user selects it, it is shown in the textbox in ‘dd-M-yy’ format.

The problem is the initial display of the date in the text box. It apparently uses by default the format from the database, which is ‘yyyy-mm-dd’.

As an example, if I have a date stored in the database of ‘2012-12-29’, then it initially displays in the text box for that date as ‘2012-12-29’. If I use the CJuiDatePicker to pick that date, then it displays as ‘29-Dec-2012’. The problem is that I want the date to display initially as ‘29-Dec-2012’.

One way to do this is to use the javascript discussed in the initial post to populate the textbox using the desired date format. But, as before, this seems like a hack. Does anyone else have a better solution?

I have used the following codes[b]

My view[/b]


<div class="row">

	<label style="font-size:16px;"><b> <?php echo $form->labelEx($model,'date'); ?>

	<?php

		$this->widget('zii.widgets.jui.CJuiDatePicker', array(

 		'model'=>$model,

  		'attribute'=>'date',

  		'value'=>$model->date,

  		// additional javascript options for the date picker plugin

  		'options'=>array(

    	'showAnim'=>'fold',

    	'showButtonPanel'=>true,

    	'autoSize'=>true,

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

    	'defaultDate'=>$model->date,

   ),

));

?>

	

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

	</div>

[b]

My model rules[/b]


array('date', 'type', 'type' => 'date', 'message' => '{attribute}: is not a date!', 'dateFormat' => 'yyyy-MM-dd'),