📝

翻訳: showDatePickerのドキュメント

6 min read

マテリアルデザインのshowDatePicker

https://github.com/flutter/flutter/blob/1.26.0-12.0.pre/packages/flutter/lib/src/material/date_picker.dart#L44-L110
(v1.26.0-12.0.pre現在[1]
date_picker.dart
/// Shows a dialog containing a Material Design date picker.

マテリアルデザインのdate pickerを含むダイアログを表示する。

date_picker.dart
/// The returned [Future] resolves to the date selected by the user when the
/// user confirms the dialog. If the user cancels the dialog, null is returned.

戻り値のFutureは、ユーザーがダイアログを閉じたときに選択されていた日付に解決する。
ユーザーがダイアログをキャンセルした場合は、nullが返される。

date_picker.dart
/// When the date picker is first displayed, it will show the month of
/// [initialDate], with [initialDate] selected.

date pickerは、initialDateの日付が選択された状態でinitialDateの月が表示される。

date_picker.dart
/// The [firstDate] is the earliest allowable date. The [lastDate] is the latest
/// allowable date. [initialDate] must either fall between these dates,
/// or be equal to one of them. For each of these [DateTime] parameters, only
/// their dates are considered. Their time fields are ignored. They must all
/// be non-null.

firstDateは選択できる一番早い日付。lastDateは選択できる一番遅い日付。initialDatefirstDatelastDateの間か、そのどちらかと等しい必要がある。これらのDateTime値は、時刻フィールドは無視され日付部分のみが使われる。どれもnon-nullである必要がある。

date_picker.dart
/// The [currentDate] represents the current day (i.e. today). This
/// date will be highlighted in the day grid. If null, the date of
/// `DateTime.now()` will be used.

currentDateは現在の日付を表す(つまり今日)。この日付は日付のグリッドではハイライトされる。currentDateがnullの場合はDateTime.now()の日付が使われる。

date_picker.dart
/// An optional [initialEntryMode] argument can be used to display the date
/// picker in the [DatePickerEntryMode.calendar] (a calendar month grid)
/// or [DatePickerEntryMode.input] (a text input field) mode.
/// It defaults to [DatePickerEntryMode.calendar] and must be non-null.

任意でinitialEntryMode引数を渡すことでDatePickerEntryMode.calendarモード(月別のカレンダー)かDatePickerEntryMode.inputモード(テキスト入力フィールド)でdate pickerを表示できる。デフォルトではDatePickerEntryMode.calendarが適用され、また引数はnon-nullである必要がある。

date_picker.dart
/// An optional [selectableDayPredicate] function can be passed in to only allow
/// certain days for selection. If provided, only the days that
/// [selectableDayPredicate] returns true for will be selectable. For example,
/// this can be used to only allow weekdays for selection. If provided, it must
/// return true for [initialDate].

任意でselectableDayPredicate関数を渡すことで特定の日付のみを選択可能にできる。渡された場合、selectableDayPredicateがtrueを返す日付のみが選択可能になる。例えば、これを使って平日のみを選択可能にすることもできる。selectableDayPredicateを渡す場合、initialDateに対してtrueを返すものでなければならない。

date_picker.dart
/// The following optional string parameters allow you to override the default
/// text used for various parts of the dialog:
///
///   * [helpText], label displayed at the top of the dialog.
///   * [cancelText], label on the cancel button.
///   * [confirmText], label on the ok button.
///   * [errorFormatText], message used when the input text isn't in a proper date format.
///   * [errorInvalidText], message used when the input text isn't a selectable date.
///   * [fieldHintText], text used to prompt the user when no text has been entered in the field.
///   * [fieldLabelText], label for the date text input field.

任意のStringパラメーターでダイアログ内の様々な表記をオーバーライドできる:

  • helpText: ダイアログ上部に表示されるラベル
  • cancelText: キャンセルボタンのラベル
  • confirmText: OKボタンのラベル
  • errorFormatText: 入力されたテキストが正しいフォーマットでない場合に表示されるメッセージ
  • errorInvalidText: 入力されたテキストが選択できない日付だった場合に表示されるメッセージ
  • fieldHintText: フィールドにテキストが入力されなかったことをユーザーに知らせるプロンプトに使われるテキスト
  • fieldLabelText: 日付テキスト入力フィールドのラベル
date_picker.dart
/// An optional [locale] argument can be used to set the locale for the date
/// picker. It defaults to the ambient locale provided by [Localizations].

任意でlocal引数を渡すことでdate pickerのロケールを指定できる。デフォルトではLocalizationsで提供される環境のロケールが使われる。

date_picker.dart
/// An optional [textDirection] argument can be used to set the text direction
/// ([TextDirection.ltr] or [TextDirection.rtl]) for the date picker. It
/// defaults to the ambient text direction provided by [Directionality]. If both
/// [locale] and [textDirection] are non-null, [textDirection] overrides the
/// direction chosen for the [locale].

任意でtextDirection引数を渡すことでdate pickerの書字方向(TextDirection.ltr または TextDirection.rtl)を設定できる。デフォルトではDirectionalityで提供される環境の書字方向が適用される。localetextDirectionが両方指定されている場合、textDirectionの定義が優先される。

date_picker.dart
/// The [context], [useRootNavigator] and [routeSettings] arguments are passed to
/// [showDialog], the documentation for which discusses how it is used. [context]
/// and [useRootNavigator] must be non-null.

contextuseRootNavigatorrouteSettings引数はshowDialogに渡される。showDialogのドキュメントに使われ方が明記されている。contextuseRootNavigatorはnon-nullである必要がある。

date_picker.dart
/// The [builder] parameter can be used to wrap the dialog widget
/// to add inherited widgets like [Theme].

builderパラメータはThemeなどの継承されたWidgetを追加するためなどに使うことができる。

date_picker.dart
/// An optional [initialDatePickerMode] argument can be used to have the
/// calendar date picker initially appear in the [DatePickerMode.year] or
/// [DatePickerMode.day] mode. It defaults to [DatePickerMode.day], and
/// must be non-null.

任意のinitialDatePickerMode引数を使うことでdate pickerのカレンダーを最初にDatePickerMode.yearモード、またはDatePickerMode.dayモードで表示するかを設定できる。デフォルトではDatePickerMode.dayが適用され、non-nullである必要がある。

date_picker.dart
/// See also:
///
///  * [showDateRangePicker], which shows a material design date range picker
///    used to select a range of dates.
///  * [CalendarDatePicker], which provides the calendar grid used by the date picker dialog.
///  * [InputDatePickerFormField], which provides a text input field for entering dates.

参考:

  • showDateRangePicker: マテリアルデザインのdate range picker。日付の範囲を選択するのに使われる。
  • CalendarDatePicker: date pickerダイアログで使われるカレンダーグリッドを提供する。
  • InputDatePickerFormField: 日付を入力するテキスト入力フィールドを提供する。
脚注
  1. API Docsにも同様の内容が表記されています。変更が追えるようにGitHubへのリンクにしました ↩︎

Discussion

ログインするとコメントできます