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

Yevhen Terentiev

Last update: Mar 14, 2022

Related tags

Frameworks yii2-datetime-widget

Overview

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 :

 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:

false, 'sideBySide' => true, 'locale' => 'zh-cn', 'widgetPositioning' => [ 'horizontal' => 'auto', 'vertical' => 'auto' ] ] ] ]); ?>">

 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:

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

Add custom JS events:

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

Comments

Output 1970-01-01 00:00:00 on Empty String

When the form is submitted with empty string it will generate 1970-01-01 00:00:00 is this expected behaviour?

as I don't like it, I do a quick fix by changing line 104 to if ($value !== null && $value !== '') {

opened by shyevsa 1

$Invalid Parameter – yii\base\InvalidParamException$

Invalid Parameter – yii\base\InvalidParamException

Hi, I got the error:

The file or directory to be published does not exist: vendor/bower/eonasdan-bootstrap-datetimepicker

i replace this

public $sourcePath = '@bower/eonasdan-bootstrap-datetimepicker';
public $sourcePath = '@bower/moment';

for this

public $sourcePath = '@bower/bower-asset/eonasdan-bootstrap-datetimepicker';
public $sourcePath = '@bower/bower-asset/moment';

opened by gugoan 1

Exception Thrown when KeepInvalid is set a true
When we have KeepInvalid option set as true and we submit a not supported date (ex 2018-10-10 10) we get an Exception thrown.

The problem happens here when call Yii::$app->formatter->asDatetime("2018-10-10 10") to a wrong date

$this->options['value'] = array_key_exists('value', $this->options) ? $this->options['value'] : Yii::$app->formatter->asDatetime($value, $this->phpDatetimeFormat); }
opened by k3bra 1
Not work if two datetimepicker in modal bootstrap.

Dear trntv,

if i have 2 datetimepicker, the first is success, but the second have an error like this : Uncaught Error: Could not initialize DateTimePicker without an input element at c (:2:2239) at HTMLButtonElement.

opened by ahmadfadlydziljalal 1

timezone problem

My $model->date_s = 2017-03-06 19:00:00

But the input field default is 2017-03-06T20:00:00+0100

if in phpDatetimeFormat i insert eg yyyy-MM-DD HH:mm:ss i've error because is not in your protected $defaultPhpMomentMapping

this is the config ` $form->field($model_post, 'schedule')->widget(

    'trntv\yii\datetime\DateTimeWidget',
    [
        'phpDatetimeFormat' => 'yyyy-MM-dd\'T\'HH:mm:ssZZZZZ',
        'clientOptions' => [
            //'inline' => true,
            'minDate' => new \yii\web\JsExpression('new Date("' . $date->format('Y-m-d') . '")'),
            'allowInputToggle' => true,
            'sideBySide' => true,
            'locale' => 'it-IT',
            'disabledDates' => $date_disabled,
            'widgetPositioning' => [
                'horizontal' => 'auto',
                'vertical' => 'auto'
            ],
            //'format' => 'dddd d MMMM YYYY : HH:mm',
            'stepping' => '30',
        ]
    ])`

opened by trinkity 3

Failed to parse time string (16/08/2016 00:00) at position 0 (1)

Hi,

Thanks for creating this widget. I installed it successfully but I cannot set 'MM/dd/yyyy HH:mm' format for phpDatetimeFormat, it allows me to set following format:

'phpDatetimeFormat' => 'dd/MM/yyyy HH:mm',

Hence I cannot submit dates which are more than 12 because I get following error:

'16/08/2016 00:00' is not a valid date time value: DateTime::__construct(): Failed to parse time string (16/08/2016 00:00) at position 0 (1): Unexpected character

Could you please help me.

opened by tigran-k 1