Contoh Android DatePicker

Android DatePicker memungkinkan pengguna untuk memilih tanggal membuat tanggal yang dipilih valid dan diformat dengan benar. DatePicker dapat digunakan dalam dua mode: mode kalender dan mode pemintal. Jika Anda menggunakan tema material, secara default DatePicker ditampilkan sebagai tampilan kalender.

Dalam posting ini, Anda dapat menemukan rincian tentang DatePickerDialog, widget DatePicker, gaya desain DatePicker, gaya materi kustom DatePicker, penanganan event DatePicker, kalender DatePicker, spinner DatePicker, dan Spinner DatePicker.

Contoh Android DatePicker

Alat pilih tanggal dapat ditampilkan sebagai dialog menggunakan DatePickerDialog. Untuk menggunakan DatePickerDialog, pertama Anda perlu membuat fragmen dialog dengan memperluas DialogFragment dan menerapkan metode onCreateDialog yang mengembalikan instance DatePickerDialog. Dalam penerapan metode onCreateDialog pada fragmen pengambil tanggal, instantiate DatePickerDialog dengan menetapkan tanggal saat ini dan mengembalikannya.

Contoh DatePickerDialog di bawah ini menampilkan layar dengan tombol, saat mengkliknya, dialog pemilih tanggal akan ditampilkan dan tanggal yang dipilih akan ditampilkan sebagai pesan bersulang.

Fragmen DatePicker

package dialog.zoftino.com.dialog;

import android.app.DatePickerDialog;
import android.app.Dialog;
import android.os.Bundle;
import android.support.v4.app.DialogFragment;
import android.widget.DatePicker;
import android.widget.Toast;

import java.util.Calendar;

public class MyDatePickerFragment extends DialogFragment {
    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {

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

        return new DatePickerDialog(getActivity(), dateSetListener, year, month, day);
    }

    private DatePickerDialog.OnDateSetListener dateSetListener =
            new DatePickerDialog.OnDateSetListener() {
                public void onDateSet(DatePicker view, int year, int month, int day) {
                    Toast.makeText(getActivity(), "selected date is " + view.getYear() +
                            " / " + (view.getMonth()+1) +
                            " / " + view.getDayOfMonth(), Toast.LENGTH_SHORT).show();
                }
            };
}

Aktivitas

package dialog.zoftino.com.dialog;

import android.support.v4.app.DialogFragment;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
    public void showDatePicker(View v) {
        DialogFragment newFragment = new MyDatePickerFragment();
        newFragment.show(getSupportFragmentManager(), "date picker");
    }
}

Tata letak aktivitas

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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="dialog.zoftino.com.dialog.MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Date Picker Example"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="24dp"
        android:text="Pick Date"
        android:onClick="showDatePicker"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

</android.support.constraint.ConstraintLayout>

Contoh keluaran Android DatePickerDialog

Penanganan event Android DatePickerDialog

Seperti yang ditunjukkan pada contoh pemilih tanggal di atas, acara pemilih tanggal dapat ditangani dengan menerapkan DatePickerDialog.OnDateSetListener. DatePickerDialog.OnDateSetListener memiliki metode callback onDateSet yang dipanggil saat tanggal diambil dari dialog pemilih tanggal. Dalam metode onDateSet, Anda bisa mendapatkan tanggal yang dipilih pengguna seperti yang ditunjukkan pada kode di bawah ini.

 DatePickerDialog.OnDateSetListener dateSetListener =
            new DatePickerDialog.OnDateSetListener() {
                public void onDateSet(DatePicker view, int year, int month, int day) {
                    Toast.makeText(getActivity(), "selected date is " + view.getYear() +
                            " / " + (view.getMonth()+1) +
                            " / " + view.getDayOfMonth(), Toast.LENGTH_SHORT).show();
                }
            }; 

Tanggal di atas menetapkan metode panggilan balik dipanggil setiap kali tanggal diambil hanya setelah menambahkannya ke DatePickerDialog dengan meneruskannya ke konstruktor DatePickerDialog.

Contoh DatePicker Widget

DatePicker dapat ditampilkan menggunakan widget DatePicker. Untuk menggunakan widget DatePicker pertama-tama tentukan pemilih tanggal dalam tata letak xml seperti yang ditunjukkan di bawah ini.

Tata letak dengan widget DatePicker

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="Date Picker Widget"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    <DatePicker
        android:id="@+id/datePicker"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

</android.support.constraint.ConstraintLayout>

Aktivitas

public class DatePickerWidgetActivity extends AppCompatActivity {

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

        DatePicker dp = findViewById(R.id.datePicker);
        dp.setOnDateChangedListener(dateChangedListener);
    }
    private DatePicker.OnDateChangedListener dateChangedListener =
            new DatePicker.OnDateChangedListener(){
        @Override
        public void onDateChanged(DatePicker datePicker, int i, int i1, int i2) {
            Toast.makeText(DatePickerWidgetActivity.this, "picked date is " + datePicker.getDayOfMonth() +
                    " / " + (datePicker.getMonth()+1) +
                    " / " + datePicker.getYear(), Toast.LENGTH_SHORT).show();
        }
    };

}

DatePicker widget date change listener

Untuk menangani event widget DatePicker, Anda perlu mengimplementasikan DatePicker.OnDateChangedListener dan menambahkannya ke widget DatePicker dengan memanggil metode setOnDateChangedListener. DatePicker.OnDateChangedListener memiliki satu callback onDateChanged yang dipanggil ketika tanggal diubah dan ini di mana Anda bisa mendapatkan tanggal pengguna piket, lihat kode di atas untuk rincian.

Output widget DatePicker

Android Style DatePicker Material

Tingkat aplikasi style bahan DatePicker

Platform Android menyediakan gaya material untuk DatePicker mengikuti pedoman desain material. Gambar di atas menunjukkan gaya materi default DatePicker dengan aplikasi yang disetel ke aplikasi gaya material kompak Theme.AppCompat.Light.DarkActionBar.

Gaya pemilih tanggal dapat disesuaikan pada tingkat aplikasi dengan memperluas tema kompak aplikasi dan pengaturan properti warna seperti yang ditunjukkan di bawah ini.

<style name="MyAppTheme" parent="Theme.AppCompat.Light">
    <item name="colorAccent">#ff6d00</item>
    <item name="colorControlActivated">#33691e</item>
    <item name="android:selectableItemBackgroundBorderless">@color/colorPrimaryDark</item>
    <item name="colorControlHighlight">#d50000</item>
</style>

Output DatePicker menggunakan tema khusus.

DatePicker style style individual

Dengan tema khusus di atas, semua kontrol UI di seluruh aplikasi menjadi terpengaruh. Untuk menyesuaikan hanya DatePicker dalam aplikasi Anda, Anda perlu untuk memperpanjang tema materi android untuk DatePicker widget (Widget.Material.DatePicker) atau dialog alert (ThemeOverlay.AppCompat.Dialog.Alert) dan mengatur datePickerStyle atau datePickerDialogTheme sifat aplikasi kompak aplikasi tema.

Gaya di bawah ini adalah tema DatePickerDialog khusus.

<style name="MyDatePickerDialogStyle" parent="@style/ThemeOverlay.AppCompat.Dialog.Alert">
    <item name="showTitle">false</item>
    <item name="colorControlActivated">#ffea00</item>
    <item name="android:selectableItemBackgroundBorderless">@color/colorItmBg</item>
    <item name="colorControlHighlight">#c51162</item>
    <item name="android:headerBackground">#00c853</item>
</style>

Gaya di bawah ini memperluas tema kompak aplikasi dengan datePickerDialogTheme yang diatur ke tema khusus di atas.

<style name="MyAppThemeTwo" parent="Theme.AppCompat.Light">
    <item name="android:datePickerDialogTheme">@style/MyDatePickerDialogStyle</item>
</style>

Gambar di bawah ini menunjukkan output pemilih tanggal setelah menerapkan tema khusus di atas ke aplikasi.

Android DatePicker Spinner

Jika Anda menggunakan tema material, secara default pemilih data berada dalam mode kalender. Anda dapat mengubah tampilan DatePicker dengan mengatur atribut datePickerMode ke mode pemintal atau kalender.

Di bawah gaya set mode datepicker ke spinner.

<style name="MyDatePickerStyle" parent="@android:style/Widget.Material.DatePicker">
    <item name="android:colorControlActivated">#ffea00</item>
     . . .
    <item name="android:datePickerMode">spinner</item>
    <item name="android:calendarViewShown">false</item>
</style>

Terapkan gaya di atas ke pemilih tanggal.

<DatePicker
    android:id="@+id/datePicker"
    style="@style/MyDatePickerStyle"
    android:theme="@style/MyDatePickerSpinnerStyle"
    . . ./>

Ouput pemilih tanggal dalam mode pemintal.

Jika datePickerMode disetel menjadi spinner dan calendarViewShown tidak disetel ke false, tampilan spinner dan calendar akan ditampilkan seperti ditunjukkan di bawah ini.

Android DatePicker Spinner Style

Di bawah gaya materi kustom untuk pemintal DatePicker menetapkan warna pembagi pilihan.

<style name="MyDatePickerSpinnerStyle" parent="@android:style/Widget.Material.DatePicker">
    <item name="android:datePickerMode">spinner</item>
    <item name="android:calendarViewShown">false</item>
    <item name="colorControlNormal">#d50000</item>
</style>

KEEP CODING ~

Share this post