shirase55/yii2-datetime-widget

Date/Time Picker widget for Yii2 framework

Yii2 Date/Time Picker Widget

Date/Time Picker widget for Yii2 framework Based on Eonasdan's Bootstrap 3 Date/Time Picker , _(*1)

Demo

Since this is a part of yii2-starter-kit it's demo can be found in starter kit demo here., _(*2)

Login: webmaster
Password: webmaster

Before you start

Make sure you have fxp/composer-asset-plugin installed:, _(*3)

composer global require fxp/composer-asset-plugin

Installation

The preferred way to install this extension is through composer., _(*4)

Either run, _(*5)

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

or add, _(*6)

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

to the require section of your composer.json file., _(*7)

Usage

Once the extension is installed, simply use it in your code by :, _(*8)

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

Options

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

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

showAddon - show or hide input-addon (Default: true), _(*11)

addonContent - addon content, _(*12)

phpMomentMapping - formats map (Default: true), _(*13)

containerOptions - widget container optionsgit, _(*14)

clientOptions - full list of available options, _(*15)

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

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

Examples

ActiveField input widget:, _(*17)

<?php echo $form->field($model, 'datetime')->widget(
    'shirase55\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:, _(*18)

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

Add custom JS events:, _(*19)

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