Android Studio | DatePicker、TimePicker，建立日期選擇元件與時間選擇元件

6 min readApr 8, 2020

1. 先建立元件:

我使用TextView 來當作Button觸發，也可以直接新增Button觸發。

<TextView
    android:id="@+id/textView6"
    android:layout_width="match_parent"
    android:layout_height="30dp"
    android:background="#8B2F91DF"
    android:text="日期" />

<TextView
    android:id="@+id/date"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:gravity="center"
    android:text="選擇日期" />

<TextView
    android:id="@+id/item_date"
    android:layout_width="match_parent"
    android:layout_height="30dp"
    android:layout_marginTop="10dp"
    android:background="#8B2F91DF"
    android:text="時間" />

<TextView
    android:id="@+id/time"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:gravity="center"
    android:text="選擇時間" />

2. 分別新增 DatePickerFragment 類別與 TimerPickerFragment

在om.example.xxxx 按右鍵 -> New -> Java Class

新增DatePickerFragment，注意Superclass 要填 DialogFragment

3. 覆寫(Ctrl + O) onCreateDialog 類別:

在類別內新增以下程式:

DatePickerFragment:

Calendar c = Calendar.getInstance();
int year = c.get(Calendar.YEAR);
int month = c.get(Calendar.MONTH);
int day = c.get(Calendar.DAY_OF_MONTH);

TimerPickerFragment:

Calendar c = Calendar.getInstance();
int hour = c.get(Calendar.HOUR_OF_DAY);
int minute = c.get(Calendar.MINUTE);

並將 return 更改為以下:

DatePickerFragment:

return new DatePickerDialog(getActivity(), (DatePickerDialog.OnDateSetListener) getActivity(), year, month, day);

TimerPickerFragment:

return new TimePickerDialog(getActivity(), (TimePickerDialog.OnTimeSetListener) getActivity(), hour, minute, DateFormat.is24HourFormat(getActivity()));

4. 回到主程式:

先在類別處implements 兩個類別:

再覆寫 onDateSet、onTimeSet:

分別在 onDateSet 內填寫以下程式:

Calendar c = Calendar.getInstance();
c.set(Calendar.YEAR, year);
c.set(Calendar.MONTH, month);
c.set(Calendar.DAY_OF_MONTH, dayOfMonth);
String currentDateString = DateFormat.getDateInstance(DateFormat.FULL).format(c.getTime());date.setText(currentDateString);

在 onTimeSet 內填以下程式:

Calendar t = Calendar.getInstance();
t.set(Calendar.HOUR_OF_DAY, hourOfDay);
t.set(Calendar.MINUTE, minute);

time.setText(hourOfDay + " : " + minute);

在輸入以上程式前，請先宣告兩個要顯示日期與時間的TextViews:

date = (TextView) findViewById(R.id.date);
time = (TextView) findViewById(R.id.time);

5. 完成:

Thank All !!