【Android】Kotlinでアプリ画面にダイアログを出す方法② | DatePickerDialog, TimePickerDialog（日付、時刻選択）の実装について徹底解説

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">

    <!-- 時刻選択ボタン -->
    <Button
        android:id="@+id/btnShowDatePicker"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="時間を選択"
        android:layout_gravity="center_horizontal"
        android:padding="12dp" />

    <!-- 選択した時間を表示するTextView -->
    <TextView
        android:id="@+id/txtSelectedDate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="選択した時間: 00:00"
        android:textSize="18sp"
        android:layout_gravity="center_horizontal"
        android:paddingTop="16dp" />

</LinearLayout>

import android.app.DatePickerDialog
import android.os.Bundle
import android.widget.Button
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
import java.util.Calendar

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val btnShowDatePicker = findViewById<Button>(R.id.btnShowDatePicker)
        val txtSelectedDate = findViewById<TextView>(R.id.txtSelectedDate)

        btnShowDatePicker.setOnClickListener {
            // カレンダーのインスタンスを作成し、初期値を現在の日付に設定
            val calendar = Calendar.getInstance()
            val year = calendar.get(Calendar.YEAR)
            val month = calendar.get(Calendar.MONTH)
            val day = calendar.get(Calendar.DAY_OF_MONTH)

            // DatePickerDialogを作成
            val datePickerDialog = DatePickerDialog(
                this,
                { _, selectedYear, selectedMonth, selectedDay ->
                    // 選択された日付をTextViewに表示
                    val date = "$selectedYear/${selectedMonth + 1}/$selectedDay"
                    txtSelectedDate.text = "選択した日付: $date"
                },
                year, month, day
            )

            // ダイアログを表示
            datePickerDialog.show()
        }
    }
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">

    <!-- 時刻選択ボタン -->
    <Button
        android:id="@+id/btnShowTimePicker"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="時間を選択"
        android:layout_gravity="center_horizontal"
        android:padding="12dp" />

    <!-- 選択した時間を表示するTextView -->
    <TextView
        android:id="@+id/txtSelectedTime"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="選択した時間: 00:00"
        android:textSize="18sp"
        android:layout_gravity="center_horizontal"
        android:paddingTop="16dp" />

</LinearLayout>

import android.app.TimePickerDialog
import android.os.Bundle
import android.widget.Button
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
import java.util.Calendar

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val btnShowTimePicker = findViewById<Button>(R.id.btnShowTimePicker)
        val txtSelectedTime = findViewById<TextView>(R.id.txtSelectedTime)

        btnShowTimePicker.setOnClickListener {
            // カレンダーのインスタンスを作成し、初期値を現在の時間に設定
            val calendar = Calendar.getInstance()
            val hour = calendar.get(Calendar.HOUR_OF_DAY)
            val minute = calendar.get(Calendar.MINUTE)

            // TimePickerDialogを作成
            val timePickerDialog = TimePickerDialog(
                this,
                { _, selectedHour, selectedMinute ->
                    // 選択された時間をTextViewに表示
                    val time = String.format("%02d:%02d", selectedHour, selectedMinute)
                    txtSelectedTime.text = "選択した時間: $time"
                },
                hour, minute, true // 24時間表示に設定
            )

            // ダイアログを表示
            timePickerDialog.show()
        }
    }
}

private fun showCustomTimePicker() {
        val dialogView = layoutInflater.inflate(R.layout.custom_time_picker, null)
        val timePicker = dialogView.findViewById<TimePicker>(R.id.timePicker)
        timePicker.setIs24HourView(true) // 24時間表示

        AlertDialog.Builder(this)
            .setTitle("時刻を選択")
            .setView(dialogView)
            .setPositiveButton("OK") { _, _ ->
                val hour = timePicker.hour
                val minute = timePicker.minute
                val selectedTime = String.format("%02d:%02d", hour, minute)
                println("選択した時間: $selectedTime")
            }
            .setNegativeButton("キャンセル", null)
            .show()
    }

val calendar = Calendar.getInstance()

// DatePickerDialogで日付を選択
val datePickerDialog = DatePickerDialog(
    this,
    { _, year, month, day ->
        val selectedDate = "$year/${month + 1}/$day"

        // TimePickerDialogで時刻を選択
        TimePickerDialog(
            this,
            { _, hour, minute ->
                val selectedTime = String.format("%02d:%02d", hour, minute)
                println("選択した日付: $selectedDate, 選択した時刻: $selectedTime")
            },
            calendar.get(Calendar.HOUR_OF_DAY),
            calendar.get(Calendar.MINUTE),
            true
        ).show()
    },
    calendar.get(Calendar.YEAR),
    calendar.get(Calendar.MONTH),
    calendar.get(Calendar.DAY_OF_MONTH)
)

datePickerDialog.show()