Yii2 datetimepicker

От автора: приветствую вас, друзья. Мы продолжаем цикл статей, посвященных знакомству с фреймворком Yii2. В одной из предыдущих статей мы установили расширение yii2-widget-datepicker, с помощью которого можно прикрепить к полю формы календарь выбора даты. Это очень удобно и, к тому же, смотрится интересно. В этой статье мы установим похожее расширение, которое поможет выбрать не только дату, но и время – это дополнение yii2-widget-datetimepicker.

Когда может быть полезен виджет Yii2 datetimepicker и почему недостаточно просто виджета для выбора даты? Думаю, ответ вы знаете и сами. Возьмем тот же пример с записью на прием к врачу. Как правило, в этом случае желательно дать пользователю возможность не только выбора даты, но и времени приема. Это было бы логично. Ну что же, давайте установим интересующий нас widget.

Перейдем на страницу дополнения и возьмем необходимую команду для установки из консоли:

composer require kartik-v/yii2-widget-datetimepicker "*"

Откроем консоль, перейдем, как обычно, в папку проекта и выполним скопированную команду:

Теперь вернемся на страницу документации и возьмем оттуда базовый пример использования виджета:

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

Добавим пример в нужное представление и посмотрим на результат:

Теперь мы последовательно можем выбрать дату и время, которые будут подставлены в прикрепленное поле. Все просто.

На этом все. Больше о фреймворке вы можете узнать из наших бесплатных или платных уроков. Также создание простейшего блога на Yii2 можно посмотреть в этом цикле уроков.

Комментарии Вконтакте:

Комментарии (3)

1. Константин

   2018-03-07 в 22:55

   Добрый день!
   Простое расширение, но не могу понять, в чем конфликт версий. По непонятным причинам выдается ошибка jQuery
   TypeError: jQuery(…).datetimepicker is not a function

   Может кто-нибудь сталкивался?
   А есть ли похожее альтернативное решение — время и календарь?

   Ответить
2. Гульнара

   2018-06-19 в 05:17

   Привет, Alisher !
   Вот так:

   field($model, ‘date’)->widget(DateTimePicker::classname(), [
   'name' => 'date',
   'value' => '18-06-1018, 14:45',
   'pluginOptions' => [
   'autoclose'=>true,
   'format' => 'dd-M-yyyy hh:ii'
   ]
   ]);
   ?>

   Соответственно параметры в квадратных скобках подставляешь какие тебе нужно.

   Ответить
3. Гульнара

   2018-06-19 в 05:22

   Привет, Константин!

   Такая ошибка — TypeError: jQuery(…).datetimepicker is not a function
   может выпадать из-за того что подключены лишние js файлы.
   В backend\assets их лучше закомментировать, это мне помогло.

   Текст файла ниже.

   namespace backend\assets;

   use yii\web\AssetBundle;

   /**
   * @author Qiang Xue
   * @since 2.0
   */
   class AppAsset extends AssetBundle
   {
   public $basePath = ‘@webroot’;
   public $baseUrl = ‘@web’;
   public $css = [
   'css/site.css',
   'css/style.css',
   ];
   public $js = [
   // 'js/jquery-3.2.1.min.js',
   ];
   public $depends = [
   'yii\web\YiiAsset',
   'yii\bootstrap\BootstrapAsset',
   ];
   }

   Ответить