Tutorial Cara Membuat DatePicker di Android Menggunakan Android Studio

Last Updated on 7 years by Mas Herdi

Melanjutkan tutorial series kita tentang komponen-komponen layout basic di Android. Bagi pemula yang ingin belajar membuat aplikasi menggunakan dengan Android Studio, tidak ada salahnya untuk mengenal komponen DatePicker, karena ke depannya kalian pasti akan butuh menggunakan komponen DatePicker ini. Yup sesuai namanya, DatePicker berfungsi untuk membantu user memilih tanggal yang diinginkan di aplikasi Android.

Pada penerapannya, DatePicker banyak digunakan pada aplikasi yang membutuhkan penginputan tanggal. Seperti aplikasi pemesanan tiket, aplikasi reminder, to do list dan sebagainya.

Belajar Membuat DatePicker di Android dengan Android Studio

Sebelumnya saya sarankan kalian untuk membaca tutorial-tutorial di bawah ini terlebih dahulu:

Pre-Requisites

• Membuat Project Hello World di Android
• Tutorial Android Dasar untuk Pemula

Setelah kalian membuat project baru di Android Studio, buka activity_main.xml dan masukkan kode berikut. Pada main layout akan berisi sebuah Button yang ketika diklik akan memunculkan DatePicker dialog ini, dan sebuah TextView untuk menampilkan tanggal yang dipilih di DatePicker.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:gravity="center_horizontal|center_vertical"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/bt_datepicker"
        android:text="Show DatePicker"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:text="Tanggal dipilih : "
        android:id="@+id/tv_dateresult"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

Kemudian, kalian bisa buka file MainActivity.java dan mengisikan kode seperti di bawah ini :

import android.app.DatePickerDialog;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.DatePicker;
import android.widget.TextView;

import java.text.SimpleDateFormat;
import java.util.Calendar;
import java.util.Locale;

/**
 * Created by Herdi_WORK on 20.01.17.
 */

public class MainActivity extends AppCompatActivity {

    private DatePickerDialog datePickerDialog;
    private SimpleDateFormat dateFormatter;
    private TextView tvDateResult;
    private Button btDatePicker;

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

        /**
         * Kita menggunakan format tanggal dd-MM-yyyy
         * jadi nanti tanggal nya akan diformat menjadi
         * misalnya 01-12-2017
         */
        dateFormatter = new SimpleDateFormat("dd-MM-yyyy", Locale.US);

        tvDateResult = (TextView) findViewById(R.id.tv_dateresult);
        btDatePicker = (Button) findViewById(R.id.bt_datepicker);
        btDatePicker.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                showDateDialog();
            }
        });

    }

    private void showDateDialog(){

        /**
         * Calendar untuk mendapatkan tanggal sekarang
         */
        Calendar newCalendar = Calendar.getInstance();

        /**
         * Initiate DatePicker dialog
         */
        datePickerDialog = new DatePickerDialog(this, new DatePickerDialog.OnDateSetListener() {

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

                /**
                 * Method ini dipanggil saat kita selesai memilih tanggal di DatePicker
                 */

                /**
                 * Set Calendar untuk menampung tanggal yang dipilih
                 */
                Calendar newDate = Calendar.getInstance();
                newDate.set(year, monthOfYear, dayOfMonth);

                /**
                 * Update TextView dengan tanggal yang kita pilih
                 */
                tvDateResult.setText("Tanggal dipilih : "+dateFormatter.format(newDate.getTime()));
            }

        },newCalendar.get(Calendar.YEAR), newCalendar.get(Calendar.MONTH), newCalendar.get(Calendar.DAY_OF_MONTH));

        /**
         * Tampilkan DatePicker dialog
         */
        datePickerDialog.show();
    }
}

Pada kode di atas, ada beberapa hal yang harus diset sebelum kita menampilkan DatePicker dialog, seperti format tanggalnya (menggunakan SimpleDateFormat), dan tanggal yang dimunculkan ketika DatePicker pertama kali ditampilkan, kita set tanggalnya ke tanggal saat ini menggunakan object Calendar.

Demo

Jika sudah kalian bisa langsung menjalankan aplikasinya.

Android DatePicker Sample Android

Oke, pada gambar di atas sebelah kiri adalah ketika aplikasi pertama kali dijalankan. Ketika DatePicker ditampilkan, maka akan langsung set ke tanggal sekarang (20 Januari 2017 saat artikel ini ditulis).

Android DatePicker Sample Android

Setelah itu kita set tanggalnya ke 31 Januari 2017 kemudian klik OK. Maka dialog DatePicker akan tertutup dan tampil tanggal yang dipilih pada TextView.

That’s all ! Semoga membantu. 🙂 Jangan lupa untuk clone project nya sebagai Android Studio module di GitHub saya, dengan terlebih dahulu follow dan star project tersebut. Silahkan bertanya di bagian komentar jika ada yang kurang jelas. 😀