Hướng dẫn và ví dụ Android DatePicker

Android DatePicker
Ví dụ DatePicker

1. Android DatePicker

Android DatePicker là một thành phần giao diện cho phép người dùng lựa chọn ngày tháng (date) và đảm bảo rằng dữ liệu người dùng nhập vào là hợp lệ.

DatePicker có 2 chế độ (mode) với giao diện khác nhau.

android:datePickerMode="calendar" (Default)
android:datePickerMode="spinner"

DatePickerDialog cho phép người dùng chọn một ngày tháng (date) hợp lệ và ẩn đi sau khi lựa chọn xong, nó giúp bạn tiết kiệm không gian của ứng dụng hơn so với việc sử dụng DatePicker.
Hướng dẫn và ví dụ Android DatePickerDialog
Hướng dẫn và ví dụ Android TimePicker
Hướng dẫn và ví dụ Android TimePickerDialog
Hướng dẫn và ví dụ Android Chronometer
Hướng dẫn và ví dụ Android TextClock

android:datePickerMode="calendar"

<DatePicker
    android:id="@+id/datePicker"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:datePickerMode="calendar"  />

Portrait Screen

Landscape Screen

android:datePickerMode="spinner"

Trong chế độ spinner, DatePicker bao gồm 2 phần, bên trái là một khối gồm 3 Spinner cho phép người dùng lựa chọn tháng, ngày, năm. Và bên phải là một CalendarView đơn giản hơn so với chính nó khi ở trong chế độ calendar.

<DatePicker
    android:id="@+id/datePicker"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="16dp"
    android:datePickerMode="spinner" />

DatePicker [spinner mode] default.

Bạn có thể sử dụng android:calendarViewShown="false" để ẩn thành phần CalendarView bên phải.

[android:calendarViewShown="false"]

<DatePicker
    android:id="@+id/datePicker"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:calendarViewShown="false"
    android:datePickerMode="spinner" />

[android:calendarViewShown="false"]

Hoặc có thể sử dụng android:spinnersShown="false" để ẩn khối (chứa 3 Spinner) bên trái.

[android:spinnersShown="false"]

<DatePicker
    android:id="@+id/datePicker"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="16dp"
    android:datePickerMode="spinner"
    android:spinnersShown="false" />

[android:spinnersShown="false"]

Android DatePicker Javadoc:
https://developer.android.com/reference/android/widget/DatePicker

2. Ví dụ DatePicker

Xem trước ví dụ:

Trên Android Studio tạo mới một project:

File > New > New Project > Empty Activity
- Name: DatePickerExample
- Package name: org.o7planning.datepickerexample
- Language: Java

DatePicker không có sẵn trên Palette của cửa sổ thiết kế, vì vậy bạn cần sử dụng mã XML để thêm nó vào giao diện sau đó có thể điều chỉnh vị trí và các thuộc tính của nó một cách trực quan.

DatePicker (Calendar Mode)

<DatePicker
    android:id="@+id/datePicker"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:datePickerMode="calendar"  />

Điều chỉnh vị trí các thành phần trên giao diện:

Sét đặt ID, Text cho các thành phần:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <DatePicker
        android:id="@+id/datePicker"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:datePickerMode="calendar"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <LinearLayout
        android:id="@+id/linearLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:orientation="horizontal"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/datePicker">

        <EditText
            android:id="@+id/editText_date"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:ems="10"
            android:hint="dd-MM-yyyy"
            android:inputType="date" />

        <Button
            android:id="@+id/button_date"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Get Date" />
    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.java

package org.o7planning.datepickerexample;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.DatePicker;
import android.widget.EditText;
import android.widget.Toast;

import java.util.Calendar;

public class MainActivity extends AppCompatActivity {

    private DatePicker datePicker;
    private EditText editTextDate;
    private Button buttonDate;

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

        this.editTextDate = (EditText) this.findViewById(R.id.editText_date);
        this.buttonDate = (Button) this.findViewById(R.id.button_date);
        this.datePicker = (DatePicker) this.findViewById(R.id.datePicker);

        Calendar calendar = Calendar.getInstance();
        calendar.setTimeInMillis(System.currentTimeMillis());
        int year = calendar.get(Calendar.YEAR);
        int month  = calendar.get(Calendar.MONTH);
        int day = calendar.get(Calendar.DAY_OF_MONTH);

        this.datePicker.init( year, month , day , new DatePicker.OnDateChangedListener() {
            @Override
            public void onDateChanged(DatePicker datePicker, int year, int month, int dayOfMonth) {
                datePickerChange(  datePicker,   year,   month,   dayOfMonth);
            }
        });

        this.buttonDate.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                showDate();
            }
        });
    }

    private void datePickerChange(DatePicker datePicker, int year, int month, int dayOfMonth) {
        Log.d("Date", "Year=" + year + " Month=" + (month + 1) + " day=" + dayOfMonth);
        this.editTextDate.setText(dayOfMonth +"-" + (month + 1) + "-" + year);
    }

    private void showDate()  {
        int year = this.datePicker.getYear();
        int month = this.datePicker.getMonth(); // 0 - 11
        int day = this.datePicker.getDayOfMonth();

        Toast.makeText(this, "Date: " + day+"-"+ (month + 1) +"-"+ year, Toast.LENGTH_LONG).show();
    }
}

Các hướng dẫn lập trình Android

Các hướng dẫn lập trình Flutter