Обробка вводу дати з допомогою DatePicker ¶

Збирання вводу дат від користувачів можливо виконати даже зручним способом, завдяки віджету DatePicker. В наступному прикладі ми будемо використовувати модель Task, яка має атрибут deadline, який повинен бути встановлений користувачем, використовуючи ActiveForm. Значення атрибуту буде збережено в якості мітки часу Unix в базі даних.

В цій ситуації є 3 компоненти, що взаємодіють між собою:

• Віджет DatePicker, який використовується у формі для відображення поля введення атрибуту моделі.
• Компонент додатку formatter, який відповідає за формат дати, що відображається користувачеві.
• DateValidator, який перевіряє що ввів користувач і конвертує в мітку часу Unix.

Спершу ми додамо поле вибору дати до форми, використовуючи метод yii\widgets\ActiveField::widget() поля форми:

<?= $form->field($model, 'deadline')->widget(\yii\jui\DatePicker::className(), [
    // якщо ви використовуєте bootstrap, наступний рядок буде встановлювати правильний стиль для поля вводу
    'options' => ['class' => 'form-control'],
    // ... ви можете налаштувати більше властивостей DatePicker тут
]) ?>

Другим кроком буде налаштування валідатора дати в методі моделі rules():

public function rules()
{
    return [
        // ...

        // забезпечить збереження порожніх значень в базі данних у вигляді NULL
        ['deadline', 'default', 'value' => null],

        // валідація дати і перезапис `deadline` з міткою часу Unix
        ['deadline', 'date', 'timestampAttribute' => 'deadline'],
    ];
}

Ми можемо також додати стандартні значення фільтру, щоб забезпечити збереження порожніх значень в базі данних у вигляді NULL. Ви можете пропустити цей крок, якщо значення дати є обовʼязковим.

Формат за замовчуванням для вибору дати і валідації значення дати міститься в Yii::$app->formatter->dateFormat, таким чином ви можете використовувати ці властивості, щоб налаштувати формат дати для всього додатку. Щоб змінити формат дати ви повинні налаштувати yii\validators\DateValidator::format та yii\jui\DatePicker::$dateFormat.