Using jQueryUI Datepicker in CakePHP

Share on facebook
Facebook
Share on twitter
Twitter
Share on reddit
Reddit
Share on linkedin
LinkedIn

The default format for the datepicker in CakePHP is neither particularly pretty nor user-friendly:

The Default CakePHP Datepicker

Notice how the dropdown indicator arrows obscure part of the numbers, just enough to force a double-take in some cases to make sure the number is the intended selection. Also, there’s no option to just key the date.

Enter the jQueryUI Datepicker. Since jQuery so often gets used in projects, there’s a good chance that some or all of what is needed for this has already been pulled in for other reasons. Making use of libraries that are already there – and thus decreasing load times – is a great reason to choose the jQueryUI Datepicker (plus it solves the problems we have with the CakePHP default.

To get started with jQueryUI Datepicker, add the following lines in default.ctp (for our example we’re pulling jQuery from the Google public CDN):

    <?= $this->Html->script('https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js') ?>
    <?= $this->Html->script('https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js') ?>
    <?= $this->Html->css('https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css') ?>

Next, we need the jQuery function that will handle our datepicker requests:

$( function() {
    $( ".datepicker" ).datepicker();
} );

This code could be placed with the pages that use dates, or as a file in your project. (If you go with the latter, make sure that file is being included just as we did earlier with the jQuery UI files.)

A note on the above: this is almost the default shown (at least at the time of this writing) in the jQueryUI docs. Almost. Instead of ( “#datepicker” ) we went with a class ( “.datepicker” ). This is because we often have more than one date on a single screen, and HTML IDs need to be unique; classes do not, so by coding as we did, all our dates simply have the “datepicker” class.

In any of your templates that contain date fields, modify them similar to what you see here:

    <?= $this->Form->create($event) ?>
    <fieldset>
        <legend><?= __('Add Event') ?></legend>
        <?php
            echo $this->Form->control('name');
            echo $this->Form->control('description');
            echo $this->Form->control('start', ['type' => 'text', 'class' => 'datepicker']);
            echo $this->Form->control('end', ['type' => 'text', 'class' => 'datepicker', 'empty' => true]);
        ?>
    </fieldset>
    <?= $this->Form->button(__('Submit')) ?>
    <?= $this->Form->end() ?>

Notice that we not only added the “datepicker” class, we also overrode the field as being a type of “text”. The end result should look something like this:

jQueryUI Datepicker within a CakePHP Project

Not only have we switched to an interface with which our users are likely more familiar, but they can also just key the date if they’re so inclined.

There are a ton of options that you can use in your jQueryUI datepickers. For more information, check out http://api.jqueryui.com/datepicker/.

More to explore

Photo by Kyle Broad on Unsplash

“I Know You”

I’ve a few recordings that have survived the changes in technology and the natural degradation of formats such as tape. This song,

Photo by Artem Sapegin on Unsplash

2 Must-Have Tools for WordPress Development

There are some exceptional tools that can be used for WordPress development that make the process way easier than it would be otherwise. I didn’t know about some of these early on in my WordPress development days, so for those of you who might not be familiar with them, I’d like to share.

Leave a Comment

Your email address will not be published. Required fields are marked *