Date Picker by examples

You are viewing revision #2 of this wiki article.
This version may not be up to date with the latest version.
You may want to view the differences to the latest version or see the changes made in this revision.

« previous (#1)next (#3) »

CJuiDatePicker displays a datepicker. CJuiDatePicker encapsulates the JUI datepicker plugin.

Yii CJuiDatePicker: Default

cjui datepicker

<h1>Yii CJuiDatePicker: Default</h1>
 <script>
  $(function() {    
    $( "#anim" ).change(function() {
      $( "#datepicker" ).datepicker( "option", "showAnim", $( this ).val() );
    });
  });
  </script>
  <p>Animations:<br>
	<select id="anim">
		<option value="show">Show (default) => show</option>
		<option value="slideDown">Slide down => slideDown</option>
		<option value="fadeIn">Fade in => fadeIn</option>
		<option value="blind">Blind (UI Effect) => blind</option>
		<option value="bounce">Bounce (UI Effect) => bounce</option>
		<option value="clip">Clip (UI Effect) => clip</option>
		<option value="drop">Drop (UI Effect) => drop</option>
		<option value="fold">Fold (UI Effect) => fold</option>
		<option value="slide">Slide (UI Effect) => slide</option>
		<option value="">None</option>
	</select>
</p>
<?php
$this->widget('zii.widgets.jui.CJuiDatePicker',array(
    'name'=>'datepicker',
    // additional javascript options for the date picker plugin
    'options'=>array(
        'showAnim'=>'slide',//'slide','fold','slideDown','fadeIn','blind','bounce','clip','drop'
    ),
    'htmlOptions'=>array(
        'style'=>'height:20px;background-color:green;color:white;',
    ),
));
?>

Yii CJuiDatePicker: Inline

<h1>Yii CJuiDatePicker: Inline</h1>
<?php
$this->widget('zii.widgets.jui.CJuiDatePicker',array(
    'name'=>'datepicker-Inline',
    'flat'=>true,//remove to hide the datepicker
    'options'=>array(
        'showAnim'=>'slide',//'slide','fold','slideDown','fadeIn','blind','bounce','clip','drop'
    ),
    'htmlOptions'=>array(
        'style'=>''
    ),
));
?>

Yii CJuiDatePicker: Show/Select Other Month Dates

<h1>Yii CJuiDatePicker: Show/Select Other Month Dates</h1>
<?php
$this->widget('zii.widgets.jui.CJuiDatePicker',array(
    'name'=>'datepicker-other-month',
    'flat'=>true,//remove to hide the datepicker
    'options'=>array(
        'showAnim'=>'slide',//'slide','fold','slideDown','fadeIn','blind','bounce','clip','drop'
        'showOtherMonths'=>true,// Show Other month in jquery
        'selectOtherMonths'=>true,// Select Other month in jquery
    ),
    'htmlOptions'=>array(
        'style'=>''
    ),
));
?>

Yii CJuiDatePicker: Display Button Bar(showButtonPanel)

Yii CJuiDatePicker: Display Button Bar(showButtonPanel)

  1. Yii CJuiDatePicker: Default
  2. Yii CJuiDatePicker: Inline
  3. Yii CJuiDatePicker: Show/Select Other Month Dates
  4. Yii CJuiDatePicker: Display Button Bar(showButtonPanel)
  5. Yii CJuiDatePicker: Display Month & Year Menus
  6. Yii CJuiDatePicker: Display Multiple Months
  7. Yii CJuiDatePicker: Date Format
  8. Yii CJuiDatePicker: Date Range
<?php
$this->widget('zii.widgets.jui.CJuiDatePicker',array(
    'name'=>'datepicker-showButtonPanel',
    'value'=>date('d-m-Y'),    
    'options'=>array(
        'showAnim'=>'slide',//'slide','fold','slideDown','fadeIn','blind','bounce','clip','drop'
        'showButtonPanel'=>true,
    ),
    'htmlOptions'=>array(
        'style'=>''
    ),
));
?>

Yii CJuiDatePicker: Display Month & Year Menus

<h1>Yii CJuiDatePicker: Display Month & Year Menus</h1>
<?php
$this->widget('zii.widgets.jui.CJuiDatePicker',array(
    'name'=>'datepicker-month-year-menu',
    'flat'=>true,//remove to hide the datepicker
    'options'=>array(
	    'dateFormat' => 'yy-mm-dd',
        'showAnim'=>'slide',//'slide','fold','slideDown','fadeIn','blind','bounce','clip','drop'
        'changeMonth'=>true,
        'changeYear'=>true,
        'yearRange'=>'2000:2099',
        'minDate' => '2000-01-01',      // minimum date
        'maxDate' => '2099-12-31',      // maximum date
    ),
    'htmlOptions'=>array(
        'style'=>''
    ),
));
?>

Yii CJuiDatePicker: Display Multiple Months

<h1>Yii CJuiDatePicker: Display Multiple Months</h1>
<?php
$this->widget('zii.widgets.jui.CJuiDatePicker',array(
    'name'=>'datepicker-multiple-month',
    'flat'=>true,//remove to hide the datepicker
    'options'=>array(        
        'numberOfMonths'=>2,
        'showButtonPanel'=>true,
    ),
    'htmlOptions'=>array(
        'style'=>''
    ),
));
?>

Yii CJuiDatePicker: Date Format

<h1>Yii CJuiDatePicker: Date Format</h1>
<script>
  $(function() {
    $( "#date-format" ).change(function() {
      $( "#datepicker-date-format" ).datepicker( "option", "dateFormat", $( this ).val() );
    });
  });
  </script>
<p>Format options:<br />
  <select id="date-format">
    <option value="mm/dd/yy">Default - mm/dd/yy</option>
    <option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option>
    <option value="d M, y">Short - d M, y</option>
    <option value="d MM, y">Medium - d MM, y</option>
    <option value="DD, d MM, yy">Full - DD, d MM, yy</option>
    <option value="'day' d 'of' MM 'in the year' yy">With text - 'day' d 'of' MM 'in the year' yy</option>
  </select>
</p>
<?php
$this->widget('zii.widgets.jui.CJuiDatePicker',array(
    'name'=>'datepicker-date-format',    
    'value'=>date('d/m/Y'),
    'options'=>array(        
        'showButtonPanel'=>true,
        'dateFormat'=>'mm/dd/yy',//Date format 'mm/dd/yy','yy-mm-dd','d M, y','d MM, y','DD, d MM, yy'
    ),
    'htmlOptions'=>array(
        'style'=>''
    ),
));
?>

Yii CJuiDatePicker: Date Range

<h1>Yii CJuiDatePicker: Date Range</h1>
<?php
$this->widget('zii.widgets.jui.CJuiDatePicker',array(
    'name'=>'datepicker-min-max',    
    'value'=>date('d-m-Y'),
    'options'=>array(        
        'showButtonPanel'=>true,
        'minDate'=>-5,
        'maxDate'=>"+1M +5D",
    ),
    'htmlOptions'=>array(
        'style'=>''
    ),
));
?>

Reference: