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 DateTimePicker::bsVersion property is set, in addition to Yii::$app->params['bsVersion'], the extension level setting (DateTimePicker::bsVersion property) will override the Yii::$app->params['bsVersion']. If DateTimePicker::bsVersion property is not set, and Yii::$app->params['bsVersion'] is also not set, DateTimePicker::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
              ],
          ],
      ],
  ],
  

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);
  

Composer Package Manager Recommended

---

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

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

or add:

"kartik-v/yii2-widget-datetimepicker": "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.

echo '<label class="control-label">Event Time</label>';
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'
    ]
]);

Inline embedded markup with a form reset button that will reset the values to the original.

<div class="border border-secondary rounded p-1" style="width:320px">
    <?= DateTimePicker::widget([
        'name' => 'dp_4',
        'type' => DateTimePicker::TYPE_INLINE,
        'value' => 'Tue, 23-Feb-1982, 14:45',
        'pluginOptions' => [
            'format' => 'D, dd-M-yyyy, hh:ii'
        ]
    ]); ?>
</div>

This example shows the usage of a solo button markup with a hidden input (note the pluginOptions['autoClose'] property setting whereby the calendar picker auto closes on selection completion)

echo DateTimePicker::widget([
    'name' => 'dp_5',
    'type' => DateTimePicker::TYPE_BUTTON,
    'value' => '23-Feb-1982 01:10',
    'pluginOptions' => [
        'format' => 'dd-M-yyyy hh:ii',
        'autoclose' => true
    ]
]);

This example shows an alternate usage of a solo button markup where you can display the input containing the selected date (note the options property setting). This scenario also shows how you can show the remove button by setting the layout property to contain the necessary {remove} token.

echo DateTimePicker::widget([
    'name' => 'dp_5',
    'type' => DateTimePicker::TYPE_BUTTON,
    'value' => '23-Feb-1982 01:10',
    'layout' => '{picker} {remove} {input}',
    'options' => [
        'type' => 'text',
        'readonly' => true,
        'class' => 'text-muted small',
        'style' => 'border:none;background:none'
    ],
    'pluginOptions' => [
        'format' => 'dd-M-yyyy hh:ii',
        'autoclose' => true
    ]
]);

use common\components\Modal;
use kartikorm\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'
    'readonly' => true,
    'pluginOptions' => [
        'autoclose' => true,
        'format' => 'mm/dd/yyyy hh:ii:ss'
    ]
]);

// A disabled datetimepicker input (with default initial value)
echo '<label class="control-label">Startup Time</label>';
echo DateTimePicker::widget([
    'name' => 'startup_time',
    'value' => '02/22/2014 05:10:20'
    'disabled' => true
]);

// 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([
                'title' => 'DateTimePicker 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">
                    <?=
                    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>

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 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' => [
        'format' => 'dd-MM-yyyy HH:ii P',
        'autoclose' => true,
    ]
]);

// Use appended addon, change picker position, and display meridian format and today button
echo DateTimePicker::widget([
    'name' => 'datetime_18',
    'value' => '08-Apr-2004 10:20 AM',
    'type' => DateTimePicker::TYPE_COMPONENT_APPEND,
    'pluginOptions' => [
        'format' => 'dd-MM-yyyy HH:ii P',
        'showMeridian' => true,
        'autoclose' => true,
        'todayBtn' => true
    ]
]);

// Change button positions by configuring `layout` property. For 
// example display the picker and remove buttons at opposite ends.
echo DateTimePicker::widget([
    'name' => 'datetime_19',
    'value' => '08-Apr-2004 10:20 AM',
    'type' => DateTimePicker::TYPE_COMPONENT_PREPEND,
    'layout' => '{picker}{input}{remove}',
    'removeButton' => ['position' => 'append'],
    'pluginOptions' => [
        'format' => 'dd-MM-yyyy HH:ii P',
        'autoclose' => true,
    ]
]);

// Use advanced plugin properties. For example disable date-time selections
// for certain days of the week and certain hours.
echo DateTimePicker::widget([
    'name' => 'datetime_20',
    'value' => '08-Apr-2004 10:20 AM',
    'type' => DateTimePicker::TYPE_COMPONENT_APPEND,
    'pluginOptions' => [
        'format' => 'dd-MM-yyyy HH:ii P',
        'autoclose' => true,
        'daysOfWeekDisabled' => '0,6',
        'hoursDisabled' => '0,1,2,3,4,5,6,7,8,19,20,21,22'
    ]
]);