วิธีเขียน Listener สำหรับ DatePicker และ TimePicker ใน Android

ภาพรวม

ตัวอย่างนี้สาธิตวิธีการใช้ Listener สำหรับ DatePicker (เลือกวันที่) และ TimePicker (เลือกเวลา) เพื่อรับค่าที่ผู้ใช้เปลี่ยนแปลง

ขั้นตอนที่ 1: สร้างโปรเจกต์ใหม่

สร้างโปรเจกต์ Android ใหม่ใน Android Studio

ขั้นตอนที่ 2: Layout หลัก (res/layout/activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <DatePicker
        android:id="@+id/datePicker"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"/>

    <Button
        android:id="@+id/btnTime"
        android:layout_below="@id/datePicker"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="เปิด Time Picker"
        android:textStyle="bold"
        android:layout_centerInParent="true"
        android:layout_marginTop="36dp"/>

</RelativeLayout>

ขั้นตอนที่ 3: MainActivity.java (DatePicker Listener)

import android.annotation.TargetApi;
import android.content.Intent;
import android.os.Build;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.DatePicker;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    Button btnTime;

    @TargetApi(Build.VERSION_CODES.O)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        btnTime = findViewById(R.id.btnTime);
        DatePicker datePicker = findViewById(R.id.datePicker);

        // 🔑 DatePicker Listener
        datePicker.setOnDateChangedListener(new DatePicker.OnDateChangedListener() {
            @Override
            public void onDateChanged(DatePicker view, int year, int monthOfYear, int dayOfMonth) {
                // monthOfYear: 0=ม.ค. ... 11=ธ.ค.
                String message = "วันที่เลือก: " + dayOfMonth + "/" + (monthOfYear + 1) + "/" + year;
                Toast.makeText(MainActivity.this, message, Toast.LENGTH_LONG).show();
            }
        });

        btnTime.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(MainActivity.this, TimePickerActivity.class);
                startActivity(intent);
            }
        });
    }
}

ขั้นตอนที่ 4: Layout TimePicker (res/layout/activity_time_picker.xml)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".TimePickerActivity">

    <TimePicker
        android:id="@+id/timePicker"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"/>

</RelativeLayout>

ขั้นตอนที่ 5: TimePickerActivity.java

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.TimePicker;
import android.widget.Toast;

public class TimePickerActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_time_picker);

        TimePicker timePicker = findViewById(R.id.timePicker);
        
        // 🔑 TimePicker Listener
        timePicker.setOnTimeChangedListener(new TimePicker.OnTimeChangedListener() {
            @Override
            public void onTimeChanged(TimePicker view, int hourOfDay, int minute) {
                // hourOfDay: 0-23 (24-hour format)
                String message = "เวลาที่เลือก: " + String.format("%02d:%02d", hourOfDay, minute);
                Toast.makeText(TimePickerActivity.this, message, Toast.LENGTH_SHORT).show();
            }
        });
    }
}

ขั้นตอนที่ 6: AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="app.com.sample">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        
        <activity android:name=".TimePickerActivity"/>
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

DatePickerDialog และ TimePickerDialog (แนะนำสำหรับ Production)

แทนที่จะใช้ Widget ตรงๆ ควรใช้ Dialog เพื่อประหยัดพื้นที่และ UX ดีกว่า:

// DatePickerDialog
DatePickerDialog dateDialog = new DatePickerDialog(this,
    (view, year, month, day) -> {
        // Handle date
    }, year, month, day);
dateDialog.show();

// TimePickerDialog
TimePickerDialog timeDialog = new TimePickerDialog(this,
    (view, hour, minute) -> {
        // Handle time
    }, hour, minute, true); // true = 24-hour format
timeDialog.show();

การทดสอบ

รันแอป เลือกวันที่ใน DatePicker จะแสดง Toast → กด "เปิด Time Picker" เลือกเวลา จะแสดง Toast