CakePHP automagic date type input field clashing with JQM

1
votes

I'm trying to setup a form using CakePHP and JQM and whilst all the saving, editing and retrieving of data is working just as I want it to, I'm having a bit of trouble with the way Cake automatically handles a field that has the attribute type="date"

Basically, in JQM, if you add that attribute, you'll get a lovely formatted date selector on the touch device keyboard but when I try to add that attribute to a CakePHP form, it converts the field into three drop down boxes.

Is there anyway I can prevent this from happening? I've attached a screenshot to illustrate what happens when I add the type="date" attribute to a field. Notice the drop downs under the label "will take place on date:"

enter image description here

2
cakephpjquery-mobile
I don't know the specifics of JQM but I understand the problem. I think the best way to do this is to write a helper (e.g. DateInputHelper) that extends the FormHelper so you can create the markup yourself. – timstermatic
Hey thanks for the comment. I could write a helper but meh, I've never done one before. I did however, find the answer, which I will post as an answer now – Kyle O'Brien

2 Answers

1
votes

So, it turns out that this was simpler than I thought (as it always is).

There are two ways to declare an input:

  1. echo $this->Form->input(.....); OR
  2. echo $this->Form->{type of input}(....)

The second one is the key. Since I wanted a text box looking field with an attribute of type="date" I needed to implement the following code:

echo $this->Form->text('id', array('type' => 'date'));

Seems idiotically simple now that I think about it.

Have a look at CakePHP's great documentation on its form helper: http://book.cakephp.org/2.0/en/core-libraries/helpers/form.html

0
votes

I would like to add that when using FormHelper::input(), errors are rendered by default.
This is not the case for FormHelper::text().

Putting the following code in the view .ctp could solve it.

echo $this->Form->error('id');