CODEWITHSUNDEEP
csstwitter-bootstrapcakephp
Kemu79
Kemu79

Reputation: 187

CakePHP & Bootstrap - date field layout

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?

Upvotes: 1

Views: 1611

Answers (2)

qwanta
qwanta

Reputation: 53

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

Upvotes: 3

marian0
marian0

Reputation: 3337

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.

Upvotes: 2

Related Questions