Add placeholder attribute to date input in Zend 2

Question

I would like to add a placeholder to my date input to show visitors using firefox which format the date must have.
Using Zend Framework 2, I want to be able to generate an input equivalent to :

<input type="date" placeholder="yyyy-mm-dd">

inside my Form class.
Here is the Form class I have right now :

<?php
  namespace MyModule\Form;

  use Zend\Form\Form;

  class MyModuleForm extends Form {
      public function __construct($name = null) {
          parent::__construct('myModule');
          $this->add(array(
              'name' => 'TheDate',
              'type' => 'date',
              'attributes' => array(
                    'placeholder' => 'yyyy-mm-dd',
                    'class' => 'form-control',
               )
          ));
      }
  }
?>

But Zend seems to skip the "placeholder" attribute and generates only :

<input class="form-control" type="date" value="" name="TheDate">

In the worst case scenario, I know I can also definse the "value" attribute instead (though I would like not to, just in case the user doesn't pay attention and doesn't change it), or add the placeholder manually using javascript. But is there a more elegant way to do what I want to achieve through the Form class of Zend ?

score 1 · Accepted Answer · edited May 23 '17 at 12:21

Edit : I found the answer I was looking for since the beginning thank to this post.

The solution is to go into the AbstractHelper.php present in the namespace Zend\Form\View\Helper.

There, there is a protected array of attributes that should be valid globally.

Adding

'placeholder'        => true,

to $validGlobalAttributes fixed everything and was what I was a good enough answer to me.
An even better way would be to change this variable by inheritance instead of modifying it into the framework, but I don't have enough time for it right now.

score 0 · Answer 2 · answered Jul 01 '15 at 12:30

0

You can't have placeholder on your date input due to the UI, which is triggered onfocus. Therefore you have to hack/fake it.

Change the 'type' => 'date', to 'type' => 'text',. You will see the placeholder now. This Javascript will help you triggering the date field on focus, and keep the placeholder.

$('.form-control').on('focus', function() {
  $(this).attr('type', 'date') }
).on('blur', function() {
  $(this).attr('type'), 'text') }
)

answered Jul 01 '15 at 12:30

Stanimir Dimitrov

1,872
2
20
25

I'm not sure I understand : if I code my html manually, the placeholder appears normally, it's only when I try to code it properly through Zend that it doesn't work. So, if I want to use javascript, I can also just do $('.classNameRandom').attr('placeholder', 'yyyy-mm-dd'), and it works just fine. – user4467065 Jul 01 '15 at 12:35
Check this http://www.w3.org/html/wg/drafts/html/master/semantics.html#concept-input-apply – Stanimir Dimitrov Jul 01 '15 at 12:42
1

Also at section 4.10.5.1.1 - Bookkeeping details you can see more info about the placeholder attribute. – Stanimir Dimitrov Jul 01 '15 at 12:44
My problem is not that I don't manage to make the placeholder appear (it is only the case on browser like chrome, where I don't need it anyway). Firefox still doesn't support the date input correctly, that's why I want to add a placeholder specifically for this browser to show the user which format to use. If you have firefox, you can see on [this fiddle](http://jsfiddle.net/s44rmfk2/) that the placeholder is taken into account. My problem is that Zend doesn't generate the html like it should. So, do I have to add the placeholder manually through javascript, or is there another way ? – user4467065 Jul 01 '15 at 12:51

score 0 · Answer 3 · answered Jul 02 '15 at 11:33

I guess, Zend FormDate does not support placeholder. You can check this on repo. For example,

Every form element has a Helper in (Zend\Form\View\Helper) and some of them has validTagAttributes as a class element. You can check FormEmail view helper class for this.

But, FormDate dont have a validTagAttributes. So, your invalid attributes ignored in prepareAttributes() method.

I think, if you want to palceholder on your date form element, you can create a custom FormDate element view helper and use it.

Add placeholder attribute to date input in Zend 2

3 Answers3