時刻/日付選択フィールド

日付/時刻フィールドを使用して、コレクション アイテムの日付と時刻を指定します。

時刻/日付選択フィールドは コレクション あなたと同僚がコレクションアイテムの特定の時間と日付を定義できるフィールド。指定された時間と日付の値は、 コレクションリスト または コレクションページこのフィールドは、コレクション リストを配置および整理したり、コレクション リストおよびページ内の要素の条件付き表示を確立したりするためにも使用できます。

Webflow は、作成日、公開日、変更日を自動的に監視するため、これらに対して個別のフィールドを作成する必要がありません。

通常のアプリケーション

  • 将来の日付または時刻(今後のイベントやリリース日など)
  • 過去の日付または時刻(誕生日や歴史的な出来事など)
  • カスタム公開日を手動で定義する

このガイドの内容は次のとおりです。

  • 時刻/日付選択フィールドの設定
  • 日付と時刻の定義
  • 動的な日付と時刻を表示する
  • 時間/日付フィールドでコレクションリストをフィルタリングする
  • 時間/日付フィールドを使用してコレクションリストを並べ替える
  • 時間/日付フィールドを使用して条件付き表示を実装する

時刻/日付選択フィールドの設定

新規または既存のコレクションに日付/時間選択フィールドを統合することができます。コレクション設定内で、 新しいフィールド そして、 時間/日付 分野。

時間セレクターを含めるオプションがあります。また、他のフィールドと同様に、フィールドが必須かどうかを指定できます。

日付と時刻の定義

提供されているピッカーを使用して日付と時刻を設定することも、日付 (MM/DD/YYYY) または日付と時刻の値 (MM/DD/YYYY HH:MM AM) を手動で入力することもできます。

動的な日付と時刻を表示する

デザイナーは、デザインに動的な日付と時刻の値を表示するための複数のテクニックを持っています。これらの値をコレクション リストとページに組み込むには、次の手順を実行します。

  1. 日付と時刻のフィールドをテキスト要素にリンクする
  2. 日付と時刻の値をフォーマットする

日付と時刻の値をテキスト要素にリンクする

コレクション リストまたはページ内の任意のテキスト要素に日付と時刻の値を添付できます。日付と時刻の要素を作成してリンクするには:

  1. コレクションリストまたはページにテキスト要素を追加する
  2. チェックしてください テキストを取得 オプション内 内部テキスト設定
  3. 日付/時刻フィールドを フィールドドロップダウン
  4. 日付(および時刻)を選択してください フォーマット

キャンバス上の要素ラベルの横にある設定アイコンをクリックするか、設定パネル (D) に移動すると、内部テキスト設定にアクセスできます。

リンクを切断するには、「テキストを取得”オプション 内部テキストの設定。

日付と時刻の値の書式設定

日付と時刻のフィールドを要素にリンクすると、「形式」ドロップダウンでさまざまな日付、時刻、日付/時刻の書式設定の選択肢が利用できるようになります。

日付/時刻フィールドは、デザイン内で複数回使用できます。これにより、日付 (日、月、年) と時刻 (時間) のセグメント化された部分を表示する独自のレイアウトとデザインを作成できます。複数のテキスト要素を異なる日付/時刻セグメントにリンクすることで、これを実現できます。たとえば、1 つを日にリンクし、別の 1 つを月にリンクし、3 つ目を年にリンクします。

時間/日付フィールドでコレクションリストをフィルタリングする

たとえば、今後のイベントのコレクション リストを作成する場合は、時間/日付フィールドを使用してフィルターを適用し、将来のイベントを表示し、過去のイベントを非表示にすることができます。これを実現するには、次の手順を実行します。

  1. フィルターが必要なコレクションリストを選択します
  2. アクセス 設定パネル(D)
  3. 追加 フィルター 内で コレクションリストの設定
  4. 最初のドロップダウンで時間と日付のフィールドを選択します
  5. 選ぶ 以降または等しい
  6. 日数を 0 に指定します (今日のフィルタリングを意味します)
  7. 保存

時間/日付フィールド値で利用できるフィルター条件は次のとおりです。

  1. 設定されています: この日付フィールドに定義された日付を持つコレクションアイテムを検索します
  2. 設定されていません: このフィールドに指定された日付がないコレクションアイテムを検索します
  3. 以降または等しい: 選択した日付以降に設定されたアイテムをフィルタリングします
  4. 以前または等しい: 選択した日付以前に設定された項目をフィルタリングします。

「次の値より後か前か等しい」の場合、次の操作を実行できます。

  • 期間(日、週、月、年)を選択します
  • 日付を「過去」に設定するか「未来」に設定するかを選択します

フィルタリングの日付範囲を作成するには、範囲の開始日と終了日を指定します。たとえば、2 週間前から 2 週間後までをフィルタリングするには、次のようにします。

  1. フィルタリングするコレクションリストを選択します
  2. アクセス 設定パネル(デ)
  3. 含める 画面 内で アセンブリリストの構成
  4. メインのドロップダウンメニューで情報と時間フィールドを選択します
  5. 選択する 以降または等しい
  6. 数量を設定する 2、期間 週間、 そして 以前は
  7. 保存する
  8. 2番目を統合する 画面
  9. 会議と時間のフィールドをもう一度選択してください
  10. 選択する 以前または等しい
  11. 数量を決定する 2、期間 週間、 そして 将来
  12. 保存する

この 2 つの日付画面により、2 つの画面内の日付を持つアイテムのみがアセンブリ リストに表示されるシリーズが確立されます。

アセンブリリストのフィルタリングに関する詳細情報.

日付と時刻フィールドを利用してグループリストを整理する

グループ リストを日付と時刻で整理することもできます。

  1. ふるいにかけるグループリストを選択してください
  2. に向かう 設定パネル (D)
  3. 追加 順序アセンブリリストの構成
  4. メインのドロップダウンメニューで日付と時刻のフィールドを選択します
  5. 2番目のドロップダウンメニューで順序を選択します: 古い順から新しい順、または新しい順から古い順
  6. プレス 保存する

日付と時刻フィールドを利用した暫定的な認識を確立する

日付スクリーンを適用すると、特定の日付範囲に従わないグループ コンポーネントが非表示になります。暫定認識を使用すると、認識可能性の規制を選択することで、デザイン内の特定の要素 (たとえば、差し迫ったイベント ラベル) を公開するか非表示にするかを選択できます。

  1. 差し迫ったイベントのラベルを選択
  2. に向かう 設定パネル (D)
  3. 追加 (この要素が露出している場合) 暫定的な知覚可能性
  4. メインのドロップダウンメニューで日付と時刻のフィールドを選択します
  5. 選択する 以降または等しい
  6. 日数、月数、年数を決定する (今日を含めるには 0 日を選択してください)
  7. 選択する 将来
  8. プレス 保存する

暫定的な認識に関する詳細を入手します。

ユアン・マック