Open In App

More Functionalities of Material Design Date Picker in Android

Improve
Improve
Like Article
Like
Save
Share
Report

As discussed in the Material Design Date Picker in Android it offers many functionalities to users and is easy to implement for developers. So in this article, we are going to discuss more functionalities of material design date picker with examples. Note that the UI part will be the same as in the Part-1 article. We are going to work with the Java file only.  

Functionality 1: Block all the dates before today’s date

This feature is very useful for a developer for avoiding users from choosing the wrong date. A sample GIF is given below to get an idea about what we are going to do in this functionality.

Sample GIF

Go to the MainActivity.java file, and refer to the following code. Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.

Java




import android.annotation.SuppressLint;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;
import com.google.android.material.datepicker.CalendarConstraints;
import com.google.android.material.datepicker.DateValidatorPointForward;
import com.google.android.material.datepicker.MaterialDatePicker;
import com.google.android.material.datepicker.MaterialPickerOnPositiveButtonClickListener;
 
public class MainActivity extends AppCompatActivity {
 
    // button to open the material date picker dialog
    private Button mPickDateButton;
 
    // textview to preview the selected date
    private TextView mShowSelectedDateText;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        // register all the UI widgets with their
        // appropriate IDs
        mPickDateButton = findViewById(R.id.pick_date_button);
        mShowSelectedDateText = findViewById(R.id.show_selected_date);
 
        // create the calendar constraint builder
        CalendarConstraints.Builder calendarConstraintBuilder = new CalendarConstraints.Builder();
         
        // set the validator point forward from june
        // this mean the all the dates before the June month
        // are blocked
        calendarConstraintBuilder.setValidator(DateValidatorPointForward.now());
 
        // instantiate the Material date picker dialog
        // builder
        final MaterialDatePicker.Builder materialDatePickerBuilder = MaterialDatePicker.Builder.datePicker();
        materialDatePickerBuilder.setTitleText("SELECT A DATE");
 
        // now pass the constrained calendar builder to
        // material date picker Calendar constraints
        materialDatePickerBuilder.setCalendarConstraints(calendarConstraintBuilder.build());
 
        // now build the material date picker dialog
        final MaterialDatePicker materialDatePicker = materialDatePickerBuilder.build();
 
        // handle the Select date button to open the
        // material date picker
        mPickDateButton.setOnClickListener(
                new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        // show the material date picker with
                        // supportable fragment manager to
                        // interact with dialog material date
                        // picker dialog fragments
                        materialDatePicker.show(getSupportFragmentManager(), "MATERIAL_DATE_PICKER");
                    }
                });
 
        materialDatePicker.addOnPositiveButtonClickListener(
                new MaterialPickerOnPositiveButtonClickListener() {
                    @SuppressLint("SetTextI18n")
                    @Override
                    public void onPositiveButtonClick(Object selection) {
                        // now update the selected date preview
                        mShowSelectedDateText.setText("Selected Date is : " + materialDatePicker.getHeaderText());
                    }
                });
    }
}


Kotlin




import android.annotation.SuppressLint;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;
import com.google.android.material.datepicker.CalendarConstraints;
import com.google.android.material.datepicker.DateValidatorPointForward;
import com.google.android.material.datepicker.MaterialDatePicker;
import com.google.android.material.datepicker.MaterialPickerOnPositiveButtonClickListener;
 
 
class MainActivity : AppCompatActivity() {
    // button to open the material date picker dialog
    private var mPickDateButton: Button? = null
 
    // textview to preview the selected date
    private var mShowSelectedDateText: TextView? = null
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
 
        // register all the UI widgets with their
        // appropriate IDs
        mPickDateButton = findViewById(R.id.pick_date_button)
        mShowSelectedDateText = findViewById(R.id.show_selected_date)
 
        // create the calendar constraint builder
        val calendarConstraintBuilder = CalendarConstraints.Builder()
 
        // set the validator point forward from june
        // this mean the all the dates before the June month
        // are blocked
        calendarConstraintBuilder.setValidator(DateValidatorPointForward.now())
 
        // instantiate the Material date picker dialog
        // builder
        val materialDatePickerBuilder: MaterialDatePicker.Builder<*> =
            MaterialDatePicker.Builder.datePicker()
        materialDatePickerBuilder.setTitleText("SELECT A DATE")
 
        // now pass the constrained calendar builder to
        // material date picker Calendar constraints
        materialDatePickerBuilder.setCalendarConstraints(calendarConstraintBuilder.build())
 
        // now build the material date picker dialog
        val materialDatePicker = materialDatePickerBuilder.build()
 
        // handle the Select date button to open the
        // material date picker
        mPickDateButton.setOnClickListener(
            object : OnClickListener() {
                fun onClick(v: View?) {
                    // show the material date picker with
                    // supportable fragment manager to
                    // interact with dialog material date
                    // picker dialog fragments
                    materialDatePicker.show(supportFragmentManager, "MATERIAL_DATE_PICKER")
                }
            })
        materialDatePicker.addOnPositiveButtonClickListener { // now update the selected date preview
            mShowSelectedDateText.setText("Selected Date is : " + materialDatePicker.headerText)
        }
    }
}
// This code is added by Ujjwal KUmar Bhardwaj


Output: Run on Emulator

Functionality 2: Select the today’s date as the default selection as soon as the material date picker dialog opens

Have a look at the following image. 

Sample Image

Go to the MainActivity.java file, and refer to the following code. Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail. 

Java




import android.annotation.SuppressLint;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;
import com.google.android.material.datepicker.MaterialDatePicker;
import com.google.android.material.datepicker.MaterialPickerOnPositiveButtonClickListener;
 
public class MainActivity extends AppCompatActivity {
 
    // button to open the material date picker dialog
    private Button mPickDateButton;
 
    // textview to preview the selected date
    private TextView mShowSelectedDateText;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        // register all the UI widgets with their
        // appropriate IDs
        mPickDateButton = findViewById(R.id.pick_date_button);
        mShowSelectedDateText = findViewById(R.id.show_selected_date);
 
        // now create the instance of the regular material
        // date picker
        MaterialDatePicker.Builder materialDateBuilder = MaterialDatePicker.Builder.datePicker();
 
        // get the today's date from the method
        // todayInUtcMilliseconds()
        long today = MaterialDatePicker.todayInUtcMilliseconds();
 
        // now define the properties of the
        // materialDateBuilder
        materialDateBuilder.setTitleText("SELECT A DATE");
 
        // now make today's date selected by default as soon
        // as the dialog opens
        materialDateBuilder.setSelection(today);
 
        // now create the instance of the material date
        // picker and build the dialog
        final MaterialDatePicker materialDatePicker = materialDateBuilder.build();
 
        // handle select date button which opens the
        // material design date picker
        mPickDateButton.setOnClickListener(
                new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        // now show the material date picker
                        // dialog by passing
                        // getSupportFragmentmanager()
                        materialDatePicker.show(getSupportFragmentManager(), "MATERIAL_DATE_PICKER");
                    }
                });
 
        // now handle the positive button click from the
        // material design date picker
        materialDatePicker.addOnPositiveButtonClickListener(
                new MaterialPickerOnPositiveButtonClickListener() {
                    @SuppressLint("SetTextI18n")
                    @Override
                    public void onPositiveButtonClick(Object selection) {
                        // now update selected date preview text
                        mShowSelectedDateText.setText("Selected Date is : " + materialDatePicker.getHeaderText());
                    }
                });
    }
}


Kotlin




import android.annotation.SuppressLint;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;
import com.google.android.material.datepicker.MaterialDatePicker;
import com.google.android.material.datepicker.MaterialPickerOnPositiveButtonClickListener;
 
 
class MainActivity : AppCompatActivity() {
    // button to open the material date picker dialog
    private var mPickDateButton: Button? = null
 
    // textview to preview the selected date
    private var mShowSelectedDateText: TextView? = null
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
 
        // register all the UI widgets with their
        // appropriate IDs
        mPickDateButton = findViewById(R.id.pick_date_button)
        mShowSelectedDateText = findViewById(R.id.show_selected_date)
 
        // now create the instance of the regular material
        // date picker
        val materialDateBuilder: MaterialDatePicker.Builder<*> =
            MaterialDatePicker.Builder.datePicker()
 
        // get the today's date from the method
        // todayInUtcMilliseconds()
        val today = MaterialDatePicker.todayInUtcMilliseconds()
 
        // now define the properties of the
        // materialDateBuilder
        materialDateBuilder.setTitleText("SELECT A DATE")
 
        // now make today's date selected by default as soon
        // as the dialog opens
        materialDateBuilder.setSelection(today)
 
        // now create the instance of the material date
        // picker and build the dialog
        val materialDatePicker = materialDateBuilder.build()
 
        // handle select date button which opens the
        // material design date picker
        mPickDateButton.setOnClickListener(
            object : OnClickListener() {
                fun onClick(v: View?) {
                    // now show the material date picker
                    // dialog by passing
                    // getSupportFragmentmanager()
                    materialDatePicker.show(supportFragmentManager, "MATERIAL_DATE_PICKER")
                }
            })
 
        // now handle the positive button click from the
        // material design date picker
        materialDatePicker.addOnPositiveButtonClickListener { // now update selected date preview text
            mShowSelectedDateText.setText("Selected Date is : " + materialDatePicker.headerText)
        }
    }
}
// This code is adde by UJjwal Kumar Bhardwaj


Output: Run on Emulator

Functionality 3: Make the user, select a date within bounds

For example, select the date from March 2020 to December 2020. A sample GIF is given below to get an idea about what we are going to do in this functionality.

Sample GIF

Go to the MainActivity.java file, and refer to the following code. Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail. 

Java




import android.annotation.SuppressLint;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;
import com.google.android.material.datepicker.CalendarConstraints;
import com.google.android.material.datepicker.MaterialDatePicker;
import com.google.android.material.datepicker.MaterialPickerOnPositiveButtonClickListener;
import java.util.Calendar;
import java.util.TimeZone;
 
public class MainActivity extends AppCompatActivity {
 
    // button to open the material date picker dialog
    private Button mPickDateButton;
 
    // textview to preview the selected date
    private TextView mShowSelectedDateText;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        // register all the UI widgets with their
        // appropriate IDs
        mPickDateButton = findViewById(R.id.pick_date_button);
        mShowSelectedDateText = findViewById(R.id.show_selected_date);
 
        // create the instance of the calendar to set the
        // bounds
        Calendar calendar = Calendar.getInstance(TimeZone.getTimeZone("UTC"));
 
        // now set the starting bound from current month to
        // previous MARCH
        calendar.set(Calendar.MONTH, Calendar.MARCH);
        long march = calendar.getTimeInMillis();
 
        // now set the ending bound from current month to
        // DECEMBER
        calendar.set(Calendar.MONTH, Calendar.DECEMBER);
        long december = calendar.getTimeInMillis();
 
        // create the instance of the CalendarConstraints
        // Builder
        CalendarConstraints.Builder calendarConstraintBuilder = new CalendarConstraints.Builder();
 
        // and set the start and end constraints (bounds)
        calendarConstraintBuilder.setStart(march);
        calendarConstraintBuilder.setEnd(december);
 
        // instantiate the Material date picker dialog
        // builder
        final MaterialDatePicker.Builder materialDatePickerBuilder = MaterialDatePicker.Builder.datePicker();
        materialDatePickerBuilder.setTitleText("SELECT A DATE");
 
        // now pass the constrained calendar builder to
        // material date picker Calendar constraints
        materialDatePickerBuilder.setCalendarConstraints(calendarConstraintBuilder.build());
 
        // now build the material date picker dialog
        final MaterialDatePicker materialDatePicker = materialDatePickerBuilder.build();
 
        // handle the Select date button to open the
        // material date picker
        mPickDateButton.setOnClickListener(
                new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        // show the material date picker with
                        // supportable fragment manager to
                        // interact with dialog material date
                        // picker dialog fragments
                        materialDatePicker.show(getSupportFragmentManager(), "MATERIAL_DATE_PICKER");
                    }
                });
 
        materialDatePicker.addOnPositiveButtonClickListener(
                new MaterialPickerOnPositiveButtonClickListener() {
                    @SuppressLint("SetTextI18n")
                    @Override
                    public void onPositiveButtonClick(Object selection) {
                        // now update the selected date preview
                        mShowSelectedDateText.setText("Selected Date is : " + materialDatePicker.getHeaderText());
                    }
                });
    }
}


Kotlin




import android.annotation.SuppressLint;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;
import com.google.android.material.datepicker.CalendarConstraints;
import com.google.android.material.datepicker.MaterialDatePicker;
import com.google.android.material.datepicker.MaterialPickerOnPositiveButtonClickListener;
import java.util.Calendar;
import java.util.TimeZone;
 
 
class MainActivity : AppCompatActivity() {
    // button to open the material date picker dialog
    private var mPickDateButton: Button? = null
 
    // textview to preview the selected date
    private var mShowSelectedDateText: TextView? = null
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
 
        // register all the UI widgets with their
        // appropriate IDs
        mPickDateButton = findViewById(R.id.pick_date_button)
        mShowSelectedDateText = findViewById(R.id.show_selected_date)
 
        // create the instance of the calendar to set the
        // bounds
        val calendar: Calendar = Calendar.getInstance(TimeZone.getTimeZone("UTC"))
 
        // now set the starting bound from current month to
        // previous MARCH
        calendar.set(Calendar.MONTH, Calendar.MARCH)
        val march: Long = calendar.getTimeInMillis()
 
        // now set the ending bound from current month to
        // DECEMBER
        calendar.set(Calendar.MONTH, Calendar.DECEMBER)
        val december: Long = calendar.getTimeInMillis()
 
        // create the instance of the CalendarConstraints
        // Builder
        val calendarConstraintBuilder = CalendarConstraints.Builder()
 
        // and set the start and end constraints (bounds)
        calendarConstraintBuilder.setStart(march)
        calendarConstraintBuilder.setEnd(december)
 
        // instantiate the Material date picker dialog
        // builder
        val materialDatePickerBuilder: MaterialDatePicker.Builder<*> =
            MaterialDatePicker.Builder.datePicker()
        materialDatePickerBuilder.setTitleText("SELECT A DATE")
 
        // now pass the constrained calendar builder to
        // material date picker Calendar constraints
        materialDatePickerBuilder.setCalendarConstraints(calendarConstraintBuilder.build())
 
        // now build the material date picker dialog
        val materialDatePicker = materialDatePickerBuilder.build()
 
        // handle the Select date button to open the
        // material date picker
        mPickDateButton.setOnClickListener(
            object : OnClickListener() {
                fun onClick(v: View?) {
                    // show the material date picker with
                    // supportable fragment manager to
                    // interact with dialog material date
                    // picker dialog fragments
                    materialDatePicker.show(supportFragmentManager, "MATERIAL_DATE_PICKER")
                }
            })
        materialDatePicker.addOnPositiveButtonClickListener { // now update the selected date preview
            mShowSelectedDateText.setText("Selected Date is : " + materialDatePicker.headerText)
        }
    }
}
//This code is adde by Ujjwal Kumar Bhardwaj


Output: Run on Emulator

Functionality 4: Open the material date picker dialog at the specific month

For example, open the material date picker dialog in August month. A sample GIF is given below to get an idea about what we are going to do in this functionality. 

Sample GIF

Go to the MainActivity.java file, and refer to the following code. Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail. 

Java




import android.annotation.SuppressLint;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;
import com.google.android.material.datepicker.CalendarConstraints;
import com.google.android.material.datepicker.MaterialDatePicker;
import com.google.android.material.datepicker.MaterialPickerOnPositiveButtonClickListener;
import java.util.Calendar;
import java.util.TimeZone;
 
public class MainActivity extends AppCompatActivity {
 
    // button to open the material date picker dialog
    private Button mPickDateButton;
 
    // textview to preview the selected date
    private TextView mShowSelectedDateText;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        // register all the UI widgets with their
        // appropriate IDs
        mPickDateButton = findViewById(R.id.pick_date_button);
        mShowSelectedDateText = findViewById(R.id.show_selected_date);
 
        // create the instance of the calendar to set the
        // bounds
        Calendar calendar = Calendar.getInstance(TimeZone.getTimeZone("UTC"));
 
        // from calendar object get the AUGUST month
        calendar.set(Calendar.MONTH, Calendar.AUGUST);
        long august = calendar.getTimeInMillis();
 
        // create the instance of the CalendarConstraints
        // Builder
        CalendarConstraints.Builder calendarConstraintBuilder = new CalendarConstraints.Builder();
        calendarConstraintBuilder.setOpenAt(august);
 
        // instantiate the Material date picker dialog
        // builder
        final MaterialDatePicker.Builder materialDatePickerBuilder = MaterialDatePicker.Builder.datePicker();
        materialDatePickerBuilder.setTitleText("SELECT A DATE");
 
        // now pass the constrained calendar builder to
        // material date picker Calendar constraints
        materialDatePickerBuilder.setCalendarConstraints(calendarConstraintBuilder.build());
 
        // now build the material date picker dialog
        final MaterialDatePicker materialDatePicker = materialDatePickerBuilder.build();
 
        // handle the Select date button to open the
        // material date picker
        mPickDateButton.setOnClickListener(
                new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        // show the material date picker with
                        // supportable fragment manager to
                        // interact with dialog material date
                        // picker dialog fragments
                        materialDatePicker.show(getSupportFragmentManager(), "MATERIAL_DATE_PICKER");
                    }
                });
 
        materialDatePicker.addOnPositiveButtonClickListener(
                new MaterialPickerOnPositiveButtonClickListener() {
                    @SuppressLint("SetTextI18n")
                    @Override
                    public void onPositiveButtonClick(Object selection) {
                        // now update the selected date preview
                        mShowSelectedDateText.setText("Selected Date is : " + materialDatePicker.getHeaderText());
                    }
                });
    }
}


Kotlin




import android.annotation.SuppressLint;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;
import com.google.android.material.datepicker.CalendarConstraints;
import com.google.android.material.datepicker.MaterialDatePicker;
import com.google.android.material.datepicker.MaterialPickerOnPositiveButtonClickListener;
import java.util.Calendar;
import java.util.TimeZone;
 
 
class MainActivity : AppCompatActivity() {
    // button to open the material date picker dialog
    private var mPickDateButton: Button? = null
 
    // textview to preview the selected date
    private var mShowSelectedDateText: TextView? = null
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
 
        // register all the UI widgets with their
        // appropriate IDs
        mPickDateButton = findViewById(R.id.pick_date_button)
        mShowSelectedDateText = findViewById(R.id.show_selected_date)
 
        // create the instance of the calendar to set the
        // bounds
        val calendar: Calendar = Calendar.getInstance(TimeZone.getTimeZone("UTC"))
 
        // from calendar object get the AUGUST month
        calendar.set(Calendar.MONTH, Calendar.AUGUST)
        val august: Long = calendar.getTimeInMillis()
 
        // create the instance of the CalendarConstraints
        // Builder
        val calendarConstraintBuilder = CalendarConstraints.Builder()
        calendarConstraintBuilder.setOpenAt(august)
 
        // instantiate the Material date picker dialog
        // builder
        val materialDatePickerBuilder: MaterialDatePicker.Builder<*> =
            MaterialDatePicker.Builder.datePicker()
        materialDatePickerBuilder.setTitleText("SELECT A DATE")
 
        // now pass the constrained calendar builder to
        // material date picker Calendar constraints
        materialDatePickerBuilder.setCalendarConstraints(calendarConstraintBuilder.build())
 
        // now build the material date picker dialog
        val materialDatePicker = materialDatePickerBuilder.build()
 
        // handle the Select date button to open the
        // material date picker
        mPickDateButton.setOnClickListener(
            object : OnClickListener() {
                fun onClick(v: View?) {
                    // show the material date picker with
                    // supportable fragment manager to
                    // interact with dialog material date
                    // picker dialog fragments
                    materialDatePicker.show(supportFragmentManager, "MATERIAL_DATE_PICKER")
                }
            })
        materialDatePicker.addOnPositiveButtonClickListener { // now update the selected date preview
            mShowSelectedDateText.setText("Selected Date is : " + materialDatePicker.headerText)
        }
    }
}
//This code is written by Ujjwal KUmar Bhardwaj


Output: Run on Emulator

 



Last Updated : 02 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads