Krajee
Thankful to Krajee! BUY A COFFEEor to get more out of us.

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 library. 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)

Tip

Not seeing the updated content on this page! Hard refresh your browser to clean cache for this page (e.g. SHIFT-F5 on Windows Chrome)

DatePicker supports configuration of the bootstrap library version so that you can use this either with any Bootstrap version 3.x and above. For setting up the bootstrap version for your extension, you can configure the DatePicker::bsVersion property to one of the following.

  • To use with bootstrap 3 library - you can set DatePicker::bsVersion property to any string starting with 3 (e.g. 3 or 3.3.7 or 3.x)

  • To use with bootstrap 4 library - you can set DatePicker::bsVersion property to any string starting with 4 (e.g. 4 or 4.6.0 or 4.x)

  • To use with bootstrap 5 library - you can set DatePicker::bsVersion property to any string starting with 5 (e.g. 5 or 5.1.0 or 5.x)

The following sections describe the pre-requisites for enabling Bootstrap library specific version support in your application and other related controls/overrides.

Global Bootstrap Version


Generally, you may also want to set a default version globally for all Krajee Extensions (instead of setting it for each widget or extension separately). In order to do this, you can setup the bsVersion property within Yii 2 application params (i.e. Yii::$app->params['bsVersion']). To set this up, add this section of code to your application params configuration file (e.g. config/params.php):

'params' => [
    'bsVersion' => '5.x', // this will set globally `bsVersion` to Bootstrap 5.x for all Krajee Extensions
    // other settings
    // 'adminEmail' => 'admin@example.com'
]

If DatePicker::bsVersion property is set, in addition to Yii::$app->params['bsVersion'], the extension level setting (DatePicker::bsVersion property) will override the Yii::$app->params['bsVersion']. If DatePicker::bsVersion property is not set, and Yii::$app->params['bsVersion'] is also not set, DatePicker::bsVersion property will default to 3.x (i.e. Bootstrap 3.x version will be assumed as default).

Yii2 Bootstrap Dependency


You need to install one of yiisoft/yii2-bootstrap or yiisoft/yii2-bootstrap4 or yiisoft/yii2-bootstrap5 extensions manually in your application to enable Bootstrap 3.x or 4.x or 5.x functionality respectively. This dependency has not been pre-built into the composer configuration for Krajee extensions, to allow better control to the developers in configuring their bootstrap library version. If bsVersion is set to 5.x and yiisoft/yii2-bootstrap5 is not installed, then an exception message will be thrown mentioning you to install the yiisoft/yii2-bootstrap5 extension. If bsVersion is set to 4.x and yiisoft/yii2-bootstrap4 is not installed, then an exception message will be thrown mentioning you to install the yiisoft/yii2-bootstrap4 extension. Similarly, if bsVersion is set to 3.x and yiisoft/yii2-bootstrap is not installed, an exception message will be thrown mentioning you to install the yiisoft/yii2-bootstrap extension.

To install yiisoft/yii2-bootstrap5, add the repo to the require section of your application's composer.json.

"yiisoft/yii2-bootstrap5": "@dev"

To install yiisoft/yii2-bootstrap4, add the repo to the require section of your application's composer.json.

"yiisoft/yii2-bootstrap4": "@dev"

To install yiisoft/yii2-bootstrap, add the repo to the require section of your application's composer.json.

"yiisoft/yii2-bootstrap": "@dev"

Override Bootstrap CSS/JS


The Krajee extension asset bundle(s) by default depend on one of the following asset bundles to load the Bootstrap CSS and JS:

  • yii\bootstrap\BootstrapAsset and/or yii\bootstrap\BootstrapPluginAsset for bootstrap 3.x (bsVersion = 3 setting)

  • yii\bootstrap4\BootstrapAsset and/or yii\bootstrap4\BootstrapPluginAsset for bootstrap 4.x ( bsVersion = 4 setting)

  • yii\bootstrap5\BootstrapAsset and/or yii\bootstrap5\BootstrapPluginAsset for bootstrap 5.x (bsVersion = 5 setting)

This is controlled by the property bsDependencyEnabled within the asset bundle (which defaults to true). One can override this and prevent the default yii2 bootstrap assets (CSS & JS) from loading by doing one or all of the following:

  • Global Override: Set Yii::$app->params['bsDependencyEnabled'] to false in your Yii 2 application config params.php. This setting will be applied for all Krajee Extension Asset Bundles that depend on Bootstrap assets.

    'params' => [
        'bsDependencyEnabled' => false, // this will not load Bootstrap CSS and JS for all Krajee extensions
        // you need to ensure you load the Bootstrap CSS/JS manually in your view layout before Krajee CSS/JS assets
        //
        // other params settings below
        // 'bsVersion' => '5.x',
        // 'adminEmail' => 'admin@example.com'
    ]
    
  • Asset Bundle Specific Override: Set bsDependencyEnabled to false for the specific asset bundle within Yii2 Asset Manager component in your Yii 2 application config file.

    // ...
    'components' => [
        'assetManager' => [
            'bundles' => [
                'kartik\form\ActiveFormAsset' => [
                    'bsDependencyEnabled' => false // do not load bootstrap assets for a specific asset bundle
                ],
            ],
        ],
    ],
    

Note

When setting bsDependencyEnabled to false, you need to ensure that your app code/view layout loads the Bootstrap CSS and JS on your view before the Krajee CSS/JS are loaded to ensure that the Krajee extension JS plugins and CSS styles do not get broken.

Icons for Bootstrap


Bootstrap 5.x / 4.x does not include glyphicons or any other icons framework bundled with the library. Krajee extensions therefore will use Font Awesome 5.x icons instead of glyphicons when working with Bootstrap 5.x / 4.x. You can download Font Awesome 5.x icons from the icons website. Alternatively, you can load the free version of Font Awesome from their CDN.

For Krajee extensions and demos, the Font Awesome Free version is used and loaded as the Icons Display Package on all the Yii2 demo layouts. To include font awesome assets on your page, include the following markup on the HEAD section of your view layout file, when bsVersion is set to 4.x or 5.x.

  • Option 1: Font CSS version of Font Awesome:

    <!-- on your view layout file HEAD section -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
    
  • Option 2: SVG / JS version of Font Awesome (recommended for cleaner scaling vector icons and features like icon layers):

    <!-- on your view layout file HEAD section -->
    <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js" crossorigin="anonymous"></script>
    

    Alternatively, you can use the FontAwesomeAsset from the kartik-v/yii2-icons package to load the SVG/JS version.

    // on your view layout file
    use kartik\icons\FontAwesomeAsset;
    FontAwesomeAsset::register($this);
    

The yii2-widget-datepicker extension can be installed automatically or manually using one of these options:

Composer Package Manager Recommended


Installation via Composer is the recommended and most easy option to install Krajee Yii2 extensions. You can install yii2-widget-datepicker via composer package manager. Either run:

$ php composer.phar require kartik-v/yii2-widget-datepicker "dev-master"

or add:

"kartik-v/yii2-widget-datepicker": "dev-master"

to your application's composer.json file.

Manual Install


You may also manually install the extension to your project (in case your composer install does not work). Just download the source ZIP or TAR ball and extract the extension asset files and folders into your project. You may need to install dependencies manually and also set the namespaces to the extensions in your Yii2 extensions configurations manually.

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:
  • bsVersion: string | int, the bootstrap library version to be used for the extension. Refer the Bootstrap Info section for details and pre-requisites on setting this property.

    • To use with Bootstrap library - you can set this to any string starting with 3 (e.g. 3 or 3.3.7 or 4.x / 3.x)

    • To use with bootstrap 4 - you can set this to any string starting with 4 (e.g. 4 or 4.6.0 or 4.x)

    • To use with bootstrap 5 - you can set this to any string starting with 4 (e.g. 5 or 5.1.0 or 5.x)

  • bsColCssPrefixes: array, the bootstrap grid column css prefixes mapping, the key is the bootstrap versions, and the value is an array containing the sizes and their corresponding grid column css prefixes. The class using this trait, must implement kartik\base\BootstrapInterface. If not set will default to:.

    [
       3 => [
          self::SIZE_X_SMALL => 'col-xs-',
          self::SIZE_SMALL => 'col-sm-',
          self::SIZE_MEDIUM => 'col-md-',
          self::SIZE_LARGE => 'col-lg-',
          self::SIZE_X_LARGE => 'col-lg-',
          self::SIZE_XX_LARGE => 'col-lg-',
       ],
       4 => [
          self::SIZE_X_SMALL => 'col-',
          self::SIZE_SMALL => 'col-sm-',
          self::SIZE_MEDIUM => 'col-md-',
          self::SIZE_LARGE => 'col-lg-',
          self::SIZE_X_LARGE => 'col-xl-',
          self::SIZE_XX_LARGE => 'col-xl-',
       ],
       5 => [
          self::SIZE_X_SMALL => 'col-',
          self::SIZE_SMALL => 'col-sm-',
          self::SIZE_MEDIUM => 'col-md-',
          self::SIZE_LARGE => 'col-lg-',
          self::SIZE_X_LARGE => 'col-xl-',
          self::SIZE_XX_LARGE => 'col-xxl-',
       ],
    ];
    
  • 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.

    • TYPE_BUTTON or 6: Allows you to display just a button to open the calendar. The data will be read and stored in a hidden input. You can configure the button markup using buttonOptions.

    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.

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

  • buttonOptions: array the HTML attributes for the button that is rendered for DatePicker::TYPE_BUTTON. Defaults to ['class'=>'btn btn-secondary btn-default']. The following special options are recognized:

    • label: string, the button label. Defaults to <i class="fas fa-calendar"></i>

  • pickerButton: mixed the calendar picker button configuration - applicable only when type is set to DatePicker::TYPE_COMPONENT_PREPEND or DatePicker::TYPE_COMPONENT_APPEND. 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 false, it will not be displayed.
  • removeButton: mixed the calendar remove button configuration - applicable only when type is set to DatePicker::TYPE_COMPONENT_PREPEND or DatePicker::TYPE_COMPONENT_APPEND. 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 false, it will not be displayed.
  • disabled: boolean whether the input widget is to be entirely disabled. Defaults to false.

  • readonly: boolean whether the input widget is to be entirely readonly. Defaults to false.

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

  • layout: string, the layout template to display the buttons (applicable only when type is one of DatePicker::TYPE_COMPONENT_PREPEND or DatePicker::TYPE_COMPONENT_APPEND or DatePicker::TYPE_RANGE). The following tags will be parsed and replaced for DatePicker::TYPE_COMPONENT_PREPEND and DatePicker::TYPE_COMPONENT_APPEND:

    • {picker}: will be replaced with the date picker button (rendered as a bootstrap input group addon).

    • {remove}: will be replaced with the date clear/remove button (rendered as a bootstrap input group addon).

    • {input}: will be replaced with the HTML input markup that stores the datetime.

    The following tags will be parsed and replaced for DatePicker::TYPE_RANGE

    • {input1}: will be replaced with the HTML input markup that stores the date for attribute1.

    • {separator}: will be replaced with the input group addon for field range separator. The text for the separator is set via the separator property.

    • {input2}: will be replaced with the HTML input markup that stores the date for attribute2.

    The layout defaults to the following value if not set:

    • {picker}{remove}{input} for DatePicker::TYPE_COMPONENT_PREPEND

    • {input}{remove}{picker} for DatePicker::TYPE_COMPONENT_APPEND

    • {input1}{separator}{input2} for DatePicker::TYPE_RANGE

  • 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 '<label class="control-label">Birth Date</label>';
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' => 'yyyy-mm-dd'
    ]
]);
Birth Date
bef
aft

Birth Date
bef
aft

From Date
aft
To Date
// With Prepend
$layout1 = <<< HTML
<div class="input-group-prepend"><span class="input-group-text">Birth Date</span></div>
{picker}
<div class="input-group-prepend"><span class="input-group-text">bef</span></div>
{remove}
<div class="input-group-prepend"><span class="input-group-text">aft</span></div>
{input}
HTML;

echo DatePicker::widget([
    'name' => 'dp_addon_1',
    'type' => DatePicker::TYPE_COMPONENT_PREPEND,
    'value' => '23-Feb-1982',
    'layout' => $layout1,
    'pluginOptions' => [
        'autoclose' => true,
        'format' => 'dd-M-yyyy'
    ]
]);

// With Append
$layout2 = <<< HTML
<div class="input-group-prepend"><span class="input-group-text">Birth Date</span></div>
{input}
<div class="input-group-append"><span class="input-group-text">bef</span></div>
{picker}
<div class="input-group-append"><span class="input-group-text">aft</span></div>
{remove}
HTML;
echo DatePicker::widget([
    'name' => 'dp_addon_2',
    'type' => DatePicker::TYPE_COMPONENT_APPEND,
    'value' => '23-Feb-1982',
    'layout' => $layout2,
    'pluginOptions' => [
        'autoclose' => true,
        'format' => 'dd-M-yyyy'
    ]
]);

// With Range
$layout3 = <<< HTML
<div class="input-group-prepend"><span class="input-group-text">From Date</span></div>
{input1}
<div class="input-group-append"><span class="input-group-text">aft</span></div>
{separator}
<div class="input-group-prepend"><span class="input-group-text">To Date</span></div>
{input2}
<div class="input-group-append">
    <span class="input-group-text kv-date-remove">
        <i class="fas fa-times kv-dp-icon"></i>
    </span>
</div>
HTML;

echo DatePicker::widget([
    'type' => DatePicker::TYPE_RANGE,
    'name' => 'dp_addon_3a',
    'value' => '01-Jul-2015',
    'name2' => 'dp_addon_3b',
    'value2' => '18-Jul-2015',
    'separator' => '<i class="fas fa-arrows-alt-h"></i>',
    'layout' => $layout3,
    'pluginOptions' => [
        'autoclose' => true,
        'format' => 'dd-M-yyyy'
    ]
]);
An example of inline embedded markup with multi date selection capability.
echo '<div class="well border border-secondary rounded p-1" style="width:285px">';
echo DatePicker::widget([
    'name' => 'dp_5',
    'type' => DatePicker::TYPE_INLINE,
    'value' => '23-Feb-1982',
    'type' => DatePicker::TYPE_INLINE,
    'pluginOptions' => [
        'format' => 'dd-M-yyyy',
        'multidate' => true
    ]
    'options' => [
        // you can hide the input by setting the following
        // 'style' => 'display:none'
    ]
]);
echo '</div>';
echo DatePicker::widget([
    'name' => 'dp_6',
    'type' => DatePicker::TYPE_BUTTON,
    'value' => '23-Feb-1982',
    'pluginOptions' => [
        'format' => '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)


A disabled datepicker input (with default initial value)


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


Customize pickerIcon and removeIcon.


Do not render the removeButton.


DatePicker within a bootstrap modal window.

use yii\bootstrap4\Modal;
use kartik\form\ActiveForm;
use kartik\date\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',
    'readonly' => true,
    'pluginOptions' => [
        'autoclose' => true,
        'format' => 'mm/dd/yyyy'
    ]
]);

// A disabled datepicker input (with default initial value)
echo '<label class="control-label">Anniversary</label>';
echo DatePicker::widget([
    'name' => 'anniversary',
    'value' => '02/22/2014',
    'disabled' => true
]);


// 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'
    ]
]);

// Customize `pickerIcon` and `removeIcon`
echo '<label class="control-label">Check Date</label>';
echo DatePicker::widget([
    'name' => 'check_date',
    'value' => '01/29/2014',
    'type' => DatePicker::TYPE_COMPONENT_APPEND,
    'pickerIcon' => '<i class="fas fa-calendar-alt text-primary"></i>',
    'removeIcon' => '<i class="fas fa-trash text-danger"></i>',
    'pluginOptions' => [
        'autoclose' => true,
        'format' => 'mm/dd/yyyy'
    ]
]);

// Do not render the `removeButton`
echo '<label class="control-label">Check Date</label>';
echo DatePicker::widget([
    'name' => 'check_date',
    'value' => '01/29/2014',
    'removeButton' => false,
    '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([
                'title' => 'Datepicker with other fields',
                '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\date\DatePicker
use kartik\form\ActiveForm

// Client validation of date-ranges when using with ActiveForm
$form = ActiveForm::begin([
    'tooltipStyleFeedback' => true, // shows tooltip styled validation error feedback
]);
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' => 'yyyy-mm-dd',
        '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',
    'language' => 'fr',
    'options' => ['placeholder' => 'Enter birth date ...'],
    'pluginOptions' => [
        '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' => ' ; ',
    ]
]);

Note

You can now visit the Krajee Webtips Q & A forum for searching OR asking questions OR helping programmers with answers on these extensions and plugins. For asking a question click here. Select the appropriate question category (i.e. Krajee Plugins) and choose this current page plugin in the question related to field.

The comments and discussion section below are intended for generic discussions or feedback for this plugin. Developers may not be able to search or lookup here specific questions or tips on usage for this plugin.

 
visitors to Krajee Yii2 Demos since 22-May-2017