От автора: приветствую вас, друзья. Мы продолжаем цикл статей, посвященных знакомству с фреймворком Yii2. В одной из предыдущих статей мы установили расширение yii2-widget-datepicker, с помощью которого можно прикрепить к полю формы календарь выбора даты. Это очень удобно и, к тому же, смотрится интересно. В этой статье мы установим похожее расширение, которое поможет выбрать не только дату, но и время – это дополнение yii2-widget-datetimepicker.
Когда может быть полезен виджет Yii2 datetimepicker и почему недостаточно просто виджета для выбора даты? Думаю, ответ вы знаете и сами. Возьмем тот же пример с записью на прием к врачу. Как правило, в этом случае желательно дать пользователю возможность не только выбора даты, но и времени приема. Это было бы логично. Ну что же, давайте установим интересующий нас widget.
Перейдем на страницу дополнения и возьмем необходимую команду для установки из консоли:
| 1 | composer require kartik-v/yii2-widget-datetimepicker "*" |
Современные тенденции и подходы в веб-разработке
Узнайте алгоритм быстрого роста с нуля в сайтостроении
Узнать подробнееОткроем консоль, перейдем, как обычно, в папку проекта и выполним скопированную команду:
Теперь вернемся на страницу документации и возьмем оттуда базовый пример использования виджета:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | 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 можно посмотреть в этом цикле уроков.
Современные тенденции и подходы в веб-разработке
Узнайте алгоритм быстрого роста с нуля в сайтостроении
Узнать подробнее
Хотите узнать, что необходимо для создания сайта?
Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!
Смотреть видео
Добрый день!
Простое расширение, но не могу понять, в чем конфликт версий. По непонятным причинам выдается ошибка jQuery
TypeError: jQuery(…).datetimepicker is not a function
Может кто-нибудь сталкивался?
А есть ли похожее альтернативное решение — время и календарь?
Привет, Alisher !
Вот так:
field($model, ‘date’)->widget(DateTimePicker::classname(), [
'name' => 'date',
'value' => '18-06-1018, 14:45',
'pluginOptions' => [
'autoclose'=>true,
'format' => 'dd-M-yyyy hh:ii'
]
]);
?>
Соответственно параметры в квадратных скобках подставляешь какие тебе нужно.
Привет, Константин!
Такая ошибка — 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',
];
}