Sunday, May 10, 2015

How to use DatePicker in Android

Table of contents
  1. Android DatePicker Example
    • DatePicker onDateChangedListener
    • DatePicker without calendar
    • DatePicker with spinner
  2. DatePicker set date and get date
Upcoming Tutorials
  1. DatePicker Style
  2. Android custom DatePicker
This example has an error. It display wrong month number such as May is 4 instead 5. Months are indexed starting at 0, so we need to add 1 with return month number. Please correct the error in your code.

1. Android DatePicker Example

activity_main.xml

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp"
    tools:context=".MainActivity"
    >
    <TextView
        android:id="@+id/tv"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:textSize="20dp"
        android:textColor="#CF446F"
        />
    <!--This example works only date picker mode = spinner mode only-->
    <!--DatePicker with spinner and without Calendar-->
    <DatePicker
        android:id="@+id/dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:datePickerMode="spinner"
        android:calendarViewShown="false"
        android:layout_below="@id/tv"/>
</RelativeLayout>
MainActivity.java

package com.cfsuman.me.androidcodesnippets;

import android.os.Bundle;
import android.app.Activity;
import android.widget.DatePicker;
import android.widget.TextView;
import java.util.Calendar;

public class MainActivity extends Activity {

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

        //Get a new instance of Calendar
        Calendar c= Calendar.getInstance();
        int year = c.get(c.YEAR);
        int month = c.get(c.MONTH);
        int dayOfMonth = c.get(c.DAY_OF_MONTH);

        //Get the widgets reference from XML layout
        final TextView tv = (TextView) findViewById(R.id.tv);
        DatePicker dp = (DatePicker) findViewById(R.id.dp);

        //Display the DatePicker initial date
        tv.setText("Initial Date [mm/dd/yyyy]:\n"+ month+"/"+dayOfMonth+"/"+year);

        //init(int year, int monthOfYear, int dayOfMonth, DatePicker.OnDateChangedListener onDateChangedListener) Initialize the state.
        dp.init(
                year,
                month,
                dayOfMonth,
                new DatePicker.OnDateChangedListener() {

            @Override
            public void onDateChanged(
                    DatePicker view,
                    int year,
                    int monthOfYear,
                    int dayOfMonth)
            {
                //Display the changed date to app interface
                tv.setText("Date changed [mm/dd/yyyy]:\n" + monthOfYear + "/" + dayOfMonth + "/" + year);
            }
        });
   }
}

2. DatePicker Set Date and Get Date

activity_main.xml

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp"
    tools:context=".MainActivity"
    >
    <TextView
        android:id="@+id/tv"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:textSize="20dp"
        android:textColor="#CF446F"
        />
    <DatePicker
        android:id="@+id/dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:datePickerMode="spinner"
        android:calendarViewShown="false"
        android:layout_below="@id/tv"/>
    <Button
        android:id="@+id/btn_update_date"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Update Date"
        android:layout_below="@id/dp"
        />
    <Button
        android:id="@+id/btn_get_date"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Get Date"
        android:layout_below="@id/dp"
        android:layout_toRightOf="@id/btn_update_date"
        />
</RelativeLayout>
MainActivity.java

package com.cfsuman.me.androidcodesnippets;

import android.os.Bundle;
import android.app.Activity;
import android.view.View;
import android.widget.Button;
import android.widget.DatePicker;
import android.widget.TextView;
import java.util.Calendar;

public class MainActivity extends Activity {

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

        //Get a new instance of Calendar
        final Calendar c= Calendar.getInstance();
        int year = c.get(c.YEAR);
        int month = c.get(c.MONTH);
        int dayOfMonth = c.get(c.DAY_OF_MONTH);

        //Get the widgets reference from XML layout
        final TextView tv = (TextView) findViewById(R.id.tv);
        Button btnUpdateDate = (Button) findViewById(R.id.btn_update_date);
        Button btnGetDate = (Button) findViewById(R.id.btn_get_date);
        final DatePicker dp = (DatePicker) findViewById(R.id.dp);

        //Display the DatePicker initial date
        tv.setText("Initial Date [mm/dd/yyyy]:\n" + month + "/" + dayOfMonth + "/" + year);

        btnUpdateDate.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                //updateDate(int year, int month, int dayOfMonth) Update the current date.
                //Here we added 1 year 2 month and 10 days with current system date
                dp.updateDate(c.get(c.YEAR) + 1, c.get(c.MONTH) + 2, c.get(c.DAY_OF_MONTH) + 10);
                tv.setText("");
            }
        });

        btnGetDate.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //Get the DatePicker Selected Date
                tv.setText("Selected Date: [mm/dd/yyyy]\n");
                tv.setText(tv.getText() + "" + dp.getMonth() + "/" + dp.getDayOfMonth() + "/"+dp.getYear());
                dp.updateDate(c.get(c.YEAR) + 1, c.get(c.MONTH) + 2, c.get(c.DAY_OF_MONTH) + 10);
            }
        });
   }
}
More android examples