Date Dialog | Calendar

Jika kita ingin membuat aplikasi seperti task reminder atau aplikasi manajemen jadwal kuliah, didalam aplikasi tersebut biasanya terdapat perintah untuk memasukkan tanggal. Untungnya android sudah memberikan fitur untuk menangani perintah tersebut, namanya Date Dialog. Jadi dengan dengan Date Dialog ini, user dapat menginputkan tanggal lewat dialog yang muncul.

Kenapa menggunakan Date Dialog? Kenapa tidak dimasukkan sendiri atau ngetik sendiri pada edittext misalnya. Kalau kita menginputkan sendiri lewat edittext tanpa bantuan Date Dialog, inputan tersebut tidak seragam. Contoh, semisal kita inputkan tanggal 4 Februari 2017, mungkin orang lain bisa juga memasukkannya dengan format, 4 Feb 2017 atau 4-2-2017 dst. Oleh karena itu, dengan ada Date Dialog, user hanya perlu memilih tanggal, bulan dan tahun, nanti outputnya akan sama.

Output dari Date Dialog ini, masih dapat kita konversi terlebih dahulu sebelum ditampilkan dalam edittext atau textview. Dalam konversi ini, terserah kita mau menampilkan hasilnya seperti apa. Untuk output asli dari Date Dialog, menurut pengamatan saya adalah sebagai berikut:

  • Tahun, berupa angka, seperti 2017, 2018 dst
  • Bulan, berupa angka dimulai dari 0, jadi jika januari maka outpunya 0. Dan untuk single digit, maka tidak tambah 0 didepannya, seperti : 0, 1, 2, 3 bukan 00, 01, 02, 03 dst
  • Hari, berupa angka dimulai dari 1 dan jika single digit tidak ditambahi 0 didepannya sama seperti bulan

Untuk kodenya, sebagai berikut :

  1. CalendarActivity
    package com.andevindo.tester;
    
    import android.app.DatePickerDialog;
    import android.os.Bundle;
    import android.support.design.widget.FloatingActionButton;
    import android.support.design.widget.Snackbar;
    import android.support.v7.app.AppCompatActivity;
    import android.support.v7.widget.Toolbar;
    import android.util.Log;
    import android.view.View;
    import android.view.Menu;
    import android.view.MenuItem;
    import android.widget.DatePicker;
    import android.widget.EditText;
    
    import java.text.ParseException;
    import java.text.SimpleDateFormat;
    import java.util.Calendar;
    
    public class CalendarActivity extends AppCompatActivity {
    
        private EditText mCalendar;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_calendar);
            Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
            setSupportActionBar(toolbar);
            mCalendar = (EditText) findViewById(R.id.calendar);
    
            //Mengambil calendar bawaan dari android
            Calendar calendar = Calendar.getInstance();
            final DatePickerDialog datePickerDialog = new DatePickerDialog(this, new DatePickerDialog.OnDateSetListener() {
                @Override
                public void onDateSet(DatePicker datePicker, int i, int i1, int i2) {//i adalah tahun, i1 adalah bulan dan i2 adalah hari
                    //Respon dari dialog, di convert ke format tanggal yang diinginkan lalu setelah itu ditampilkan
                    mCalendar.setText(convertDate(i, i1, i2));
                }
            }, calendar.get(Calendar.YEAR), calendar.get(Calendar.MONTH), calendar.get(Calendar.DAY_OF_MONTH));
            //calendar.get(Calendar.YEAR) memberikan nilai tahun awal pada dialog sesuai tahun yang didapat dari calendar
    
            mCalendar.setOnClickListener(new View.OnClickListener() {
                public void onClick(View view) {
                    datePickerDialog.show();//Dialog ditampilkan ketika edittext diclick
                }
            });
    
            mCalendar.setOnFocusChangeListener(new View.OnFocusChangeListener() {
                public void onFocusChange(View view, boolean b) {
                    if (b) {
                        datePickerDialog.show();//Dialog ditampilkan ketika edittext mendapat fokus
                    }
                }
            });
    
        }
    
        //Konversi tanggal dari date dialog ke format yang kita inginkan
        String convertDate(int year, int month, int day) {
            Log.d("Tanggal", year + "/" + month + "/" + day);
            String temp = year + "-" + (month + 1) + "-" + day;
            SimpleDateFormat calendarDateFormat = new SimpleDateFormat("yyyy-MM-dd");
            SimpleDateFormat newDateFormat = new SimpleDateFormat("dd MMM yyyy");
            try {
                String e = newDateFormat.format(calendarDateFormat.parse(temp));
                return e;
            } catch (ParseException var4) {
                return "";
            }
        }
    }
    
  2. activity_calendar
    <?xml version="1.0" encoding="utf-8"?>
    <android.support.design.widget.CoordinatorLayout
        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"
        android:fitsSystemWindows="true"
        tools:context="com.andevindo.tester.CalendarActivity">
    
        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/AppTheme.AppBarOverlay">
    
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:popupTheme="@style/AppTheme.PopupOverlay"/>
    
        </android.support.design.widget.AppBarLayout>
    
        <include layout="@layout/content_calendar"/>
    
    </android.support.design.widget.CoordinatorLayout>
    
  3. content_calendar
    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout
        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:id="@+id/content_calendar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="16dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        tools:context="com.andevindo.tester.CalendarActivity"
        tools:showIn="@layout/activity_calendar">
    
        <EditText
            android:id="@+id/calendar"
            android:hint="Calendar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
    </RelativeLayout>
    

     

Berikut screenshot dari aplikasi :