日/時フィールド

日付フィールドは date picker を提供します。同様に、オプションで time picker を提供します。

# 設定

日/時フィールドは、日付、時刻、もしくはその両方にするか、お好みで選択できます。

# テンプレート記法

# 日/時フィールドによるエレメントの照会

日/時フィールドを持つエレメントを照会する場合、フィールドのハンドルにちなんで名付けられたクエリパラメータを利用して、日/時フィールドのデータに基づいた結果をフィルタできます。

利用可能な値には、次のものが含まれます。

取得するエレメント
':empty:' 選択された日付を持たない。
':notempty:' 選択された日付を持つ。
'>= 2018-04-01' 2018-04-01 以降に選択された日付を持つもの。
'< 2018-05-01' 2018-05-01 より前に選択された日付を持つもの。
['and', '>= 2018-04-04', '< 2018-05-01'] 2018-04-01 から 2018-05-01 の間に選択された日付を持つもの。
['or', '< 2018-04-04', '> 2018-05-01'] 2018-04-01 より前、または、2018-05-01 より後に選択された日付を持つもの。
{# Fetch entries with with a selected date in the next month #}
{% set start = now|atom %}
{% set end = now|date_modify('+1 month')|atom %}

{% set entries = craft.entries()
    .myFieldHandle(['and', ">= #{start}", "< #{end}"])
    .all() %}

atom フィルタは日付を ISO-8601 タイムスタンプに変換します。

# 日/時フィールドデータの操作

テンプレート内で日/時フィールドのエレメントを取得する場合、日/時フィールドのハンドルを利用して、そのデータにアクセスできます。

{% set value = entry.myFieldHandle %}

それは、選択された日付を表す DateTime オブジェクトを提供します。日付が選択されていない場合、null になります。

{% if entry.myFieldHandle %}
    Selected date: {{ entry.myFieldHandle|datetime('short') }}
{% endif %}

Craft と Twig は、必要に応じて使用できる日付を操作するためのいくつかの Twig フィルタを提供します。

# 投稿フォームで日/時フィールドを保存

日/時フィールドを含める必要があるentry formがある場合、入力項目 date または datetime-local を作成できます。

ユーザーに日付だけを選択させたい場合、入力項目 date を使用します。

{% set currentValue = entry is defined and entry.myFieldHandle
    ? entry.myFieldHandle|date('Y-m-d', timezone='UTC')
    : '' %}

<input type="date" name="fields[myFieldHandle]" value="{{ currentValue }}">

ユーザーに時刻も選択させたい場合、入力項目 datetime-local を使用できます。

{% set currentValue = entry is defined and entry.myFieldHandle
    ? entry.myFieldHandle|date('Y-m-d\\TH:i', timezone='UTC')
    : '' %}

<input type="datetime-local" name="fields[myFieldHandle]" value="{{ currentValue }}">

より良いブラウザサポートを待っている間 に入力項目 datedatetime-local を導入するため、HTML5Forms.js ポリフィルを利用できます。

# タイムゾーンのカスタマイズ

デフォルトでは、Craft は日付が UTC で投稿されていると想定します。Craft 3.1.6 から、入力欄の name を fields[myFieldHandle][datetime]、不可視項目の name を fields[myFieldHandle][timezone] とし、有効な PHP タイムゾーンをセットすることによって、異なるタイムゾーンの日付を投稿できます。

{# Use the timezone selected under Settings → General Settings → Time Zone #}
{% set tz = craft.app.getTimezone() %}

{# Or set a specific timezone #}
{% set tz = 'America/Los_Angeles' %}

{% set currentValue = entry is defined and entry.myFieldHandle
    ? entry.myFieldHandle|date('Y-m-d\\TH:i', tz)
    : '' %}

<input type="datetime-local" name="fields[myFieldHandle][datetime]" value="{{ currentValue }}">
{{ hiddenInput('fields[myFieldHandle][timezone]', tz) }}

または、どのタイムゾーンで日付を投稿するかをユーザーに決定させることもできます。

{% set currentValue = entry is defined and entry.myFieldHandle
    ? entry.myFieldHandle|date('Y-m-d\\TH:i', timezone='UTC')
    : '' %}

<input type="datetime-local" name="fields[myFieldHandle][datetime]" value="{{ currentValue }}">

<select name="fields[myFieldHandle][timezone]">
    <option value="America/Los_Angeles">Pacific Time</option>
    <option value="UTC">UTC</option>
    <!-- ... -->
</select>

# 日付と時刻を別々に投稿

日付と時刻を別々の HTML 入力欄として投稿したい場合、それらの name を fields[myFieldHandle][date]、および、fields[myFieldHandle][time] にします。

日付入力欄は YYYY-MM-DD フォーマット、または、現在のロケールの短縮日付フォーマットのいずれかをセットできます。

時刻入力欄は HH:MM フォーマット(24時間表記)、または、現在のロケールの短縮時刻フォーマットのいずれかをセットできます。

現在のロケールの日付と時刻のフォーマットを調べるには、テンプレートに次のコードを追加してください。

Date format: <code>{{ craft.app.locale.getDateFormat('short', 'php') }}</code><br>
Time format: <code>{{ craft.app.locale.getTimeFormat('short', 'php') }}</code>

次に、PHP の date() ファンクションのドキュメントを参照し、各フォーマットの文字の意味を確認してください。