Tutorial Membuat Aplikasi Android Date Time Picker

Android menyediakan kontrol bagi pengguna untuk memilih waktu atau memilih tanggal sebagai dialog siap pakai. Setiap pemetik menyediakan kontrol untuk memilih setiap bagian dari waktu (jam, menit, AM / PM) atau tanggal (bulan, hari, tahun). Menggunakan pemetik ini membantu memastikan bahwa pengguna Anda dapat memilih waktu atau tanggal yang valid, diformat dengan benar, dan disesuaikan dengan lokasi pengguna.

Sebaiknya Anda menggunakan DialogFragment untuk meng-host setiap waktu atau pemetik tanggal. DialogFragment mengelola siklus dialog untuk Anda dan memungkinkan Anda menampilkan pemetik dalam konfigurasi tata letak yang berbeda, seperti pada dialog dasar pada handset atau sebagai bagian tertanam dari tata letak pada layar besar.

Meskipun DialogFragment pertama kali ditambahkan ke platform di Android 3.0 (tingkat API 11), jika aplikasi Anda mendukung versi Android yang lebih tua dari 3,0-bahkan serendah Android 1.6-Anda dapat menggunakan kelas DialogFragment yang tersedia di perpustakaan pendukung untuk kompatibilitas ke belakang. Selengkapnya.


* Gambar diatas akan berbeda tampilan jika di install pada device Android yang memiliki OS beda versi.

Buat project baru di Android Studio File ⇒ New Project. Kemudian pilih Empty Activity dan melanjutkannya hingga selesai.

Tampilan untuk menampilkan Date Time Picker.
activity_main.xml

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

    <EditText
        android:id="@+id/txt_tgl"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:clickable="true"
        android:editable="false"
        android:focusable="false"
        android:hint="Tanggal" />

    <EditText
        android:id="@+id/txt_jam"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:clickable="true"
        android:editable="false"
        android:focusable="false"
        android:hint="Jam" />

    <Button
        android:id="@+id/btn_get_datetime"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Get Date Time" />

</LinearLayout>

 

Buka MainActivity.java dan tambahkan coding seperti dibawah ini untuk menampilkan dialog date time picker.
MainActivity.java

package com.dedykuncoro.datetimepicker;

import android.app.DatePickerDialog;
import android.app.TimePickerDialog;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.DatePicker;
import android.widget.EditText;
import android.widget.TimePicker;
import android.widget.Toast;

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

public class MainActivity extends AppCompatActivity {

    Calendar myCalendar;
    DatePickerDialog.OnDateSetListener date;
    EditText txt_tgl, txt_jam;
    Button btn_get_datetime;

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

        txt_tgl = (EditText) findViewById(R.id.txt_tgl);
        txt_jam = (EditText) findViewById(R.id.txt_jam);
        btn_get_datetime = (Button) findViewById(R.id.btn_get_datetime);

        myCalendar = Calendar.getInstance();
        date = new DatePickerDialog.OnDateSetListener() {
            @Override
            public void onDateSet(DatePicker view, int year, int monthOfYear,
                                  int dayOfMonth) {
                // TODO Auto-generated method stub
                myCalendar.set(Calendar.YEAR, year);
                myCalendar.set(Calendar.MONTH, monthOfYear);
                myCalendar.set(Calendar.DAY_OF_MONTH, dayOfMonth);
                updateLabel();
            }
        };

        txt_tgl.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                new DatePickerDialog(MainActivity.this, date, myCalendar
                        .get(Calendar.YEAR), myCalendar.get(Calendar.MONTH),
                        myCalendar.get(Calendar.DAY_OF_MONTH)).show();
            }
        });

        txt_jam.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                Calendar mcurrentTime = Calendar.getInstance();
                int hour = mcurrentTime.get(Calendar.HOUR_OF_DAY);
                int minute = mcurrentTime.get(Calendar.MINUTE);
                TimePickerDialog mTimePicker;
                mTimePicker = new TimePickerDialog(MainActivity.this, new TimePickerDialog.OnTimeSetListener() {

                    @Override
                    public void onTimeSet(TimePicker timePicker, int selectedHour, int selectedMinute) {
                        txt_jam.setText(selectedHour + ":" + selectedMinute);
                    }
                }, hour, minute, true);//Yes 24 hour time
                mTimePicker.setTitle("Select Time");
                mTimePicker.show();

            }
        });

        btn_get_datetime.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View view) {
                Toast.makeText(MainActivity.this,
                        "Tanggal : " + txt_tgl.getText().toString() + "\n" +
                                "Jam : " + txt_jam.getText().toString()
                        , Toast.LENGTH_SHORT
                ).show();
            }
        });
    }

    private void updateLabel() {
        String myFormat = "yyyy-MM-dd";
        SimpleDateFormat sdf = new SimpleDateFormat(myFormat, Locale.US);
        txt_tgl.setText(sdf.format(myCalendar.getTime()));
    }

}

 

Run Aplikasinya.

Download Source Code :

Please share 🙂


Share on FacebookTweet about this on TwitterShare on Google+Pin on PinterestShare on LinkedInEmail this to someone
close