sfWidgetFormDateJQueryUI date format

You want to use the sfWidgetFormDateJQueryUI widget but you cannot configure it to display the date in your culture ?

I had the same problem, and there is what I did to fix it.

I start to override the sfWidgetFormDateJQueryUI class to add a “format_date” option. Add a new class here lib/widget/adinWindgetFormDateJQueryUI.class.php and override the configure fonction to add the format_date option.

 protected function configure($options = array(), $attributes = array())
  {
    $this->addOption('format_date', null);
    parent::configure($options, $attributes);
  }

In the render function, format the value

   if($this->getOption('format_date') != null){
        $dateFormat = new sfDateFormat();
        $value = $dateFormat->format($value, $this->getOption('format_date'));
    }

(The complete class source is at the end of this post.)

In your formClass, configure the widget :

class DemandeForm extends BaseDemandeForm
{
    public function configure()
    {
       $this->widgetSchema['date_creation'] = new adinWidgetFormDateJQueryUI(
                array("change_month" => true, 
                      "change_year" => true, 
                      "culture" => 'fr', 
                      "show_button_panel" => true, 
                      "format_date" => 'dd/MM/y' //define here format
                      )
                 );

        $this->validatorSchema['date_creation'] = new sfValidatorDate(   
                array("date_format" => '~(?P<day>\d{2})/(?P<month>\d{2})/(?P<year>\d{4})~' , //regex,
                      "date_output" => "Y-m-d",  //format the value after validation to send to BDD
                      "required" => true
                      )
                 );
    }
}

Here the complete adinWidgetFormDateJQueryUI source code

<?php
class adinWidgetFormDateJQueryUI extends sfWidgetFormDateJQueryUI
{
 protected function configure($options = array(), $attributes = array())
  {
    $this->addOption('format_date', null);
    parent::configure($options, $attributes);
  }

  /**
   * @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())
  {
    $attributes = $this->getAttributes();

    $input = new sfWidgetFormInput(array(), $attributes);

   if($this->getOption('format_date') != null){
        $dateFormat = new sfDateFormat();
        $value = $dateFormat->format($value, $this->getOption('format_date'));
    }
    $html = $input->render($name, $value);

    $id = $input->generateId($name);
    $culture = $this->getOption('culture');
    $cm = $this->getOption("change_month") ? "true" : "false";
    $cy = $this->getOption("change_year") ? "true" : "false";
    $nom = $this->getOption("number_of_months");
    $sbp = $this->getOption("show_button_panel") ? "true" : "false";

    if ($culture!='en')
    {
    $html .= <<<EOHTML
<script type="text/javascript">
        $(function() {
    var params = $.datepicker.regional['$culture'];
    params.changeMonth = $cm;
    params.changeYear = $cy;
    params.numberOfMonths = $nom;
    params.showButtonPanel = $sbp;
    $("#$id").datepicker(params);
        });
</script>
EOHTML;
    }
    else
    {
    $html .= <<<EOHTML
<script type="text/javascript">
        $(function() {
    var params = {
    changeMonth : $cm,
    changeYear : $cy,
    numberOfMonths : $nom,
    showButtonPanel : $sbp };
    $("#$id").datepicker(params);
        });
</script>
EOHTML;
    }

    return $html;
  }
}

Don’t forget to run

php symfony cc

to clear your cache and enable this new class on prod environment.

Leave a Reply