User Tools

Site Tools


php:datefield

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

php:datefield [2013/03/16 17:40] (current)
Line 1: Line 1:
 +==== 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:
 +
 +{{:​php:​sy_regular_date_field.jpg| Regular Date Field }} 
 +
 +
 +=== TEXT FIELD + JQUERY DATEPICKER ===
 +
 +One possible solution is to replace it with something nicer, for example a text field combined with [[http://​jqueryui.com/​demos/​datepicker/​ | datepicker]] component (jquery-UI)
 +
 +
 +In form, you should replace the widget type for the date field:
 +
 +<code php>
 +public function configure() {
 +    ...
 +    $this->​widgetSchema['​dob'​] = new sfWidgetFormInput(array(), ​
 +            array('​class'​ => '​datepicker_dob','​size'​ => 10));
 +    ...
 +}
 +</​code>​
 +
 +
 +And then, in your javascript file (of course, beside including jquery-ui files):
 +
 +<code javascript>​
 +    ...
 +    $("​.datepicker_dob"​).datepicker({ changeYear: true, changeMonth:​ true, yearRange: '​-90:​+0'​ });
 +    ...
 +</​code>​
 +
 +{{:​php:​datepicker_date_field.jpg| Datepicker result }}
 +
 +
 +Datepicker has some other interesting options too:
 +
 +<code javascript>​
 +// 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"​ );  ​
 +</​code>​
 +
 +For accepted date formats [[http://​docs.jquery.com/​UI/​Datepicker/​formatDate | here]].
 +
 +
 +Usually, you can include all this in just one place (e.g. romanian file):
 +
 +<code javascript>​
 +// jquery.ui.datepicker-ro.js
 +$().ready(function() {
 +    $.datepicker.regional['​ro'​] = {
 +                closeText: '​Închide',​
 +                prevText: '&​laquo;​ Luna precedentă',​
 +                nextText: 'Luna următoare &​raquo;',​
 +                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'​])
 +});
 +</​code>​
 +
 +\\ 
 +
 +----
 +
 +=== 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). \\ 
 +
 +<code php | 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));​
 +  ​
 +}
 +</​code>​
 +
 +Using it in your forms is pretty straight forward:
 +
 +<code php | Using in forms>
 +    public function configure() {
 +        ...
 +        $this->​widgetSchema['​DOB'​] = new sfWidgetFormRoJqueryDate(array(),​ array('​class'​ => '​datepicker_dob'​));​
 +        ...
 +</​code>​
 +
 +//​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)