A CakePHP plugin using jQuery color/date/time and timezone pickers.

0.5.1 2014-06-08 06:47 UTC


Picker is a plugin for CakePHP, a Helper implementation to enable form input with jquery-based pickers. Available pickers listed below:

  1. color : claviska/jquery-minicolors
  2. date / time / datetime : Eonasdan/bootstrap-datetimepicker
  3. location : Logicify - jQuery Location Picker
  4. address : not implemented yet.
  5. timezone : not implemented yet.


Picker plugin requires the BoostCake plugin.

  • BoostCake CakePHP Plugin is requried.

Other requirement / constraints may follow other libraries requirement.

  • PHP >= 5.3.0
  • CakePHP >= 2.3.0
  • moment.js >= 2.5.1


When using composer, ensure require is present in composer.json. This will install the plugin into Plugin/Picker:

    "require": {
        "rcsv/cakephp-pickers-collection": "*"

When use git submodule command

git submodule add https://github.com/rcsv/cakephp-pickers-collection.git app/Plugin/Picker


Ensure the plugin is loaded in app/Config/bootstrap.php by calling CakePlugin::load('Picker'); or CakePlugin::loadAll(); method. Next, you can include picker helper in $helpers array.

class AppController extends Controller {
    public $helpers = array('Picker.PickerForm');

// or

class AppController extends Controller {
    // use Picker plugin as a FormHelper
    public $helpers = array(
        'Html' => array('className' => 'BoostCake.BoostCakeHtml'),
        'Form' => array('className' => 'Picker.PickerForm'));

How to use

You can use Picker plugin as a normal FormHelper.

// You can start Form normally.
echo $this->Form->create('PickerCollection');
echo $this->Form->input('title');

// jquery Minicolors plugin
echo $this->Form->color('bgcolor');

// jquery Datetimepicker (date mode)
echo $this->Form->date('start');

// jquery Datetimepicker (time mode)
echo $this->Form->time('time');

// jquery Datetimepicker (both mode)
echo $this->Form->datetime('modified');

echo $this->Form->end('end');


Add config into method

You can set more configuration via second parameter. The jQuery pickers can receive option values via pickerOption array.

echo $this->Form->color('bgcolor', array(
    'class' => 'exampleclass1 exampleclass2',
    'wrapInput' => false,
    'placeholder' => '#RRGGBB',
    // you can set minicolors.jquery plugin via 'pickerOption'.
    // To check available options of minicolors jquery, see 
    // http://labs.abeautifulsite.net/jquery-minicolors/
    'pickerOption' => array(
        'theme' => 'bootstrap',
        'control' => 'saturation')));

Change libraries path

You can change paths of javascript and CSS libraries. Default configuration is listed below, you can modify prefer URL.

public $helpers = array(
    'Form' => array(
        'className' => 'Picker.Picker',

		// =========================
        'jsfiles' => array(

        	// jquery and bootstrap always use.
            'jquery' => 
            'bootstrap' => 

            // color uses when you called color() method
            'color' => 

            // moment uses when you called date(), time(), and datetime() methods.
            'moment' => 
            'moment.ja' =>

            'date' => 

            'location' => 

    	// =========================
        'cssfiles' => array(
                => '//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.min.css', 
                => 'Picker.jquery.minicolors', 
            'date' =>

NOTE: There are some path with prefixed 'Picker.', Those files store in plugin directly. CakePHP system is not good at loading files from plugin directly. So you should change some paths from 'Picker.*' to your app/webroot/.