Cách sử dụng DatePickerDialog và TimePickerDialog trong Android

Reading Time: 4 minutes

Giao diện chọn ngày giờ được sử dụng rất nhiều trong các ứng dụng Android. Trong bài hướng dẫn này, chúng ta sẽ tìm hiểu cách sử dụng các DatePickerDialog và TimePickerDialog.

Các thành phần này cho phép người dùng chọn ngày và giờ thông qua một giao diện có thể được tùy chỉnh cho từng ứng dụng. Để tích hợp Dialog chọn ngày giờ trong Android, chúng ta sẽ sử dụng các class DatePickerDialog và TimePickerDialog cùng với class Calendar.

DatePickerDialog và TimePickerDialog

Mặc dù Date Picker và Time Picker có thể được dùng như các widget độc lập, chúng lại chiếm khá nhiều không gian trên màn hình. Vì vậy, sử dụng chúng bên trong một Dialog là một lựa chọn tốt hơn. Rất may là Android đã cung cấp sẵn các class DatePickerDialog và TimePickerDialog cho việc này.

Các class trên lần lượt có các phương thức callback (gọi lại) là onDateSetListener() và onTimeSetListener(). Chúng sẽ được gọi khi người dùng đã chọn xong ngày hoặc giờ.

Class DatePickerDialog có một constructor (hàm khởi tạo) gồm 5 tham số được liệt kê dưới đây.

1. Context: Yêu cầu context (ngữ cảnh) của ứng dụng.
2. Callback Function: onDateSet() được gọi khi người dùng xác nhận chọn ngày, với các tham số sau:
   • int year: Lưu năm đã được chọn từ dialog.
   • int monthOfYear: Lưu tháng đã được chọn từ dialog.
   • int dayOfMonth: Lưu ngày đã được chọn từ dialog.
3. int mYear: Hiển thị năm hiện tại khi dialog bật lên.
4. int mMonth: Hiển thị tháng hiện tại khi dialog bật lên.
5. int mDay: Hiển thị ngày hiện tại khi dialog bật lên.

Class TimePickerDialog có một constructor gồm 5 tham số được liệt kê dưới đây.

1. Context: Yêu cầu context của ứng dụng.
2. Callback Function: onTimeSet() được gọi khi người dùng xác nhận chọn giờ, với các tham số sau:
   • int hourOfDay: Lưu giờ trong ngày đã được chọn từ dialog.
   • int minute: Lưu phút đã được chọn từ dialog.
3. int mHours: Hiển thị giờ hiện tại khi dialog bật lên.
4. int mMinute: Hiển thị phút hiện tại khi dialog bật lên.
5. boolean false: Nếu được đặt là false, dialog sẽ hiển thị thời gian ở định dạng 24 giờ.

Ứng dụng Android ví dụ sử dụng Date Time Picker

Dưới đây là cấu trúc của project Android trong ví dụ này:

File activity_main.xml bao gồm hai Button để kích hoạt các dialog Date Picker và Time Picker, cùng hai EditText để hiển thị thời gian do người dùng chọn. Dưới đây là code XML cho giao diện này.

<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" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

    <EditText
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:id="@+id/in_date"
        android:layout_marginTop="82dp"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="SELECT DATE"
        android:id="@+id/btn_date"
        android:layout_alignBottom="@+id/in_date"
        android:layout_toRightOf="@+id/in_date"
        android:layout_toEndOf="@+id/in_date" />

    <EditText
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:id="@+id/in_time"
        android:layout_below="@+id/in_date"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="SELECT TIME"
        android:id="@+id/btn_time"
        android:layout_below="@+id/btn_date"
        android:layout_alignLeft="@+id/btn_date"
        android:layout_alignStart="@+id/btn_date" />

</RelativeLayout>

Code của class MainActivity.java như dưới đây:

package com.journaldev.datetimepickerdialog;

import android.app.DatePickerDialog;
import android.app.TimePickerDialog;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;
import android.widget.DatePicker;
import android.widget.EditText;
import android.widget.TimePicker;

import java.util.Calendar;

public class MainActivity extends AppCompatActivity implements
        View.OnClickListener {

    Button btnDatePicker, btnTimePicker;
    EditText txtDate, txtTime;
    private int mYear, mMonth, mDay, mHour, mMinute;

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

        btnDatePicker=(Button)findViewById(R.id.btn_date);
        btnTimePicker=(Button)findViewById(R.id.btn_time);
        txtDate=(EditText)findViewById(R.id.in_date);
        txtTime=(EditText)findViewById(R.id.in_time);

        btnDatePicker.setOnClickListener(this);
        btnTimePicker.setOnClickListener(this);

    }

    @Override
    public void onClick(View v) {

        if (v == btnDatePicker) {

            // Get Current Date
            final Calendar c = Calendar.getInstance();
            mYear = c.get(Calendar.YEAR);
            mMonth = c.get(Calendar.MONTH);
            mDay = c.get(Calendar.DAY_OF_MONTH);

            DatePickerDialog datePickerDialog = new DatePickerDialog(this,
                    new DatePickerDialog.OnDateSetListener() {

                        @Override
                        public void onDateSet(DatePicker view, int year,
                                              int monthOfYear, int dayOfMonth) {

                            txtDate.setText(dayOfMonth + "-" + (monthOfYear + 1) + "-" + year);

                        }
                    }, mYear, mMonth, mDay);
            datePickerDialog.show();
        }
        if (v == btnTimePicker) {

            // Get Current Time
            final Calendar c = Calendar.getInstance();
            mHour = c.get(Calendar.HOUR_OF_DAY);
            mMinute = c.get(Calendar.MINUTE);

            // Launch Time Picker Dialog
            TimePickerDialog timePickerDialog = new TimePickerDialog(this,
                    new TimePickerDialog.OnTimeSetListener() {

                        @Override
                        public void onTimeSet(TimePicker view, int hourOfDay,
                                              int minute) {

                            txtTime.setText(hourOfDay + ":" + minute);
                        }
                    }, mHour, mMinute, false);
            timePickerDialog.show();
        }
    }
}

Trong đoạn code trên, chúng ta đã tạo một đối tượng Calendar bằng Calendar.getInstance() để lấy ngày và giờ hiện tại, sau đó dùng các giá trị này để khởi tạo picker.

Lưu ý rằng giao diện của lịch và đồng hồ hiển thị trong dialog sử dụng theme mặc định được cung cấp bởi AppCompat Theme. Dưới đây là hình lúc chạy của ứng dụng ví dụ.

Tổng kết

Ta có thể đưa Date Time Picker vào trong các app Android để cung cấp một giải pháp chọn thời giờ tối ưu, giúp việc nhập liệu trở nên thuận tiện hơn cho người dùng. Bạn có thể tải về project ví dụ từ link này để tham khảo và học cách tích hợp nó trong các dự án Android của mình.