Yii2 datetimepicker

Yii2 datetimepicker

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

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

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

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

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

Yii2 datetimepicker

Фреймворк YII2. Быстрая разработка с современным PHP фреймворком

Узнай тонкости современной веб-разработки с помощью фреймворка YII2

Узнать подробнее

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

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 datetimepicker

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

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

Фреймворк YII2: теория и первая практика

Овладейте азами фреймворка Yii2 за 5 дней!

Получить

Метки:

Похожие статьи:

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

Комментарии Facebook:

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

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

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

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

  2. Гульнара

    Привет, 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. Гульнара

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

    Такая ошибка — 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',
    ];
    }

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree