Control: Datetime picker - 10quality/wpmvc-addon-metaboxer GitHub Wiki

Control used as a field type to display a Datetime Picker.

Usage

class Post extends Model
{
    // Class properties and methods...

    protected function init()
    {
        $this->metaboxes = [
            'metabox_id' => [
                'tabs' => [
                    'tab_id' => [
                        'fields' => [

                            'field_id' => [
                                'type' => 'datetimepicker',
                                'title' => __( 'Date time picker', 'my-domain' ),
                                'description' => __( 'Date time picker sample.' ),
                            ],

                            'date' => [
                                'type' => 'datetimepicker',
                                'title' => __( 'Date picker', 'my-domain' ),
                                'control' => [
                                    'attributes' => [
                                        'data-show-time' => 0,
                                        'data-format' => 'Y-m-d',
                                    ],
                                ],
                            ],
                            'time' => [
                                'type' => 'datetimepicker',
                                'title' => __( 'Time picker', 'my-domain' ),
                                'control' => [
                                    'attributes' => [
                                        'data-show-date' => 0,
                                        'data-format' => 'H:i',
                                    ],
                                ],
                            ],

                            // Other fields...
                        ],
                    ],
                ],
            ],
        ];
    }
}

Control options

Control	Data type	Description
autocomplete	bool	HTML autocomplete option. Default: false
attributes	array	HTML attributes listed as an array. JS options can be set as a data attribute.

Supported HTML attributes

Attribute	Data type	Description
data-show-time	int	Shows/hides the time picker. Default: 1
data-show-date	int	Shows/hides the date picker. Default: 1
data-format	string	Date, time or date+time format. Default: Y-m-d H:i
data-start-date	string	See docs startDate. Default: ``
data-min-date	string	See docs minDate. Default: ``
data-max-date	string	See docs maxDate. Default: ``
data-mask	int	Shows/hides the mask. Default: 0
data-show-inline	int	Shows picker inline and hides input. Default: 0
data-allowed-times	string	Window function name that will return an array with the allowed times. Default: ``
data-i18n	string	Window function name that will return i18n string, see [docs](https://xdsoft.net/jqplugins/datetimepicker/. Default: ``
lang	string	Locale code. Default: ``

---

Change allowed times

Enqueue a global function like:

function datetimepicker_allowed_time() {
    return [
        '12:00', '13:00', '15:00', '17:00',
        '17:05', '17:20', '19:00', '20:00',
    ];
}

And define it for a field:

class Post extends Model
{
    // Class properties and methods...

    protected function init()
    {
        $this->metaboxes = [
            'metabox_id' => [
                'tabs' => [
                    'tab_id' => [
                        'fields' => [

                            'time' => [
                                'type' => 'datetimepicker',
                                'title' => __( 'Time picker', 'my-domain' ),
                                'control' => [
                                    'attributes' => [
                                        'data-show-date' => 0,
                                        'data-format' => 'H:i',
                                        'data-show-inline' => 1,
                                        'data-allowed-times' => 'datetimepicker_allowed_time',
                                    ],
                                ],
                            ],

                            // Other fields...
                        ],
                    ],
                ],
            ],
        ];
    }
}

Localization

The component comes with many translations already, enqueue an inline:

wp_add_inline_script(
    'wpmvc-administrator-datepicker',
    'jQuery( document ).ready( function() {
        jQuery.datetimepicker.setLocale( "' . substr( get_locale(), 0, 2 ) . '" );
    } );'
);

Extend languages with a global function like:

function datetimepicker_i18n( locale ) {
    return {
        es:{
            months: [
                'Enero','Febrero','Marzo','Abril',
                'Mayo','Junio','Julio','Augosto',
                'Septiember','Octubre','Noviembre','Diciembre',
            ],
            dayOfWeek: [
                'Do', 'Lu', 'Ma', 'Mi', 
                'Ju', 'Vi', 'Sa',
            ]
        }
    };
}

And define it for a field:

class Post extends Model
{
    // Class properties and methods...

    protected function init()
    {
        $this->metaboxes = [
            'metabox_id' => [
                'tabs' => [
                    'tab_id' => [
                        'fields' => [

                            'date' => [
                                'type' => 'datetimepicker',
                                'title' => __( 'Date picker', 'my-domain' ),
                                'control' => [
                                    'attributes' => [
                                        'data-show-time' => 0,
                                        'data-format' => 'Y-m-d',
                                        'data-show-inline' => 1,
                                        'data-i18n' => 'datetimepicker_i18n',
                                        'lang' => 'es',
                                    ],
                                ],
                            ],

                            // Other fields...
                        ],
                    ],
                ],
            ],
        ];
    }
}