topics-date-picker.md

DatePicker で日付の入力を扱う

[[yii\jui\DatePicker|DatePicker]] ウィジェットを使うと、非常に便利な方法でユーザから日付の入力を収集することが出来ます。 下記の例では、deadline 属性を持つ Task モデルを使用します。 deadline 属性は、ActiveForm を使ってユーザによって設定され、その値は unix タイムスタンプとしてデータベースに保存されます。

この状況において、共同して働くコンポーネントが三つあります。

• [[yii\jui\DatePicker|DatePicker]] ウィジェット。フォームの中で用いられ、モデルの deadline 属性のためのインプット・フィールドを表示します。
• フォーマッタ アプリケーション・コンポーネント。ユーザに表示される日付の書式について責任を持ちます。
• DateValidator。ユーザの入力を検証し、それを unix タイムスタンプに変換します。

最初に、フォーム・フィールドの [[yii\widgets\ActiveField::widget()|widget()]] メソッドを使って、フォームに日付選択のインプット・フィールドを追加します。

<?= $form->field($model, 'deadline')->widget(\yii\jui\DatePicker::className(), [
    // bootstrap を使っている場合は、次の行がインプット・フィールドの正しいスタイルをセットします
    'options' => ['class' => 'form-control'],
    // ... ここで、DatePicker のプロパティをさらに構成することが出来ます
]) ?>

第二のステップは、モデルの rules() メソッド において、date バリデータを構成することです。

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

        // 空の値がデータベースで NULL として保存されることを保証する
        ['deadline', 'default', 'value' => null],

        // 日付を検証し、`deadline` 属性を unix タイムスタンプで上書きする
        ['deadline', 'date', 'timestampAttribute' => 'deadline'],
    ];
}

ここでは、追加で デフォルト値フィルタ を使って、空の値がデータベースで NULL として保存されることを保証しています。 日付の値が required である場合は、このフィルタを省略することが出来ます。

日付選択ウィジェットと date バリデータのデフォルトの日付書式は、両方とも、Yii::$app->formatter->dateFormat の値です。 このプロパティを使えば、アプリケーション全体の日付書式を構成することが出来ます。 日付書式を変更するためには、[[yii\validators\DateValidator::format]] と [[yii\jui\DatePicker::dateFormat]] を構成しなければなりません。