DEV Community

myougaTheAxo
myougaTheAxo

Posted on

DateTimePicker完全ガイド — DatePicker/TimePicker/DateRangePicker

#android #kotlin #jetpackcompose #mobile

この記事で学べること

DateTimePicker（DatePicker、TimePicker、DateRangePicker、ダイアログ統合）を解説します。

DatePickerDialog 

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun DatePickerExample() {
    var showDialog by remember { mutableStateOf(false) }
    var selectedDate by remember { mutableStateOf<Long?>(null) }
    val datePickerState = rememberDatePickerState()

    Column(Modifier.padding(16.dp)) {
        OutlinedButton(onClick = { showDialog = true }) {
            Text(selectedDate?.let {
                SimpleDateFormat("yyyy/MM/dd", Locale.JAPAN).format(Date(it))
            } ?: "日付を選択")
        }

        if (showDialog) {
            DatePickerDialog(
                onDismissRequest = { showDialog = false },
                confirmButton = {
                    TextButton(onClick = {
                        selectedDate = datePickerState.selectedDateMillis
                        showDialog = false
                    }) { Text("OK") }
                },
                dismissButton = {
                    TextButton(onClick = { showDialog = false }) { Text("キャンセル") }
                }
            ) {
                DatePicker(state = datePickerState)
            }
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

TimePicker 

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TimePickerExample() {
    var showDialog by remember { mutableStateOf(false) }
    val timePickerState = rememberTimePickerState(
        initialHour = 9,
        initialMinute = 0,
        is24Hour = true
    )

    Column(Modifier.padding(16.dp)) {
        OutlinedButton(onClick = { showDialog = true }) {
            Text("${timePickerState.hour}:${"%02d".format(timePickerState.minute)}")
        }

        if (showDialog) {
            AlertDialog(
                onDismissRequest = { showDialog = false },
                title = { Text("時刻を選択") },
                text = { TimePicker(state = timePickerState) },
                confirmButton = {
                    TextButton(onClick = { showDialog = false }) { Text("OK") }
                },
                dismissButton = {
                    TextButton(onClick = { showDialog = false }) { Text("キャンセル") }
                }
            )
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

DateRangePicker 

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun DateRangeExample() {
    var showDialog by remember { mutableStateOf(false) }
    val rangeState = rememberDateRangePickerState()
    val fmt = SimpleDateFormat("MM/dd", Locale.JAPAN)

    Column(Modifier.padding(16.dp)) {
        OutlinedButton(onClick = { showDialog = true }) {
            val start = rangeState.selectedStartDateMillis?.let { fmt.format(Date(it)) } ?: "開始"
            val end = rangeState.selectedEndDateMillis?.let { fmt.format(Date(it)) } ?: "終了"
            Text("$start ~ $end")
        }

        if (showDialog) {
            DatePickerDialog(
                onDismissRequest = { showDialog = false },
                confirmButton = {
                    TextButton(onClick = { showDialog = false }) { Text("OK") }
                }
            ) {
                DateRangePicker(
                    state = rangeState,
                    modifier = Modifier.height(500.dp)
                )
            }
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

まとめ

API 用途
DatePicker 日付選択
TimePicker 時刻選択
DateRangePicker 期間選択
DatePickerDialog ダイアログ表示
  • DatePickerでMaterial3準拠の日付選択UI
  • TimePickerで24時間/12時間形式対応
  • DateRangePickerで開始〜終了日の範囲選択
  • rememberDatePickerStateで選択状態を保持

8種類のAndroidアプリテンプレート（日時選択対応）を公開しています。

テンプレート一覧 → Gumroad

関連記事：

I publish 8 Android app templates on Gumroad.

Browse templates → Gumroad

Top comments (0)