1

I have a form to which I’ve added an input element of type ‘date’. When I add a attribute-class property the date-picker behavior stops working. This is the code for the element:

$form['stop_date'] = array(
  '#type' => 'date',
  '#title' => t('Stop Date'),
  '#default_value' => date("Y-m-d"),
  '#id' => 'stop_date', 
  '#attributes' => array('class' => array('dateSel-Fld')), // ADD CLASS TO FORM ELEMENT
  '#required' => true,
); 

This is the HTML output:

<input id="stop_date" class="dateSel-Fld form-date required" 
type="date" aria-required="true" required="required" 
value="2016-03-11" name="stop_date" data-drupal-selector="stop-date">

When I remove #attribute, the HTML is the following:

<input id="stop_date" class="form-date required hasDatepicker" 
type="date" aria-required="true" required="required" 
value="2016-03-11" name="stop_date" data-drupal-date-format="Y-m-d" 
data-drupal-selector="stop-date">

So, adding the attribute property prevents the default behavior of adding the 'datepicker' class to the element.

What am I doing wrong?

NewProtocol.php:

use Drupal\Core\Form\FormBase;
use Drupal\Core\Form\FormStateInterface;

/**
 * Implements an example form.
 */
class NewProtocol extends FormBase
{
    /**
     * {@inheritdoc}
     */
    public function getFormId()
    {
        return 'NewProtocol_Form';
    }

    /**
     * {@inheritdoc}
     */
    public function buildForm(array $form, FormStateInterface $form_state)
    {
        $form['#attached']['library'][] = 'GenoForm/GenoForm'; // attach css and js libs  

        $form['stop_date'] = array(
          '#type' => 'date',
          '#title' => t('Stop Date'),
          '#default_value' => date("Y-m-d"), // default to today 
          '#id' => 'stop_date', // ADD ID TO FORM ELEMENT
          '#attributes' => array('class' => array('dateSel-Fld')), // ADD CLASS TO FORM ELEMENT
          '#required' => true,
        );
        return $form;
    }

    /**
     * {@inheritdoc}
     */
    public function validateForm(array &$form, FormStateInterface $form_state)
    {
        $a = 1;
    }

    /**
     * {@inheritdoc}
     */
    public function submitForm(array &$form, FormStateInterface $form_state)
    {
        $a = 1;
    }
}

GenoForm.js:

/**
 * @file
 * Contains js for the GenoForm module.
 */

// attaches a keyup funcion to form element by id
// - needed to alter value in $form_state[values]
//(function($) {
//    $(function() {
//        $('#genotype_3_id').keyup(function() {
//            this.value = this.value.toUpperCase();
//        });
//    })
//})(jQuery);

GenoForm.css:

/* 
    Created on : Feb 27, 2016, 2:19:35 PM
    Author     : michael.sullivan
*/
.dateSel-Fld {
    background-color: lightblue;
}

GenoForm.libraries.yml

GenoForm:
  version: 1.x
  css:
    theme:
      css/GenoForm.css: {}

  js:
    js/GenoForm.js: {}
  dependencies:
    - core/jquery
  • You want to add jQuery UI datepicker behavior(because hasDatepicker it is it's class)? If yes, please inform us how did you add support of jQuery UI datepicker to your field. – Maria Kvitova Mar 11 '16 at 21:07
  • I did it using a yml library file that adds - core/jquery as a dependency js: js/GenoForm.js: {} dependencies: - core/jquery – Mike Mar 12 '16 at 2:27
  • Please give full code example of how you attach libraries and what you have in GenoForm.js(as I understand it's your own js-file). – Maria Kvitova Mar 12 '16 at 9:57
  • I've added all the files involved in the behavior. As you can see the behavior is not affected by the GenoForm.js as all code in there is commented out. Thanks for your help in this. – Mike Mar 12 '16 at 15:54
  • I found the php log has this message: Undefined index: type in Drupal\Core\Render\Element\Date::processDate() (line 69 of /Applications/MAMP/htdocs/D8-3-Mouse/core/lib/Drupal/Core/Render/Element/Date.php) – Mike Mar 12 '16 at 16:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.