Bài 15: DatePicker, TimePicker

Hôm nay chúng ta sẽ đi tìm hiểu 2 view về thời gian đó là DatePicker và TimePicker, đây là 2 view để cho người dùng chọn thời gian và hiện tại đi làm mình cũng chưa bao giờ dùng đến hai thằng này bởi vì rất ít ứng dụng nào sử dụng cả.

Tuy nhiên dù là ít đụng đến những đã là kiến thức căn bản thì chúng ta cũng phải xem qua cho biết chứ không một ngày nào đó dùng đến lại không biết nó là cái gì lại khổ.Ngoài DatePicker và TimePicker thì sau này ban sẽ được học vê thằng TimePickerDialog hay DatePickerDialog , 2 thằng này phổ biến hơn tuy nhiên nó không phải là view có sẵn để bạn định nghĩa trong layout nên chúng ta sẽ tìm hiểu sau.

DatePicker

Đây là view hiển thị giống như một tờ lịch vậy, khi người dùng chọn một ngày nào đó bất kì trong DatePicker bạn sẽ lắng nghe và lấy ngày đó ra thôi.Ví dụ nó được áp dụng trong trường hợp ứng dụng của bạn yêu cầu người dùng chọn ngày-tháng-năm sinh chẳng hạn.

Đây là hình ảnh Datepicker trên android 6.0:

DatePicker trong android

DatePicker trong android

TimePicker

Tưng tự như DatePicker thì TimePicker để lấy ra giờ mà người dùng đã chọn, nó thường áp dụng trong các ứng dụng muốn cập nhật , tạo mới thời gian khi ứng dụng có trường createDay,timeUpdate… trong database chẳng hạn.

Đây là hình ảnh TimePicker trên android 6.0:

TimePicker trong android

TimePicker trong android

Các bạn lưu ý là tùy vào phiên bản hệ điều hành – API mà giao diện DatePicker và TimePicker sẽ khác nhau nhé, hình ảnh trên mình đang chạy trên Android 6.0 API 23 đó nhé.

Ở trên mình đang lắng nghe sự kiện khi người dùng chọn Date và Time thì mình sẽ Toast lên thời gian mà họ đã chọn.Cụ thể code sẽ như sau :

*  Đây là file layout của MainActivity:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<ScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android" >
<LinearLayout
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
<TextView
    android:layout_gravity="center"
    android:textStyle="bold"
    android:text="DatePicker"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
    <DatePicker
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:id="@+id/datePicker" />
    <TextView
        android:layout_gravity="center"
        android:textStyle="bold"
        android:text="TimePicker"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TimePicker
        android:id="@+id/timePicker"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>
</ScrollView>

MainActivity.java

package thangcoder.com.bai3githubv2;

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

import java.util.Calendar;

public class MainActivity extends AppCompatActivity {

    private DatePicker datePicker;
    private TimePicker timePicker;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        datePicker = (DatePicker)findViewById(R.id.datePicker);
        timePicker = (TimePicker) findViewById(R.id.timePicker);
        setupDatePicker();
        setupTimePicker();
    }

    public void setupDatePicker(){
        Calendar calendar = Calendar.getInstance();
        // Lấy ra năm - tháng - ngày hiện tại
        int year = calendar.get(calendar.YEAR);
        final int month = calendar.get(calendar.MONTH);
        int day = calendar.get(calendar.DAY_OF_MONTH);

        // Khởi tạo sự kiện lắng nghe khi DatePicker thay đổi
        datePicker.init(year,month,day,new DatePicker.OnDateChangedListener() {
            @Override
            public void onDateChanged(DatePicker view, int year, int monthOfYear, int dayOfMonth) {
                Toast.makeText(MainActivity.this, dayOfMonth+"-"+monthOfYear+"-"+year, Toast.LENGTH_SHORT).show();
            }
        });
    }
    // Lắng nghe sự kiện khi TimePicker thay đổi
    public void setupTimePicker(){
        timePicker.setOnTimeChangedListener(new TimePicker.OnTimeChangedListener() {
            @Override
            public void onTimeChanged(TimePicker view, int hourOfDay, int minute) {
                Toast.makeText(MainActivity.this, "It's :"+hourOfDay+"h:"+minute+"minutes", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

Ở trên mình đã comment vào từng đoạn code bạn chỉ cần đọc là hiểu thôi, cơ bản là sẽ lắng nghe sự kiện khi người dùng click vào DatePicker và TimePicker , chúng ta sẽ lấy ra được các thời gian đã thay đổi.

Chi tiết hơn bạn xem video hướng dẫn bên dưới nhé, và có thể sử dung github để clone source code về xem nha.Nếu có thắc mắc hay ý kiến gì xin cứ để lại comment cho mình.

Video hướng dẫn sử dụng TimePicker và DatePicker

Tải source code

[sociallocker id=”635″]

[/sociallocker]
Chúc các bạn thành công!

Tiếp theo

4 Comments

  1. Công February 14, 2017
    • trangchongcheng February 24, 2017
  2. Hung August 17, 2017
  3. hoang September 13, 2017

Add Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.