Using jQueryUI Datepicker in CakePHP

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/.

 

Leave a Comment

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