kartik-v / yii2-widget-datetimepicker

Enhanced Yii2 wrapper for the bootstrap datetimepicker plugin (sub repo split from yii2-widgets)

yii2-widget-datetimepicker

---

     

The DateTimePicker widget is a Yii 2 wrapper for the Bootstrap DateTimePicker plugin with various enhancements. The plugin is a fork of the DateTimePicker plugin by @eternicode and adds the time functionality. The widget is similar to the DateTimePicker widget in most aspects, except that it adds the time functionality and does not support ranges. The widget is specially styled for Yii framework 2.0 and Bootstrap 3 and allows graceful degradation to a normal HTML text input, if the browser does not support JQuery. The widget supports these markups:

• Simple Input Markup
• Component Markup - Addon Prepended
• Component Markup - Addon Appended
• Inline / Embedded Markup
• Solo Button Markup

NOTE: This extension is a sub repo split of yii2-widgets. The split has been done since 08-Nov-2014 to allow developers to install this specific widget in isolation if needed. One can also use the extension the previous way with the whole suite of yii2-widgets.

Installation

The preferred way to install this extension is through composer. Check the composer.json for this extension's requirements and dependencies. Read this web tip /wiki on setting the minimum-stability settings for your application's composer.json.

To install, either run

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

or add

"kartik-v/yii2-widget-datetimepicker": "*"

to the require section of your composer.json file.

Release Changes

NOTE: Refer the CHANGE LOG for details on changes to various releases.

Demo

You can refer detailed documentation and demos and API Documentation on usage of the extension.

Usage

use kartik\datetime\DateTimePicker;

echo '<label>Start Date/Time</label>';
echo DateTimePicker::widget([
    'name' => 'datetime_10',
    'options' => ['placeholder' => 'Select operating time ...'],
    'convertFormat' => true,
    'pluginOptions' => [
        'format' => 'd-M-Y g:i A',
        'startDate' => '01-Mar-2014 12:00 AM',
        'todayHighlight' => true
    ]
]);

License

yii2-widget-datetimepicker is released under the BSD-3-Clause License. See the bundled LICENSE.md for details.

yii2-widget-datetimepicker's Issues

Enhancements for PJAX based reinitialization

Complements enhancements in kartik-v/yii2-krajee-base#52 and kartik-v/yii2-krajee-base#53.

Enhance language locale file parsing and registering

Utilize enhancements in krajee base enh #9 and enh #10

Include styling of markup rightly based on type for `disabled` and `readonly`

ZH-cn支持

message包下面没有ZH-cn支持

Auto validate disability using new `disabled` and `readonly` properties in InputWidget

bootstrap-datetimepicker.js not in the last version

The version of js asset is not the same of the last stable one of https://github.com/smalot/bootstrap-datetimepicker so we cannot use all the options in the documentation, for example hoursDisabled.

Maybe you could include assets from external git repository in your composer.json

orientation issue

I recently updated this yii2 extension and started having issues with orientation.

When I create the DateTimePicker and click on it, the datetime popup opens up in bottom position. Not in the top position. Even when I am on he bottom of the page. It hides behind the window. It should open up at the top position instead.

 echo DateTimePicker::widget([
                'model' => $model,
                'attribute' => 'date',
                'options' => ['placeholder' => 'Date...'],
                'convertFormat' => true,
                'pluginOptions' => [
                    'orientation' => 'top',
                    'autoclose' => true,
                    'format' => Yii::$app->formatter->datetimeFormat,
                    'startDate' => date(Yii::$app->formatter->dateFormat, strtotime('today')),
                    'todayHighlight' => true
                ]
 ]);

Here is an image showing the popup issue

Experienced on Chrome browser

The same issue occurs on the demos you have listed. Also, the orientation option under pluginOptions does not have any effect.

Change language

How can I put my datetimePicker on spanish, I've tried with this:

                    DateTimePicker::widget([
                        'name' => 'fechaPropuesta',
                        'options' => ['placeholder' => 'Selecciona fecha del evento ...'],
                            'model' => $model,
                            'attribute' => 'fechaPropuesta',
                        'pluginOptions' => [
                            'language' => 'es',
                            'autoclose' => true]

How use kartik-v/yii2-widget-datetimepicker with ActiveRecord?

How use kartik-v/yii2-widget-datetimepicker with ActiveRecord?Please,write simple example...

No time display when not english

When I use english as locale, the Widget uses correct time format (Is use DateTimePicker, so this should be clear.

en-US

de-DE

Why is the time here missing? Is something unconfigured here?

Field-Config:

	[
		'attribute' => 'show_till',
		'type' => DetailView::INPUT_DATETIME,
		'widgetOptions' => [
			'pluginOptions' => [
				'autoclose' => true
			]
		]
	],

Left and right arrows disappear for type 4 and type 5

I have a calendar as follows:

echo DateTimePicker::widget([
  'name'=>'GoToDeliveryDate',
  'removeButton' => false,
  'type'=>5,
  'pluginOptions' => [
    'autoclose' => true,
    'todayHighlight' => true,
    'format' => 'dd-MM-yyyy H:ii P',
    'minView' => 2,
    'maxView' => 3,
  ],
  'pluginEvents' => [
  "changeDate" => "function(e) {
    var tzoffset = (new Date()).getTimezoneOffset() * 60000; //offset in milliseconds
    clickedDate = new Date(e.date.valueOf() - tzoffset).toISOString().slice(0, 10);
    window.location = '" . Yii::$app->homeUrl . "delivery/day?date=' + clickedDate;
  }",]
]);

Everything works great except the arrows to go up and down a month are not there. The links work fine but the arrows don't show up. If I change 'type' to 1,2 or 3 then they show up, but type 4 and type 5 have no arrows.

Looking a bit deeper I see the following change. For type 1,2,3 it has this:

<i class="glyphicon glyphicon-arrow-right"></i>

But for type 4,5 it has this:

<i class="glyphicon icon-arrow-right"></i>

Error in DateTimePicker version 1.4.3

In version 1.4.3
I get the error
VM582:454 Uncaught TypeError: Cannot read property 'getTime' of undefined.
when the format is date('H:m d-m-Y')
in version 1.4.2 it's ok

the error is in bootstrap-datetimepicker.js line 454
return new Date(d.getTime() + (d.getTimezoneOffset() * 60000));

DateTimePicker don't work in spanish with Meridiem

DateTimePicker don't work in spanish with Meridiem, because it do not exist in locales, please add this code to the spanish locale
yii2-widget-datetimepicker/assets/js/locales/bootstrap-datetimepicker.es.js

    meridiem: ["am", "pm"],
    weekStart: 1,
    format: "dd/mm/yyyy hh:ii"

Allow picker button to be set as false for append/prepend

Heading meant to be "Bug - pickerButton => false". I have checked this bug by copying your demo page and it does exist there too.

If you have type 2 or 3 i.e. prepend or append with a pickerButton set to false - just wanting the removeButton, then the calendar is also displayed inline.

Have traced thru and seems to occur because of some awkwardness within the plugin - i.e. it turns to inline if the target element is a div (which it needs to be if there is a picker button I guess so that a click on either input or button shows the calendar).

There also seems to be something going on within the plugin to with it recognising and developing process based on the calendar icon's existence.

The simplest solution I have found so far is to position to absolute for the picker button which hides it behind the input and the calendar then shows at correct coordinate. If calendar icon doesn't exist the problems occur - because of the plugin.

Have tried

        if ($this->type == self::TYPE_INPUT || $this->pickerButton === false) {
            $this->registerPlugin('datetimepicker');
        } else {
            $this->registerPlugin('datetimepicker', 'jQuery("#' . $this->_container['id'] . '")');
        }

however then the remove button doesn't work - the datetimepickerplugin design appears a little awkward in this regard.

no inline validation support?

It does not support validation.

Getting unknown property: kartik\widgets\DateTimePicker::disabled

How use yii2-widget-datetimepicker for TYPE_TIMESTAMP?

My migrate:

$this->createTable('{{%event}}', [
'id' => Schema::TYPE_PK,
'adress' => Schema::TYPE_TEXT . ' NOT NULL',
'description' => Schema::TYPE_TEXT . ' NOT NULL',
'header' => Schema::TYPE_TEXT . ' NOT NULL',
'eventtext' => Schema::TYPE_TEXT . ' NOT NULL',
'NumberTickets' => Schema::TYPE_INTEGER . ' NOT NULL',
'Enabled' => Schema::TYPE_BOOLEAN . ' NOT NULL',
'created_at' => Schema::TYPE_TIMESTAMP . ' NOT NULL',
'updated_at' => Schema::TYPE_TIMESTAMP . ' NOT NULL',
'eventtimedateType' => Schema::TYPE_SMALLINT . ' NOT NULL',
'datetimeevent' => Schema::TYPE_TIMESTAMP . ' NOT NULL'
], $tableOptions);

How use yii2-widget-datetimepicker for datetimeevent(TYPE_TIMESTAMP)?

New property `layout` to control rendering of picker and remove buttons

/**
 * @var string the layout template to display the buttons (applicable only  when `type` is one of
 * TYPE_COMPONENT_PREPEND or TYPE_COMPONENT_APPEND). The following tags will be parsed and replaced:
 * - '{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 `layout` defaults to the following value if not set:
 * - '{picker}{remove}{input}' for TYPE_COMPONENT_PREPEND
 * - '{input}{remove}{picker}' for TYPE_COMPONENT_APPEND
 */
public $layout;

Fix setLanguage asset locales registration

Error picking datetime

Hi,
First of all, thank you for your widgets!

I faced with one problem while using your widget. I suppose there is no "meridiem" in Ukrainian translation. I'm working on multilang project (English, Russian, Ukrainian), and when Ukrainian lang is using there is the next error appear:

Thank you.

Use only date?

Hello.
Please, tell me can i use only choose date or i need use datepicker?
Thank you.

JavaScript error

In version 1.4.3 widget don't work. Javascript error in yii2-widget-datetimepicker/assets/js/bootstrap-datetimepicker.js:57. How it fix?

DateTimePicker don't work

After

        echo '<label>Start Date/Time</label>';
        echo DateTimePicker::widget([
            'name' => 'datetime_10',
            'options' => ['placeholder' => 'Select operating time ...'],
            'convertFormat' => true,
            'pluginOptions' => [
                'format' => 'd-M-Y g:i A',
                'startDate' => '01-Mar-2014 12:00 AM',
                'todayHighlight' => true
            ]
        ]);

I have mistake in console

And DateTimePicker don't work.
Also not work in demo page
http://demos.krajee.com/widget-details/datetimepicker

Value not displayed properly

I have installed the plugin using composer and trying to use it with latest version of the yii framework.

I am trying out the example code After picking the date the value seems scrambled.

I have uploaded an image of this issue here:
http://s10.postimg.org/fp6it8m1l/Selection_039.png

ref is undefined on FF 64bit

Can you fix it please in your code?

smalot/bootstrap-datetimepicker#621 (comment)

Ensure DateTimePicker minified javascript is of correct version

Add Traditional Chinese Translations

Can you add the following translation , thank Q

<?php
/**
 * Message translations.
 *
 * This file is automatically generated by 'yii message' command.
 * It contains the localizable messages extracted from source code.
 * You may modify this file by translating the extracted messages.
 *
 * Each array element represents the translation (value) of a message (key).
 * If the value is empty, the message is considered as not translated.
 * Messages that no longer need translation will have their translations
 * enclosed between a pair of '@@' marks.
 *
 * Message string can be used with plural forms format. Check i18n section
 * of the guide for details.
 *
 * NOTE: this file must be saved in UTF-8 encoding.
 */
return [
    'Clear field' => '清除',
    'Select date & time' => '日期和時間',
];

On updating a record with date 0000-00-00 00:00:00 it show November 0

Hello Kartik,

I am using Yii 2.0.4 in a project and in that i am using Yii2 datetimepicker widget v1.0.0.
In a record of a table datetime stored is 0000-00-00 00:00:00, and when I update that record it show November 0 or any month name then '0' on the top.
Please see attached image.

Thanks.
Regards,
Sohel Ahmed Mesaniya
[email protected]

how to disabled minutes selection?

Hi, is there any way how to disable minute selection? I need select only full hours.
I have used this widget in a form , and set the options as below:
'options'=>[ 'type'=>DatetimePicker::TYPE_INPUT, 'pluginOptions'=>[ 'autoclose'=>true, 'minutesDisabled'=>true] ] ],
but it didn't work , I have to still choose the minutes
how to solve this?
thanks

New property `autoDefaultTimezone`

The new property autoDefaultTimezone will default the pluginOptions['timezone'] to Yii::$app->timezone setting if available.

Add a new markup TYPE_BUTTON with hidden input.

Release info for 1.4.1 is missing

Tag release 1.4.1 please. It's unavailable via composer at this moment.

set value by ajax

Hello,
i set a datetimepicker by $('#miss_date').val("07/09/2016 18:00");
but it s not ok.
How can you do please?
Thank's

TypeError: ref is undefined in JS from DateTimePicker

Prerequisites

I download from composer the actual last update.

• I have searched for similar issues in both open and closed tickets and cannot find a duplicate.

Steps to reproduce the issue

1. Use DateTimePicker in yii2
2. In the official page not work too.

demos.krajee.com/widget-details/datetimepicker
here the error is:
TypeError: (intermediate value).toString(...).split(...)[1] is undefined...

ONLY IN FIREFOX!

Inputs are saved hours after

After inputing the datetime values, the values saved are one to two hours after. I didnt touch beforeSave()

Wrong category name for translations

While using DateTimePicker with DatePicker on the same page, I've got this error:

[error][yii\i18n\PhpMessageSource::loadMessages] The message file for category 'kvdatetime' does not exist: /home/php-app/www/vendor/kartik-v/yii2-widget-datepicker/messages/ru/kvdatetime.php

I've found the reason is in translate categories: DatePicker registers "kvdate" category and DateTimePicker registers "kvdatetime" category. And I18N::getMessageSource uses source "kvdate" for category "kvdatetime" because of wildcard matching (this happens only when DatePicker::initI18N executes before DateTimePicker::initI18N).

To fix this bug I have to init unused DateTimePicker widget before DatePicker widget to register translate categories in right order.

Date Range not showing calendar on click of input box.

I am using the below code example for date range. It show the form view as shown in image and did not display the calendar on click on input box.

use kartik\date\DatePicker;

echo 'Select date range';
echo DatePicker::widget([
'model' => $model,
'attribute' => 'start_date',
'attribute2' => 'end_date',
'options' => ['placeholder' => 'Start date'],
'options2' => ['placeholder' => 'End date'],
'type' => DatePicker::TYPE_RANGE,
'form' => $form,
'pluginOptions' => [
'format' => 'dd-M-yyyy',
'autoclose' => true,
]
]);

Fix directory separator for assets path in setLanguage

On updating a record with date 0000-00-00 00:00:00 it show November 0

Hello Kartik,

I am using Yii 2.0.4 in a project and in that i am using Yii2 datetimepicker widget v1.0.0.
In a record of a table datetime stored is 0000-00-00 00:00:00, and when I update that record it show November 0 or any month name then '0' on the top.
Please see attached image.
And same in the case of yii2 widget datepicker.
Thanks.
Regards,
Sohel Ahmed Mesaniya
[email protected]

DateTimePicker don't work in Firefox

Tested on 2 computers. Don't work in Firefox, even this demo:
http://demos.krajee.com/widget-details/datetimepicker

Windows 10, v1607.
Mozilla Firefox 52.0.1.

In my YII2:

• jQuery version: 2.2.4
• yii2-widget-datetimepicker version: 1.4.3

Unexpected input format shown.

I have a model with a mysql datetime field 'publishFrom'.

My form code is:
<?= $form->field($model, 'publishFrom')->widget(DateTimePicker::classname()); ?>

My model rule is:
[['publishFrom'], 'date', 'format' => 'yyyy-MM-dd HH:mm'],

When I load an existing model into the form, the input field shows "2014-11-01 22:00:00". I would like it to show "2014-11-01 22:00", the same format the picker uses by default. Does this extension provide a way to do this?

Addon not working with PJAX

Hey,

If you load the addon in a PJAX call all functionalities are lost because the javascript is not being properly registered on the page. Is there any way around this? I think this may be the case for other widgets as well and the cause might be because document.ready is being used instead of a pjax event?

Improve validation to retrieve the right translation messages folder.

yii2 calender do not appear

I install via composer this plugin and i add in my code the follow example:

use kartik\datetime\DateTimePicker;

echo 'Start Date/Time';
echo DateTimePicker::widget([
'name' => 'datetime_10',
'options' => ['placeholder' => 'Select operating time ...'],
'convertFormat' => true,
'pluginOptions' => [
'format' => 'd-M-Y g:i A',
'startDate' => '01-Mar-2014 12:00 AM',
'todayHighlight' => true
]
]);

But when i click in the button to open calender he do not appear. i'm using this scripts:

<script src="/vsoftservice/web/phpGrid/js/i18n/grid.locale-pt.js" type="text/javascript"></script>
<script src="/vsoftservice/web/phpGrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>

    <!-- jQuery UI 1.10.3 -->
    <script src="/vsoftservice/web/js/jquery-ui-1.10.3.min.js" type="text/javascript"></script>

    <!-- Bootstrap -->
  <!--<script src="/js/jquery-1.12.0.min.js" type="text/javascript"></script>-->
    <script src="/vsoftservice/web/js/moment.js" type="text/javascript"></script>
    <script src="/vsoftservice/web/js/moment-with-locales.js" type="text/javascript"></script>
    <script src="/vsoftservice/web/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="/vsoftservice/web/js/bootstrap-datetimepicker.min.js" type="text/javascript"></script>
    <!-- iCheck -->

    <!-- AdminLTE App -->
    <script src="/vsoftservice/web/js/AdminLTE/app.js" type="text/javascript"></script>
    <script src="/vsoftservice/web/js/jquery-ui-dateTimePiker-Pt.js" type="text/javascript"></script>

I can't use jquery version heither because the phpgrid doesn't work. Exists more dependecies.

Javascript error on 'clear field' button

This is fixed with an update of the bootstrap-datetimepicker.

The message file for category 'app' does not exist

By using the DateControl-DateTimePicker-Widget I get the following error in my log:

The message file for category 'app' does not exist: ********\yii2-website\frontend/messages/de-DE/app.php Fallback file does not exist as well: ********\yii2-website\frontend/messages/de/app.php

Here is my code:

<?= $form->field($model, 'stop')->widget(DateControl::classname(), [
    'type'=>DateControl::FORMAT_DATETIME,
    'saveFormat' => 'php:U',
    'options' => [
        'pluginOptions' => [
            'todayHighlight' => true,
            'initialDate' => date('d.m.Y').' 23:55',
        ],
        'options' => ['style'=>'width:140px'],
    ],
]) ?>

reset form if widget in modal window

$form->field($model, 'admin_time')->label(false)->widget(DateTimePicker::className(),
                        [
                            'name'  => 'time',
                            'value'  => null,
                            'convertFormat' => true,
                            'removeButton' => false,
                            'readonly' => true,
                            'size' => 'sm',
                            'options' => [
                                'id' => 'test-date',
                            ],
                            'pluginOptions' => [
                                'todayBtn' => true,
                                'todayHighlight' => true,
                                'autoclose' => true,
                                'format' => 'yyyy-mm-dd hh:ii',
                            ],
                        ]
                    );

if add this in some page all works ok.
but if this input into form in modal, then trigger open calendar, all form data reset

[FR] Change jquery syntax for events

I'm using your plugin in a common scenario:

[...]
$js = '
function (event) {
    if (event.date)
    {
        [...]
    }
}
';
$pickerOptions['pluginEvents']['changeDate'] = $js;
echo $form->field($model, "attribute_date")
    ->widget(DateTimePicker::className(), $pickerOptions);
[...]

Looking at the code I see this javascript:

$("#model-attribute_date-datetime").on("changeDate", function (event) {
        if (event.date)
        {
            [...]
        }
    });

Is it possible to change the syntax to this?

$(document).on("changeDate", "#model-attribute_date-datetime", function (event) {
        if (event.date)
        {
            [...]
        }
    });

It is very useful when the field is deleted via javascript and created again: current javascript does not fire the changeData event after appending the new field instance to DOM, while the new syntax does.
Thanks.

Yii2 doesnt see module from /vendor

i installed this extension via composer and tried such example:
use kartik\datetime\DateTimePicker;

echo 'Start Date/Time';
echo DateTimePicker::widget([
'name' => 'datetime_10',
'options' => ['placeholder' => 'Select operating time ...'],
'convertFormat' => true,
'pluginOptions' => [
'format' => 'd-M-Y g:i A',
'startDate' => '01-Mar-2014 12:00 AM',
'todayHighlight' => true
]
]);

in result i have:
PHP Fatal Error – yii\base\ErrorException
Class 'kartik\datetime\DateTimePicker' not found

Adding italian message

<?php
/**
 * Message translations.
 *
 * This file is automatically generated by 'yii message' command.
 * It contains the localizable messages extracted from source code.
 * You may modify this file by translating the extracted messages.
 *
 * Each array element represents the translation (value) of a message (key).
 * If the value is empty, the message is considered as not translated.
 * Messages that no longer need translation will have their translations
 * enclosed between a pair of '@@' marks.
 *
 * Message string can be used with plural forms format. Check i18n section
 * of the guide for details.
 *
 * NOTE: this file must be saved in UTF-8 encoding.
 */
return [
    'Clear field' => 'Pulisci',
    'Select date & time' => 'Seleziona data e ora',
];