日付選択ツールを使用すると、日付、期間、またはその両方を選択できます。使用するのは ユーザーが日付を選択できるように、カレンダーのダイアログやテキスト入力を使用する。
型
日付選択ツールには次の 3 種類があります。
- ドッキング: レイアウト内にインラインで表示されます。コンパクト サイズの 専用のダイアログが煩わしく感じる可能性があるレイアウト。
- モーダル: アプリのコンテンツにオーバーレイするダイアログとして表示されます。これにより 日付選択にフォーカスできます
- モーダル入力: テキスト フィールドとモーダル日付選択ツールを組み合わせます。
これらの日付選択ツールは、次の方法でアプリに実装できます。 コンポーザブル:
DatePicker: 日付選択ツール用の一般的なコンポーザブル。コンテナは、 装着しているかがモデルかによって決まります。DatePickerDialog: モーダル入力日付とモーダル入力日付の両方のコンテナ 選択します。DateRangePicker: ユーザーが日付を選択できる日付選択ツールです。 期間を設定できます。
状態
日付選択ツールのさまざまなコンポーザブルに共通する主なパラメータは、
state: DatePickerState または
DateRangePickerState オブジェクト。これらのプロパティには、
日付選択ツールを使用したユーザーの選択（現在選択されている日付など）
選択した日付の使用方法について詳しくは、 選択した日付のセクションで確認できます。
ドッキングされた日付選択ツール
次の例に、ユーザーに入力を促すテキスト フィールドがあります。 生年月日を記録します欄のカレンダー アイコンをクリックすると、 ドッキング日付選択ツールが表示されます。
@Composable
fun DatePickerDocked() {
var showDatePicker by remember { mutableStateOf(false) }
val datePickerState = rememberDatePickerState()
val selectedDate = datePickerState.selectedDateMillis?.let {
convertMillisToDate(it)
} ?: ""
Box(
modifier = Modifier.fillMaxWidth()
) {
OutlinedTextField(
value = selectedDate,
onValueChange = { },
label = { Text("DOB") },
readOnly = true,
trailingIcon = {
IconButton(onClick = { showDatePicker = !showDatePicker }) {
Icon(
imageVector = Icons.Default.DateRange,
contentDescription = "Select date"
)
}
},
modifier = Modifier
.fillMaxWidth()
.height(64.dp)
)
if (showDatePicker) {
Popup(
onDismissRequest = { showDatePicker = false },
alignment = Alignment.TopStart
) {
Box(
modifier = Modifier
.fillMaxWidth()
.offset(y = 64.dp)
.shadow(elevation = 4.dp)
.background(MaterialTheme.colorScheme.surface)
.padding(16.dp)
) {
DatePicker(
state = datePickerState,
showModeToggle = false
)
}
}
}
}
}
fun convertMillisToDate(millis: Long): String {
val formatter = SimpleDateFormat("MM/dd/yyyy", Locale.getDefault())
return formatter.format(Date(millis))
}
コードに関する要点
- 日付選択ツールは、ユーザーが
IconButtonをクリックすると表示されます。- アイコンボタンは、
OutlinedTextFieldのtrailingIconパラメータ。 showDatePicker状態変数は、状態変数の可視性を制御します。 ドッキング日付選択ツールを使用します。
- アイコンボタンは、
- 日付選択ツールのコンテナは
Popupコンポーザブルで、 他の要素のレイアウトには影響を与えません。 selectedDateは、選択された日付の値をDatePickerStateオブジェクトを作成し、convertMillisToDateを使用して書式設定します。 使用します。- 選択した日付がテキスト フィールドに表示されます。
- ドッキング日付選択ツールは、
offsetを使用してテキスト フィールドの下に配置されています。 修飾子を使用します。 - テキストを適切にレイヤ化するために、
Boxがルートコンテナとして使用されます。 フィールドと日付選択ツールがあります。
結果
カレンダー アイコンをクリックすると、この実装は次のようになります。
モーダル日付選択ツール
モーダルの日付選択ツールにより、画面上にフロート表示されるダイアログが表示されます。実装手順
DatePickerDialog を作成して DatePicker を渡します。
@Composable
fun DatePickerModal(
onDateSelected: (Long?) -> Unit,
onDismiss: () -> Unit
) {
val datePickerState = rememberDatePickerState()
DatePickerDialog(
onDismissRequest = onDismiss,
confirmButton = {
TextButton(onClick = {
onDateSelected(datePickerState.selectedDateMillis)
onDismiss()
}) {
Text("OK")
}
},
dismissButton = {
TextButton(onClick = onDismiss) {
Text("Cancel")
}
}
) {
DatePicker(state = datePickerState)
}
}
コードに関する要点
- コンポーズ可能な関数
DatePickerModalがモーダル日付選択ツールを表示します。 onDateSelectedラムダ式は、ユーザーが できます。- 選択した日付が親コンポーザブルに公開されます。
onDismissラムダ式は、ユーザーが クリックします。
結果
これを実装すると次のようになります。
入力モーダル日付選択ツール
入力付きのモーダル日付選択ツールによって、画面上にフロート表示されるダイアログが表示され、 ユーザーは日付を入力できます
@Composable
fun DatePickerModalInput(
onDateSelected: (Long?) -> Unit,
onDismiss: () -> Unit
) {
val datePickerState = rememberDatePickerState(initialDisplayMode = DisplayMode.Input)
DatePickerDialog(
onDismissRequest = onDismiss,
confirmButton = {
TextButton(onClick = {
onDateSelected(datePickerState.selectedDateMillis)
onDismiss()
}) {
Text("OK")
}
},
dismissButton = {
TextButton(onClick = onDismiss) {
Text("Cancel")
}
}
) {
DatePicker(state = datePickerState)
}
}
コードに関する要点
これは、モーダル日付選択ツールの例とほぼ同じです。メイン 主な相違点は次のとおりです。
initialDisplayModeパラメータで、初期表示モードがDisplayMode.Input。
期間付き日付選択ツール
ユーザーが開始日から次の日付までの範囲を選択できる日付選択ツールを作成できます。
設定します。そのためには、DateRangePicker を使用します。
DateRangePicker の使い方は、基本的に DatePicker と同じです。Google Chat では
PopUp の子としてドッキングされた選択ツールに使用するか、
モーダル選択ツールを追加して DatePickerDialog に渡します。主な違いは
DatePickerState の代わりに DateRangePickerState を使用している。
次のスニペットは、モーダル日付選択ツールを作成し、 範囲:
@Composable
fun DateRangePickerModal(
onDateRangeSelected: (Pair<Long?, Long?>) -> Unit,
onDismiss: () -> Unit
) {
val dateRangePickerState = rememberDateRangePickerState()
DatePickerDialog(
onDismissRequest = onDismiss,
confirmButton = {
TextButton(
onClick = {
onDateRangeSelected(
Pair(
dateRangePickerState.selectedStartDateMillis,
dateRangePickerState.selectedEndDateMillis
)
)
onDismiss()
}
) {
Text("OK")
}
},
dismissButton = {
TextButton(onClick = onDismiss) {
Text("Cancel")
}
}
) {
DateRangePicker(
state = dateRangePickerState,
title = {
Text(
text = "Select date range"
)
},
showModeToggle = false,
modifier = Modifier
.fillMaxWidth()
.height(500.dp)
.padding(16.dp)
)
}
}
コードに関する要点
onDateRangeSelectedパラメータは、メッセージを受け取る 選択した開始日と終了日を表すPair<Long?, Long?>。この 親コンポーザブルに選択した範囲へのアクセス権を付与します。rememberDateRangePickerState()は、期間の状態を作成します。 選択します。DatePickerDialogは、モーダル ダイアログ コンテナを作成します。- 確認ボタンの
onClickハンドラで、onDateRangeSelectedが渡されます。 選択した範囲を親コンポーザブルに渡します。 DateRangePickerコンポーザブルはダイアログのコンテンツとして機能します。
結果
これを実装すると次のようになります。
選択した日付を使用
選択した日付をキャプチャするには、親コンポーザブルで Long としてトラッキングし、
値を onDateSelected の DatePicker に渡します。次のスニペット
が実証されていますが、完全な実装については、公式の
スニペット アプリをご覧ください。
// ...
var selectedDate by remember { mutableStateOf<Long?>(null) }
// ...
if (selectedDate != null) {
val date = Date(selectedDate!!)
val formattedDate = SimpleDateFormat("MMM dd, yyyy", Locale.getDefault()).format(date)
Text("Selected date: $formattedDate")
} else {
Text("No date selected")
}
// ...
DatePickerModal(
onDateSelected = {
selectedDate = it
showModal = false
},
onDismiss = { showModal = false }
)
}
// ...
期間日付選択ツールでも基本的に同じことが当てはまりますが、
Pair<Long?, Long?> またはデータクラスを使用して、開始値と終了値を取得します。