From: <input type="text" name="date_from" id="date_from" /> To: <input type="text" name="date_to" id="date_to" />
<?php
$this->widget('zii.widgets.jui.CJuiDatePicker', array(
'name' => 'date_from',
// additional javascript options for the date picker plugin
'options' => array(
'showAnim' => "slideDown",
'changeMonth' => true,
'numberOfMonths' => 1,
'showOn' => "button",
'buttonImageOnly' => false,
'dateFormat' => "yy-mm-dd",
'showButtonPanel' => true,
'onClose' => 'js:function(selectedDate) { $("#date_to").datepicker("option", "minDate", selectedDate); }',
)
));
$this->widget('zii.widgets.jui.CJuiDatePicker', array(
'name' => 'date_to',
// additional javascript options for the date picker plugin
'options' => array(
'showAnim' => "slideDown",
'changeMonth' => true,
'numberOfMonths' => 1,
'showOn' => "button",
'buttonImageOnly' => false,
'dateFormat' => "yy-mm-dd",
'showButtonPanel' => true,
'onClose' => 'js:function(selectedDate) { $("#date_from").datepicker("option", "maxDate", selectedDate); }',
)
));
?>
Los parámetros son similares que el de JavaScript, como el siguiente código:
<script type="text/javascript">
$(function() {
$("#date_from").attr('value', getTodayDate);
$("#date_from").datepicker({
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
showOn: "button",
buttonImageOnly: false,
showAnim: "slideDown",
dateFormat: "yy-mm-dd",
onClose: function(selectedDate) {
$("#date_to").datepicker("option", "minDate", selectedDate);
}
});
$("#date_to").datepicker({
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
showOn: "button",
buttonImageOnly: false,
showAnim: "slideDown",
dateFormat: "yy-mm-dd",
onClose: function(selectedDate) {
$("#date_from").datepicker("option", "maxDate", selectedDate);
}
});
});
</script>
Ejemplo en JavaScript pueden verlo aquí: http://jsfiddle.net/wimarbueno/fpT6q/Documentación: http://www.yiiframework.com/doc/api/1.1/CJuiDatePicker