User Tools

Site Tools


php:datefield

REPLACE REGULAR DATE FIELD WITH JQUERY DATEPICKER IN FORMS

12.10.2010
updated 06.05.2011

If you have a form with a date field in it, you'll deal with three not-so-nice dropdowns as in the following picture:

 Regular Date Field

TEXT FIELD + JQUERY DATEPICKER

One possible solution is to replace it with something nicer, for example a text field combined with datepicker component (jquery-UI)

In form, you should replace the widget type for the date field:

public function configure() {
    ...
    $this->widgetSchema['dob'] = new sfWidgetFormInput(array(), 
            array('class' => 'datepicker_dob','size' => 10));
    ...
}

And then, in your javascript file (of course, beside including jquery-ui files):

    ...
    $(".datepicker_dob").datepicker({ changeYear: true, changeMonth: true, yearRange: '-90:+0' });
    ...

 Datepicker result

Datepicker has some other interesting options too:

// localize your calendar
// The localization files are also available in the UI svn: http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/
$.datepicker.setDefaults($.datepicker.regional["ro"]);
// modify how the date is displayed (specific format) with another option for saving (useful for yyyy-mm-dd database requirement)
$(".datepicker_dob").datepicker("option","altFormat","yy-mm-dd" );
$(".datepicker_dob").datepicker("option","dateFormat","dd-mm-yy" );  

For accepted date formats here.

Usually, you can include all this in just one place (e.g. romanian file):

// jquery.ui.datepicker-ro.js
$().ready(function() {
    $.datepicker.regional['ro'] = {
                closeText: 'Închide',
                prevText: '« Luna precedentă',
                nextText: 'Luna următoare »',
                currentText: 'Azi',
                monthNames: ['Ianuarie','Februarie','Martie','Aprilie','Mai','Iunie',
                'Iulie','August','Septembrie','Octombrie','Noiembrie','Decembrie'],
                monthNamesShort: ['Ian', 'Feb', 'Mar', 'Apr', 'Mai', 'Iun',
                'Iul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                dayNames: ['Duminică', 'Luni', 'Marţi', 'Miercuri', 'Joi', 'Vineri', 'Sâmbătă'],
                dayNamesShort: ['Dum', 'Lun', 'Mar', 'Mie', 'Joi', 'Vin', 'Sâm'],
                dayNamesMin: ['Du','Lu','Ma','Mi','Jo','Vi','Sâ'],
                weekHeader: 'Sapt',
                dateFormat: "dd-mm-yy",
                firstDay: 1,
                isRTL: false,
                showMonthAfterYear: false,
                yearSuffix: '',
                showAnim: 'fold'
                };
    $.datepicker.setDefaults($.datepicker.regional['ro'])
});



CUSTOM DATE WIDGET

Another solution is to create a custom widget based on a input text field and jquery (somehow similar to above). This solution has the advantage to format the dates directly in the widget, needing no further processing.

The widget code below. It exemplifies the romanian date format (d-m-Y) but it can be used for others as well (or expanded in a one more general form).

apps/frontend/lib/widget/sfWidgetFormRoJqueryDate.class.php

<?php
/*
 * This file is a plugin for the symfony package.
 * Symfony Package (c) Fabien Potencier <fabien.potencier@symfony-project.com>
 * Plugin Author Cristian Năvălici <ncristian@lemonsoftware.eu>
 *
 *
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 */
 
/**
 * sfWidgetFormRoJqueryDate represents a romanian date widget rendered by JQuery UI
 * based on a text field instead of the default symfony Date type.
 *
 * This widget needs JQuery and JQuery UI to work.
 *
 * @package    symfony
 * @subpackage widget
 * @author     Cristian Năvălici <ncristian@lemonsoftware.eu>
 * @requires   sfDateTimePlugin plugin + jQuery datepicker
 */
class sfWidgetFormRoJqueryDate extends sfWidgetForm
{
   /**
    * Configures the current widget.
    *
    * Available options:
    *
    *  * date_widget: The date widget instance to use as a "base" class
    *
    * @param array $options     An array of options
    * @param array $attributes  An array of default HTML attributes
    *
    * @see sfWidgetForm
    */
    protected function configure($options = array(), $attributes = array()) {
        $this->setAttribute ('class', 'datepicker');
        $this->setAttribute ('size', '10');
    }
 
 
   /**
    * @param  string $name        The element name
    * @param  string $value       The date displayed in this widget
    * @param  array  $attributes  An array of HTML attributes to be merged with the default HTML attributes
    * @param  array  $errors      An array of errors for the field
    *
    * @return string An HTML tag string
    *
    * @see sfWidgetForm
    */
    public function render($name, $value = null, $attributes = array(), $errors = array())
    {
        if ($value) {
            $dateob = new sfDate($value);
            $rodate = $dateob->format('d-m-Y');
        } else $rodate = "";
        return $this->renderTag('input', array_merge(array('name' => $name, 'value' => $rodate), $attributes));
 
}

Using it in your forms is pretty straight forward:

Using in forms

    public function configure() {
        ...
        $this->widgetSchema['DOB'] = new sfWidgetFormRoJqueryDate(array(), array('class' => 'datepicker_dob'));
        ...

datepicker_dob is related of course to your jquery datepicker class (check below for details about the settings)

php/datefield.txt · Last modified: 2013/03/16 17:40 (external edit)