Awesome

Yii2 Date/Time Picker Widget

Date/Time Picker widget for Yii2 framework Based on Eonasdan's Bootstrap 3 Date/Time Picker

Demo

Since this is a part of yii2-starter-kit it's demo can be found in starter kit demo here.

Login: webmaster
Password: webmaster

Before you start

Make sure you have fxp/composer-asset-plugin installed:

composer global require fxp/composer-asset-plugin

Installation

The preferred way to install this extension is through composer.

Either run

php composer.phar require trntv/yii2-datetime-widget

or add

"trntv/yii2-datetime-widget": "*"

to the require section of your composer.json file.

Usage

Once the extension is installed, simply use it in your code by :

<?php echo $form->field($model, 'attribute')->widget(
        'trntv\yii\datetime\DateTimeWidget',
        [ ... options ... ]
    ); 
?>

Options

phpDatetimeFormat - PHP ICU datetime format (Default: dd.MM.yyyy, HH:mm)

momentDatetimeFormat - Moment JS datetime format (Default: DD.MM.YYYY, HH:mm)

showAddon - show or hide input-addon (Default: true)

addonContent - addon content

phpMomentMapping - formats map (Default: true)

containerOptions - widget container optionsgit

clientOptions - full list of available options

*** Note: to enable widget show on textbox focus when used in a button group, use allowInputToggle option:

...
'clientOptions' => [
    'allowInputToggle' => true
]
...

Examples

ActiveField input widget:

<?php echo $form->field($model, 'datetime')->widget(
    'trntv\yii\datetime\DateTimeWidget',
    [
        'phpDatetimeFormat' => 'yyyy-MM-dd\'T\'HH:mm:ssZZZZZ',
        'clientOptions' => [
            'minDate' => new \yii\web\JsExpression('new Date("2015-01-01")'),
            'allowInputToggle' => false,
            'sideBySide' => true,
            'locale' => 'zh-cn',
            'widgetPositioning' => [
               'horizontal' => 'auto',
               'vertical' => 'auto'
            ]
        ]
    ]
]); ?>

Standalone widget for date only:

<?php echo trntv\yii\datetime\DateTimeWidget::widget([
    'phpDatetimeFormat' => 'yyyy-MM-dd',
]) ; ?>

Add custom JS events:

<?php echo trntv\yii\datetime\DateTimeWidget::widget([
    'clientEvents' => [
        'dp.change' => 'function(e){
            console.log('dp.change');
        }',
    ],
]) ; ?>