DatePicker Widget DatePicker.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.

DatePicker widget is a Yii2 wrapper for the Bootstrap DatePicker plugin. The plugin is a fork of Stefan Petre's DatePicker (of eyecon.ro), with improvements by @eternicode. This widget is specially styled for Yii framework 2.0 and Bootstrap 3. 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
  • Date Range Markup (from and to dates)

The widget supports all parameters that one would pass for any Yii Input Widget. The additional parameter settings specially available for the DatePicker widget configuration are:
  • language: string the locale ID (e.g. fr, de) for the language to be used by the DatePicker 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 DatePicker widgets on the same view page.

  • type: int the markup type of datepicker 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 datepicker.

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

    • TYPE_RANGE or 4: Allows you to add a date range. You need to provide the attribute2 or name2 parameter.

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

    Pre-requisite

    The DatePicker range type requires the FieldRange extension yii2-field-range to be installed, else an exception will be raised. You could install the FieldRange extension by following these installation instructions on the extension demo page.
  • size: string the size of the input, must be one of: lg, md, sm, xs

  • form: ActiveForm the ActiveForm object which you can pass for seamless usage with ActiveForm. This property is especially useful for client validation of attribute2 for [[TYPE_RANGE]] validation.

  • addon: string the addon that will be prepended/appended for a TYPE_COMPONENT_PREPEND and TYPE_COMPONENT_APPEND. Defaults to

  • convertFormat: boolean whether the widget should automatically format the date from the PHP DateTime format to the Bootstrap DatePicker plugin format.. Defaults to false.

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

  • attribute2: string the model attribute 2 if you are using TYPE_RANGE for markup. Either attribute2 or name2 must be provided when using TYPE_RANGE for markup.

  • name2: string name of input number 2 if you are using TYPE_RANGE for markup. Either attribute2 or name2 must be provided when using TYPE_RANGE for markup.

  • value2: string value of input number 2 if you are using TYPE_RANGE for markup.

  • options2: array the HTML attributes for the input number 2 if you are using TYPE_RANGE for markup.

  • separator: string the range input separator if you are using TYPE_RANGE for markup. Default value is to

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

  • pluginEvents: array the DatePicker 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 DatePicker::widget([
    'name' => 'dp_1',
    'type' => DatePicker::TYPE_INPUT,
    'value' => '23-Feb-1982',
    'pluginOptions' => [
        'autoclose'=>true,
        'format' => 'dd-M-yyyy'
    ]
]);
echo '<label class="control-label">Birth Date</label>';
echo DatePicker::widget([
    'name' => 'dp_2',
    'type' => DatePicker::TYPE_COMPONENT_PREPEND,
    'value' => '23-Feb-1982',
    'pluginOptions' => [
        'autoclose'=>true,
        'format' => 'dd-M-yyyy'
    ]
]);
echo '<label class="control-label">Birth Date</label>';
echo DatePicker::widget([
    'name' => 'dp_3',
    'type' => DatePicker::TYPE_COMPONENT_APPEND,
    'value' => '23-Feb-1982',
    'pluginOptions' => [
        'autoclose'=>true,
        'format' => 'dd-M-yyyy'
    ]
]);
to
echo '<label class="control-label">Valid Dates</label>';
echo DatePicker::widget([
    'name' => 'from_date',
    'value' => '01-Feb-1996',
    'type' => DatePicker::TYPE_RANGE,
    'name2' => 'to_date',
    'value2' => '27-Feb-1996',
    'pluginOptions' => [
        'autoclose'=>true,
        'format' => 'dd-M-yyyy'
    ]
]);
echo DatePicker::widget([
    'name' => 'dp_5',
    'type' => DatePicker::TYPE_INLINE,
    'value' => 'Tue, 23-Feb-1982',
    'pluginOptions' => [
        'format' => 'D, dd-M-yyyy'
    ]
]);

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 datepicker input (with default initial value)

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

DatePicker within a bootstrap modal window.

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

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

// Usage with model (with no default initial value)
echo '<label class="control-label">Birth Date</label>';
echo DatePicker::widget([
    'model' => $model, 
    'attribute' => 'date_1',
    'options' => ['placeholder' => 'Enter birth date ...'],
    'pluginOptions' => [
        'autoClose'=>true
    ]
]);

// Usage without a model (with default initial value)
echo '<label class="control-label">Birth Date</label>';
echo DatePicker::widget([
    'name' => 'birth_date',
    'value' => '12/31/2010',
    'pluginOptions' => [
        'autoclose'=>true,
        'format' => 'mm/dd/yyyy'
    ]
]);

// A read only datepicker input (with default initial value)
echo '<label class="control-label">Anniversary</label>';
echo DatePicker::widget([
    'name' => 'anniversary',
    'value' => '08/10/2004',
    'options' => [
        'readonly' => true
    ],
    'pluginOptions' => [
        'autoclose'=>true,
        'format' => 'mm/dd/yyyy'
    ]
]);


// Change the widget size (e.g. lg for large)
echo '<label class="control-label">Inaugral Date</label>';
echo DatePicker::widget([
    'name' => 'inaugral_date',
    'value' => '01/29/2014',
    'size' => 'lg',
    'pluginOptions' => [
        'autoclose'=>true,
        'format' => 'mm/dd/yyyy'
    ]
]);

// Datepicker inside a modal window
<div class="row">
    <div class="col-sm-4">
		<div  style="margin-top: 20px">
        <?php
			Modal::begin([
				'header' => '<h2>Datepicker with other fields</h2>',
				'toggleButton' => ['label' => 'Launch Modal', 'class' => 'btn btn-primary'],
			]);
		?>
		<?= $form->field($model, 'username') ?>
		<div class="row" style="margin-bottom: 8px">
			<div class="col-sm-6">
				<?= DatePicker::widget(['name'=>'date_in_modal_1', 'options'=>['placeholder'=>'Select birthday...'], 'pluginOptions'=>['autoclose'=>true]]); ?>
			</div>
			<div class="col-sm-6">
				<?= DatePicker::widget(['name'=>'date_in_modal_2', 'options'=>['placeholder'=>'Select anniversary...'], '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>DatePicker within a bootstrap modal window.</p></div>
    </div>
</div>
to

Client validation of date-ranges when using with ActiveForm

Setting datepicker for your regional language (e.g. fr for French)

Highlight today, show today button, change date format

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

Change orientation of datepicker as well as markup type

Multiple Dates Selection

use kartik\widgets\DatePicker

// Client validation of date-ranges when using with ActiveForm
$form = ActiveForm::begin();
echo '<label class="control-label">Select date range</label>';
echo DatePicker::widget([
    'model' => $model,
    'attribute' => 'from_date',
    'attribute2' => 'to_date',
    'options' => ['placeholder' => 'Start date'],
    'options2' => ['placeholder' => 'End date'],
    'type' => DatePicker::TYPE_RANGE,
    'form' => $form,
    'pluginOptions' => [
        'format' => 'dd-M-yyyy',
        'autoclose' => true,
    ]
]);
ActiveForm::end();

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

// Highlight today, show today button, change date format
echo '<label class="control-label">Birth Date</label>';
echo DatePicker::widget([
    'name' => 'date_11',
    'options' => ['placeholder' => 'Enter birth date ...'],
    'pluginOptions' => [
        'todayHighlight' => true,
        'todayBtn' => true,
        'format' => 'dd-M-yyyy',
        'autoclose' => true,
    ]
]);

// Show week numbers and disable certain days of week (e.g. weekends)
echo '<label class="control-label">Birth Date</label>';
echo DatePicker::widget([
    'name' => 'date_12',
    'value' => '31-Dec-2010',
    'pluginOptions' => [
        'calendarWeeks' => true,
        'daysOfWeekDisabled' => [0, 6],
        'format' => 'dd-M-yyyy',
        'autoclose' => true,
    ]
]);

// Change orientation of datepicker as well as markup type
echo '<label class="control-label">Setup Date</label>';
echo DatePicker::widget([
    'name' => 'date_12',
    'value' => '08/10/2004',
    'type' => DatePicker::TYPE_COMPONENT_APPEND,
    'pluginOptions' => [
        'orientation' => 'top right',
        'format' => 'mm/dd/yyyy',
        'autoclose' => true,
    ]
]);


// Multiple Dates Selection
echo '<label class="control-label">Select Dates</label>';
echo DatePicker::widget([
    'name' => 'date_12',
    'value' => '08/10/2004',
    'type' => DatePicker::TYPE_COMPONENT_APPEND,
    'pluginOptions' => [
        'format' => 'mm/dd/yyyy',
        'multidate' => true,
        'multidateSeparator' => ' ; ',
    ]
]);