Android DatePicker allows user to select a date making the picked date valid and formatted correctly. DatePicker can be used in two modes: calendar mode and spinner mode. If you use material themes, by default DatePicker is displayed as calendar view.
In this post, you can find details on DatePickerDialog, DatePicker widget, DatePicker material styles, DatePicker custom material styles, DatePicker event handling, DatePicker calendar, DatePicker spinner, and DatePicker spinner styles.
Date picker can be shown as dialog using DatePickerDialog. To use DatePickerDialog, first you need to create a dialog fragment by extending DialogFragment and implementing onCreateDialog method which returns DatePickerDialog instance. In the implementation of onCreateDialog method of date picker fragment, instantiate DatePickerDialog by setting current date and return it.
Below DatePickerDialog examples displays a screen with button, on clicking it, date picker dialog will be shown and the picked date will be displayed as a toast message.
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();
}
};
}
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");
}
}
<?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>
As shown in the above date picker example, date picker event can be handled by implementing DatePickerDialog.OnDateSetListener. DatePickerDialog.OnDateSetListener has a callback method onDateSet which gets called when date is picked from date picker dialog. In onDateSet method, you can get user selected date as shown in the code below.
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();
}
}; Above date set callback method gets called every time date is picked only after adding it to DatePickerDialog by passing it to constructor of the DatePickerDialog.
DatePicker can be shown using DatePicker widget. To use DatePicker widget first define date picker in layout xml as shown below.
<?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>
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();
}
};
}
To handle DatePicker widget events, you need to implement DatePicker.OnDateChangedListener and add it to DatePicker widget by calling setOnDateChangedListener method. DatePicker.OnDateChangedListener has one callback onDateChanged which gets called when date is changed and this where you can get user picket date, see above code for details.
Android platform provides material styles for DatePicker following material design guidelines. Above pictures show default material style of DatePicker with application them set to app compact material style Theme.AppCompat.Light.DarkActionBar.
Date picker style can be customized at application level by extending app compact themes and setting color properties as shown below.
<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>
DatePicker output using custom theme.
With the above custom theme, all UI controls throughout the application get impacted. To customize only DatePicker in your application, you need to extend android material themes for DatePicker widget (Widget.Material.DatePicker) or alert dialog (ThemeOverlay.AppCompat.Dialog.Alert) and set datePickerStyle or datePickerDialogTheme properties of app compact application theme.
Below style is a custom DatePickerDialog theme.
<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>
Below style extends app compact theme with datePickerDialogTheme set to above custom theme.
<style name="MyAppThemeTwo" parent="Theme.AppCompat.Light">
<item name="android:datePickerDialogTheme">@style/MyDatePickerDialogStyle</item>
</style>Below picture shows date picker output after applying above custom theme to application.
If you use material themes, by default the data picker is in calendar mode. You can change the look of DatePicker by setting datePickerMode attribute to either spinner or calendar mode.
Below style sets datepicker mode to 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>
Apply above style to date picker.
<DatePicker
android:id="@+id/datePicker"
style="@style/MyDatePickerStyle"
android:theme="@style/MyDatePickerSpinnerStyle"
. . ./>
Ouput of date picker in spinner mode.
If datePickerMode is set spinner and calendarViewShown is not set to false, both spinner and calendar views will be displayed as shown below.
Below custom material style for spinner DatePicker sets selection divider color.
<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>
