日付選択ツール

日付選択ツールを使用すると、日付、期間、またはその両方を選択できます。カレンダーダイアログまたはテキスト入力を使用して日付を選択します。

型

日付選択ツールには次の 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
                    )
                }
            }
        }
    }
}

@Composable
fun DatePickerFieldToModal(modifier: Modifier = Modifier) {
    var selectedDate by remember { mutableStateOf<Long?>(null) }
    var showModal by remember { mutableStateOf(false) }

    OutlinedTextField(
        value = selectedDate?.let { convertMillisToDate(it) } ?: "",
        onValueChange = { },
        label = { Text("DOB") },
        placeholder = { Text("MM/DD/YYYY") },
        trailingIcon = {
            Icon(Icons.Default.DateRange, contentDescription = "Select date")
        },
        modifier = modifier
            .fillMaxWidth()
            .pointerInput(selectedDate) {
                awaitEachGesture {
                    // Modifier.clickable doesn't work for text fields, so we use Modifier.pointerInput
                    // in the Initial pass to observe events before the text field consumes them
                    // in the Main pass.
                    awaitFirstDown(pass = PointerEventPass.Initial)
                    val upEvent = waitForUpOrCancellation(pass = PointerEventPass.Initial)
                    if (upEvent != null) {
                        showModal = true
                    }
                }
            }
    )

    if (showModal) {
        DatePickerModal(
            onDateSelected = { selectedDate = it },
            onDismiss = { showModal = false }
        )
    }
}

fun convertMillisToDate(millis: Long): String {
    val formatter = SimpleDateFormat("MM/dd/yyyy", Locale.getDefault())
    return formatter.format(Date(millis))
}DatePickers.kt

コードに関する主なポイント

ユーザーが IconButton をクリックすると、日付選択ツールが表示されます。
- アイコンボタンは、OutlinedTextField の trailingIcon パラメータの引数として機能します。
- showDatePicker 状態変数は、ドッキングされた日付選択ツールの表示を制御します。
日付選択ツールのコンテナは Popup コンポーザブルです。このコンポーザブルは、他の要素のレイアウトに影響を与えることなく、コンテンツをオーバーレイします。
selectedDate は、DatePickerState オブジェクトから選択した日付の値を取得し、convertMillisToDate 関数を使用してフォーマットします。
選択した日付がテキストフィールドに表示されます。
ドッキングされた日付選択ツールは、offset 修飾子を使用してテキストフィールドの下に配置されます。
テキストフィールドと日付選択ツールを適切に重ね合わせるため、ルートコンテナとして Box が使用されます。

結果

カレンダーアイコンをクリックすると、この実装は次のようになります。

ドッキングされた日付選択ツールの例。 — **図 1.**ドッキングされた日付選択ツール。

モーダル日付選択ツールは、画面上にフローティングするダイアログを表示します。これを実装するには、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)
    }
}DatePickers.kt

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)
    }
}DatePickers.kt

これは、モーダル日付選択ツールの例とほぼ同じです。主な違いは次のとおりです。

initialDisplayMode パラメータは、初期表示モードを DisplayMode.Input に設定します。

期間付きの日付選択ツール

開始日と終了日の間の期間を選択できる日付選択ツールを作成できます。これを行うには、DateRangePicker を使用します。

DateRangePicker の使用方法は、基本的に DatePicker と同じです。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)
        )
    }
}DatePickers.kt

コードに関する主なポイント

onDateRangeSelected パラメータは、選択した開始日と終了日を表す Pair<Long?, Long?> を受け取るコールバックです。これにより、親コンポーザブルは選択した期間にアクセスできます。
rememberDateRangePickerState() は、期間選択ツールの状態を作成します。
DatePickerDialog は、モーダルダイアログコンテナを作成します。
確認ボタンの onClick ハンドラで、onDateRangeSelected は選択した期間を親コンポーザブルに渡します。
DateRangePicker コンポーザブルは、ダイアログコンテンツとして機能します。

結果

これを実装すると次のようになります。

モーダル範囲の日付選択ツールの例。 — **図 4.**選択した期間付きのモーダル日付選択ツール。

選択した日付を使用する

選択した日付を取得するには、親コンポーザブルで 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 }
        )
    }
// ...DatePickers.kt

期間選択ツールにも基本的に同じことが当てはまりますが、開始値と終了値を取得するにはまたはデータクラスを使用する必要があります。Pair<Long?, Long?>

日付選択ツール コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

型

状態

ドッキングされた日付選択ツール

コードに関する主なポイント

結果

モーダル日付選択ツール

コードに関する主なポイント

結果

入力モーダル日付選択ツール

コードに関する主なポイント

期間付きの日付選択ツール

コードに関する主なポイント

結果

選択した日付を使用する

関連情報

日付選択ツール