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 Caspar Camille Rubin on Unsplash

Getting WP Post and Postmeta in Single Rows

WordPress uses wp_posts to store post, page, and Custom Post Type (CPT) data the wp_postmeta table for Custom Metabox data. To retrieve this data you have to read for the post plus multiple linked postmeta rows. In this post, we conquer postmeta with subqueries.

Using Redis with WordPress on Ubuntu

Redis is “an open source (BSD licensed), in-memory data structure store, used as a database, cache and message broker. It supports data structures such as strings, hashes, lists, sets, sorted sets with range queries, bitmaps, hyperloglogs, geospatial indexes with radius queries and streams.” Translation? It makes websites run faster.

Nasa on Unsplash

Building an API Endpoint with Amp (PHP)

API endpoints in web apps are pretty typical these days, but there may be reasons to provide data outside of the context of an application. In this post, we’ll explore how to make a stand-alone API endpoint using PHP and Amp.

Leave a Comment

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