Material-components-android: [MaterialDatePicker] docs

[kaushalyap]

Is your feature request related to a problem? Please describe.
No docs found for MaterialDatePicker

Describe the solution you'd like
Add docs, examples about how to use MaterialDatePicker including, how to use new range select.

Describe alternatives you've considered
using a third party library to implement date range select.

Additional context
I was came to know about new material component release, something that caught my eye was range select in MaterialDatePicker, but at least I did not found any docs on how to use MaterialDatePicker. I did not even found a view in android studio layout, just the android.wiget.datepicker, even though I added the material dependency.

[gabrielemariotti]

You can start from the demo example.

Something like:

   MaterialDatePicker.Builder<Pair<Long, Long>> builderRange =
        MaterialDatePicker.Builder.dateRangePicker();
    CalendarConstraints.Builder constraintsBuilderRange = new CalendarConstraints.Builder();
    //.....
    builderRange.setCalendarConstraints(constraintsBuilderRange.build());
    MaterialDatePicker<?> pickerRange = builderRange.build();
    pickerRange.show(getSupportFragmentManager(), pickerRange.toString());

[kaushalyap]

@gabrielemariotti Thanks it worked with material theme. May I ask why there is no custom view for this (in xml)?

[EdricChan03]

@kaushalyap That's because the MaterialDatePicker is actually a DialogFragment which is typically opened by calling the show method on an instance of the MaterialDatePicker, as you can see from the last line of code in @gabrielemariotti's example.

[kaushalyap]

@EdricChan03 Anyway or any plan to make it a custom view just like android.widget.datepicker?

[marcoRS]

The demo unfortunately doesn't show how to parse the selected date. I am using the following code to parse the selected date but I get the wrong date.

materialDatePicker.addOnPositiveButtonClickListener { dateSelected ->
            val selectedAsInstant = Instant.ofEpochMilli(dateSelected)
            val formattedDate = SHORT_DATE_FORMATTER.format(selectedAsInstant)
        }

When I display this date in a formatted way I get the day before, so if I select say 10/23/2019 on the Date Picker calendar, the instant I create from above when formatted displays 10/22/2019.

The following is my formatter code:

val SHORT_DATE_FORMATTER: DateTimeFormatter = DateTimeFormatter.ofPattern("MM/dd/yyyy")
    .withZone(ZoneId.systemDefault())

SHORT_DATE_FORMATTER.format(selectedDate)

Could this possibly be a bug in the date picker?

[EdricChan03]

@marcoRS It's probably because the code was internally switched to use the UTC time zone. I suggest you specify the UTC time zone instead of the user's default time zone.

[marcoRS]

@EdricChan03 Thanks , now I understand the difference. How would I specify the UTC time zone for the calendar date picker?

Nevermind, I understand now. Thanks

[masteramyx]

@marcoRS Were you able to set the time zone on the calendar date picker itself?
I have a method that builds the calendar and returns the long of the date/time selected. I'm trying to avoid having to set the time zone on all my SimpleDateFormatters as such.

            sSimpleDateFormat= new SimpleDateFormat("MM/dd/yyyy", Locale.getDefault());
            sSimpleDateFormat.setTimeZone(TimeZone.getTimeZone("UTC"));

Not sure how I can do this

[wcshi]

Did you read https://github.com/material-components/material-components-android/blob/master/docs/components/Picker.md?

[RomarioGab]

Hello guys, the daterangepicker works normal for AppCompativy but you are not having difficulty in implementing it in a Fragment ... would you like an example here?