DatePicker dialog is seen used in many android applications where we have to select the date. This widget is mostly seen in the hotel reservation applications for travel booking applications. With the help of this widget, we can simply pick the date from the DatePicker dialog. In this article, we will take a look at How to implement Date Picker in Android.
DatePicker offers two display modes:
- Calendar View: Displays a complete calendar for date selection.
- Spinner View: Displays selectable values for day, month, and year in a scrollable spinner format.
Note: This Android article covered in both Java and Kotlin languages.
Step by Step Implementation
Step 1: Create a New Project in Android Studio
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio.
Step 2: Adding DatePicker widget in Layout file
We can use android:datePickerMode to choose which the mode for the DatePicker. The possible values are “calendar” and “spinner”. This article demonstrate how to implement both type of modes.
activity_main.xml:
<androidx.constraintlayout.widget.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:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
tools:context=".MainActivity">
<DatePicker
android:id="@+id/datePicker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:datePickerMode="calendar"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.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:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
tools:context=".MainActivity">
<DatePicker
android:id="@+id/datePicker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:calendarViewShown="false"
android:datePickerMode="spinner"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Design UI:
Step 3: Working with the MainActivity file
First of all, we declare a variable datePicker to access the DatePicker widget from the XML layout.
val datePicker: DatePicker = findViewById(R.id.datePicker)then, we declare another variable today to get the current get like this.
datePicker.init(
today.get(Calendar.YEAR),
today.get(Calendar.MONTH),
today.get(Calendar.DAY_OF_MONTH)
)
To display the selected date from the calendar we will use
{ view, year, month, day ->
val msg = "You Selected: $day/${month+1}/$year"
Toast.makeText(this@MainActivity, msg, Toast.LENGTH_SHORT).show()
}
We are familiar with further activities in previous articles like accessing button and set OnClickListener etc.
MainActivity file:
package org.geeksforgeeks.demo;
import android.os.Bundle;
import android.widget.DatePicker;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
import java.util.Calendar;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Initialize DatePicker from layout
DatePicker datePicker = findViewById(R.id.datePicker);
// Get today's date using Calendar instance
Calendar today = Calendar.getInstance();
// Initialize DatePicker with the current date
datePicker.init(
today.get(Calendar.YEAR),
today.get(Calendar.MONTH),
today.get(Calendar.DAY_OF_MONTH),
new DatePicker.OnDateChangedListener() {
@Override
public void onDateChanged(DatePicker view, int year, int month, int day) {
// Display selected date in Toast message
String msg = "You Selected: " + day + "/" + (month + 1) + "/" + year;
Toast.makeText(MainActivity.this, msg, Toast.LENGTH_SHORT).show();
}
}
);
}
}
package org.geeksforgeeks.demo
import android.os.Bundle
import android.widget.DatePicker
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import java.util.Calendar
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
// Initialize DatePicker from layout
val datePicker: DatePicker = findViewById(R.id.datePicker)
// Get today's date using Calendar instance
val today = Calendar.getInstance()
// Initialize DatePicker with the current date
datePicker.init(
today.get(Calendar.YEAR),
today.get(Calendar.MONTH),
today.get(Calendar.DAY_OF_MONTH)
) { view, year, month, day ->
// Display selected date in Toast message
val msg = "You Selected: $day/${month+1}/$year"
Toast.makeText(this@MainActivity, msg, Toast.LENGTH_SHORT).show()
}
}
}