DateTimePicker Widget DateTimePicker.php

Thankful to Krajee!
to get more out of us.

NOTE: This extension depends on the yiisoft/yii2-bootstrap extension. Check the composer.json for this extension's requirements and dependencies that may be updated by composer.

DateTimePicker widget is a Yii2 wrapper for the Bootstrap DateTimePicker plugin by smalot. The plugin is a fork of the DatePicker plugin by @eternicode and adds the time functionality. This widget is specially styled for Yii framework 2.0 and Bootstrap 3. The widget is similar to the DatePicker widget in most aspects, except that it adds the time functionality and does not support ranges. The widget allows graceful degradation to a normal HTML text input, if the browser does not support JQuery. . This widget supports these markups:

  • Simple Input Markup
  • Component Markup - Addon Prepended
  • Component Markup - Addon Appended
  • Inline / Embedded Markup

The widget supports all parameters that one would pass for any Yii Input Widget. The additional parameter settings specially available for the DateTimePicker widget configuration are:
  • language: string the locale ID (e.g. fr, de) for the language to be used by the DateTimePicker Widget. If this property not set, then the current application language will be used (i.e. Yii::$app->language). Note: This setting is applied for the entire view object by the plugin. So you cannot have multi-language DateTimePicker widgets on the same view page.

  • type: int the markup type of datetimepicker widget markup. Must be one of the following TYPE constants

    • TYPE_INPUT or 1: The simplest case: focusing the input (clicking or tabbing into it) will show the picker.

    • TYPE_COMPONENT_PREPEND or 2: Adds a prepend addon to the datetimepicker.

    • TYPE_COMPONENT_APPEND or 3: Adds an append addon to the datetimepicker.

    • TYPE_INLINE or 5: Allows you to display an embedded picker that is always visible. The input by default will be readonly - you can override it by setting the inlineOptions.

  • size: string the size of the input, must be one of: lg, md, sm, xs

  • pickerButton: mixed the calendar/time picker button configuration. This can be one of the following types:

    • string, if this is a string, it will be displayed as is (and will not be HTML encoded).
    • boolean, if this is set to false, it will not be displayed.
    • array, this is the default behavior. If passed as an array, it will be considered as HTML attributes for the picker button addon. The following special keys are recognized:
      • icon, string the bootstrap glyphicon name/suffix. Defaults to 'calendar'.
      • title, string|boolean the title to be displayed on hover. Defaults to 'Select date & time'. If this is set to null or false, will not be displayed.
  • removeButton: mixed the calendar/time remove button configuration. This can be one of the following types:

    • string, if this is a string, it will be displayed as is (and will not be HTML encoded).
    • boolean, if this is set to false, it will not be displayed.
    • array, this is the default behavior. If passed as an array, it will be considered as HTML attributes for the remove button addon. The following special keys are recognized:
      • icon, string the bootstrap glyphicon name/suffix. Defaults to 'remove'.
      • title, string|boolean the title to be displayed on hover. Defaults to 'Clear field'. If this is set to null or false, will not be displayed.
  • convertFormat: boolean whether the widget should automatically format the date from the PHP DateTime format to the Bootstrap DateTimePicker plugin format.. Defaults to false.

  • options: array the HTML attributes for the widget input tag.

  • pluginOptions: array the DateTimePicker plugin options. Refer the plugin options documentation for details.

  • pluginEvents: array the DateTimePicker JQuery events. You must define events in event-name => event-function format. All events will be stacked in the sequence. Refer the plugin events documentation for details. For example:

    pluginEvents = [
        "show" => "function(e) {  # `e` here contains the extra attributes }",
        "hide" => "function(e) {  # `e` here contains the extra attributes }",
        "clearDate" => "function(e) {  # `e` here contains the extra attributes }",
        "changeDate" => "function(e) {  # `e` here contains the extra attributes }",
        "changeYear" => "function(e) {  # `e` here contains the extra attributes }",
        "changeMonth" => "function(e) {  # `e` here contains the extra attributes }",
    ];
    

echo '';
echo DateTimePicker::widget([
    'name' => 'dp_1',
    'type' => DateTimePicker::TYPE_INPUT,
    'value' => '23-Feb-1982 10:10',
    'pluginOptions' => [
        'autoclose'=>true,
        'format' => 'dd-M-yyyy hh:ii'
    ]
]);
echo '<label class="control-label">Event Time</label>';
echo DateTimePicker::widget([
    'name' => 'dp_2',
    'type' => DateTimePicker::TYPE_COMPONENT_PREPEND,
    'value' => '23-Feb-1982 10:01',
    'pluginOptions' => [
        'autoclose'=>true,
        'format' => 'dd-M-yyyy hh:ii'
    ]
]);
echo '<label class="control-label">Event Time</label>';
echo DateTimePicker::widget([
    'name' => 'dp_3',
    'type' => DateTimePicker::TYPE_COMPONENT_APPEND,
    'value' => '23-Feb-1982 12:35 AM',
    'pluginOptions' => [
        'autoclose'=>true,
        'format' => 'dd-M-yyyy HH:ii P'
    ]
]);
echo DateTimePicker::widget([
    'name' => 'dp_4',
    'type' => DateTimePicker::TYPE_INLINE,
    'value' => 'Tue, 23-Feb-1982, 14:45',
    'pluginOptions' => [
        'format' => 'D, dd-M-yyyy, hh:ii'
    ]
]);

Usage with model and Active Form (with no default initial value)


Usage with model (with no default initial value)


Usage without a model (with default initial value)


A read only datetimepicker input (with default initial value)


Change the widget input size (e.g. lg for large input)


Hide remove button and change picker button icon.


DateTimePicker within a bootstrap modal window.

use yii\bootstrap\Modal;
use kartik\widgets\ActiveForm;
use kartik\widgets\DateTimePicker;

// Usage with model and Active Form (with no default initial value)
echo $form->field($model, 'datetime_1')->widget(DateTimePicker::classname(), [
	'options' => ['placeholder' => 'Enter event time ...'],
	'pluginOptions' => [
		'autoclose' => true
	]
]);

// Usage with model (with no default initial value)
echo '<label class="control-label">Event Time</label>';
echo DateTimePicker::widget([
	'model' => $model,
	'attribute' => 'datetime_2',
	'options' => ['placeholder' => 'Enter event time ...'],
	'pluginOptions' => [
		'autoclose' => true
	]
]);

// Usage without a model (with default initial value)
echo '<label class="control-label">Event Time</label>';
echo DateTimePicker::widget([
	'name' => 'event_time',
	'value' => '12/31/2010 05:10:20',
	'pluginOptions' => [
		'autoclose' => true,
		'format' => 'mm/dd/yyyy hh:ii::ss'
	]
]);

// A read only datetimepicker input (with default initial value)
echo '<label class="control-label">Startup Time</label>';
echo DateTimePicker::widget([
	'name' => 'startup_time',
	'value' => '02/01/2001 05:10:20',
	'options' => [
		'readonly' => true
	],
	'pluginOptions' => [
		'autoclose' => true,
		'format' => 'mm/dd/yyyy hh:ii::ss'
	]
]);

// Change the widget size (e.g. lg for large)
echo '<label class="control-label">Inaugral Date</label>';
echo DateTimePicker::widget([
	'name' => 'inaugral_time',
	'value' => '01/04/2005 08:17',
	'size' => 'lg',
	'pluginOptions' => [
		'autoclose' => true,
		'format' => 'mm/dd/yyyy hh:ii'
	]
]);

// Hide remove button and change picker button icon.
echo '<label class="control-label">Set Time</label>';
echo DateTimePicker::widget([
	'name' => 'datetime_400',
	'value' => '01/04/2005 08:17',
	'removeButton' => false,
	'pickerButton' => ['icon' => 'time'],
	'pluginOptions' => [
		'autoclose' => true,
		'format' => 'mm/dd/yyyy hh:ii'
	]
]);

// Datepicker inside a modal window
<div class="row">
	<div class="col-sm-4">
		<div style="margin-top: 20px">
			<?php
			Modal::begin([
				'header' => '<h3>DateTimePicker with other fields</h3>',
				'toggleButton' => ['label' => 'Launch Modal', 'class' => 'btn btn-primary'],
			]);
			?>
			<?= $form->field($model, 'username') ?>
			<div class="row" style="margin-bottom: 8px">
				<div class="col-sm-6">
					<?=
					DateTimePicker::widget([
						'name' => 'date_in_modal_1',
						'options' => ['placeholder' => 'Start time...'],
						'pluginOptions' => ['autoclose' => true]
					]); ?>
				</div>
				<div class="col-sm-6">
					<?=
					DateTimePicker::widget([
						'name' => 'date_in_modal_2',
						'options' => ['placeholder' => 'End time...'],
						'pluginOptions' => ['autoclose' => true]
					]); ?>
				</div>
			</div>
			<?= $form->field($model, 'notes')->textarea() ?>
			<?php Modal::end(); ?>
		</div>
	</div>
	<div class="col-sm-6">
		<div class="alert alert-info"><p>DateTimePicker within a bootstrap modal window.</p></div>
	</div>
</div>

Setting date time picker for your regional language (e.g. fr for French)


Highlight today, show today button, change date format (use convertFormat to auto convert PHP DateTime Format to DateTimePicker format).


Show week numbers and disable certain days of week (e.g. weekends)


Change orientation of date time picker as well as markup type


use kartik\widgets\DateTimePicker

// Setting DateTimePicker for your regional language (e.g. fr for French)
echo '<label class="control-label">Date de Naissance</label>';
echo DateTimePicker::widget([
	'name' => 'datetime_10',
	'options' => ['placeholder' => 'Entrez date de naissance ...'],
	'pluginOptions' => [
		'language' => 'fr',
		'autoclose' => true,
	]
]);

// Highlight today, show today button, change date format (use convertFormat
// to auto convert PHP DateTime Format to DateTimePicker format).
echo '<label class="control-label">Event Time</label>';
echo DateTimePicker::widget([
	'name' => 'datetime_11',
	'options' => ['placeholder' => 'Enter event time ...'],
	'convertFormat' => true,
	'pluginOptions' => [
		'todayHighlight' => true,
		'todayBtn' => true,
		'format' => 'd-M-Y g:i A',
		'autoclose' => true,
	]
]);

// Show week numbers and disable certain days of week (e.g. weekends)
echo '<label class="control-label">Event Time</label>';
echo DateTimePicker::widget([
	'name' => 'datetime_12',
	'value' => '31-Dec-2010 02:12 PM',
	'convertFormat' => true,
	'pluginOptions' => [
		'calendarWeeks' => true,
		'daysOfWeekDisabled' => [0, 6],
		'format' => 'd-M-Y g:i A',
		'autoclose' => true,
	]
]);

// Change orientation of DateTimePicker as well as markup type
echo '<label class="control-label">Setup Date</label>';
echo DateTimePicker::widget([
	'name' => 'datetime_12',
	'value' => '08-Apr-2004 10:20 AM',
	'type' => DateTimePicker::TYPE_COMPONENT_PREPEND,
	'pluginOptions' => [
		'orientation' => 'bottom right',
		'format' => 'dd-MM-yyyy HH::ii P',
		'autoclose' => true,
	]
]);