このページは Cloud Translation API によって翻訳されました。

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

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

型

日付選択ツールには次の 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 と基本的に同じです。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)
        )
    }
}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?> またはデータクラスを使用して、開始値と終了値を取得します。

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

型

状態

固定された日付選択ツール

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

結果

モーダル日付選択ツール

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

結果

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

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

期間選択ツール

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

結果

選択した日付を使用

関連ドキュメント

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