CakePHP & Bootstrap - date field layout

Question

Im beginning with both bootstrap and CakePHP 2.x. I baked my views with https://github.com/EKOInternetMarketing/BootstrapCake but there is a problem with date-fields layout. The view looks like this

<div class="form-group">
    <?php echo $this->Form->input('booking_date', array('class' => 'form-control', 'placeholder' => 'Booking Date'));?>
</div>

But the problem is that CakePHP creates three selects from a date-field which are all 100% width, which messes up the form and the fields look like this, while it should be three selects side-by-side:

View

Apparently bootstrap 2 had classes for smaller selects, but bootstrap 3 doesnt anymore. Any ideas how to get it looking like it should?

If you are a beginner why not use CakePHP 3. I would highly suggest as more pleasant than 2.x... It is beautiful — AKKAweb
– AKKAweb, Commented Mar 18, 2015 at 7:23

qwanta · Accepted Answer · 2016-06-30 16:33:59Z

3

For cakephp3, you have to do things a little differently:

echo $this->Form->input('booking_date', ['year' => ['class' => 'form-control'], 'month' => ['class' => 'form-control'], 'day' =>    ['class' => 'form-control'] ]);

http://book.cakephp.org/3.0/en/views/helpers/form.html#creating-datetime-inputs

answered Jun 30, 2016 at 16:33

qwanta

536 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

marian0 · Accepted Answer · 2015-03-16 21:45:47Z

2

For input of type date in CakePHP you aren't able to wrap each select element by tag you like in standard way using div option, but there is 3 options which can handle it - between, separator and after. Below is example which set your selects inline.

<div class="form-group">
    <?php echo $this->Form->input('booking_date', array(
        'class' => 'form-control',
        'placeholder' => 'Booking Date',
        'div' => array('class' => 'form-inline'),
        'between' => '<div class="form-group">',
        'separator' => '</div><div class="form-group">',
        'after' => '</div>'
    ));?>
</div>

If you using bootstrap grid you can get even better result using its classes to set this selects inline.

answered Mar 16, 2015 at 21:45

marian0

3,3573 gold badges31 silver badges38 bronze badges

2 Comments

Kemu79 Over a year ago

Thank you, that worked quite the way I wanted, but it put the label and the selects on the same row, which wasnt as the other inputs are. Should I edit your answer to show how I resolved it or answer my own question separately?

marian0 Over a year ago

@Kemu79 Sorry, I didn't notice, that you want to have label in separate line. It's your choice, you can edit, you can add your own answear ;).

Collectives™ on Stack Overflow

CakePHP & Bootstrap - date field layout

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related