Date Time Picker Form Cell¶
The date/time picker form cell represents a key value cell, where the value is a date and/or time. Like other form cells, this form cell also supports facilities to set helper or error texts.
Using the DateTimePickerFormCell¶
This form cell can be used within your activity like any traditional Android view.
<com.sap.cloud.mobile.fiori.formcell.DateTimePickerFormCell
android:id="@+id/dateCell"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
It is important to note that in order to utilize MaterialTimePicker and
MaterialDatePicker, you need to pass in a FragmentManager:
DateTimePickerFormCell mDateTimePickerFormCell = findViewById(R.id.dateCell);
FragmentManager manager = getSupportFragmentManager();
mDateTimePickerFormCell.setManager(manager);
Editable and Non-Editable Modes¶
This form cell can be set to editable or non-editable modes. For this cell, editable and enabled attributes are same: a non-editable form cell is not enabled (not clickable, not focusable). By default, the form cell is editable and enabled. You can control the editability of the cell using XML attribute app:isEditable="false. You can also fetch the view in your activity and set it to be editable:
mDateTimePickerFormCell.setIsEditable(false);
For more information about the editable attribute, see FormCell.
Date/Time Picker Modes¶
The form cell can be used in four different modes: date and time, date range, date only, or time only.
Date-Time¶
This is the default mode of the cell and allows the user to pick a date and time. You can use the app:dateTimePickerMode="date_time" XML attribute or setDateTimePickerMode(@NonNull DateTimePicker.DateTimePickerMode) method to set the cell in date-time mode.
Date Range¶
This mode allows the user to pick a start date and end date and does not show the dialog to pick a time. You can use the app:dateTimePickerMode="range" XML attribute or setDateTimePickerMode(@NonNull DateTimePicker.DateTimePickerMode) method to set the cell in date range mode.
Date Only¶
This mode allows the user to pick only a date and does not show the dialog to pick a time. You can use the app:dateTimePickerMode="date" XML attribute or setDateTimePickerMode(@NonNull DateTimePicker.DateTimePickerMode) method to set the cell in date mode.
Time Only¶
This mode allows the user to pick only a time and does not show the dialog to pick a date. You can use the app:dateTimePickerMode="time" XML attribute or setDateTimePickerMode(@NonNull DateTimePicker.DateTimePickerMode) method to set the cell in time mode.
Text Input Mode¶
To determine whether the date picker or time picker opens in text input mode, use setUseTextDate(boolean) or setUseTextTime(boolean).
DateFormatter¶
You may want to change the format of the date and time displayed to a user based on locale or some other logic. To change the format, set the Duration Formatter using setDateTimeFormatter(DateFormat) API on the cell. As shown below,DateTimePickerFormCell values presented to user in the cell will be first formatted using yourCellValueChangeListener formatter.
To format the date and time with an icon, invoke the setDateTimeFormatter(new SpannableDateFormatter( "MMM dd, yyyy", "HH:mm") method.
(...)
Setting the Min/max Date¶
To set the minimum and maximum dates, use the method setMinMaxDate(Date min, Date max). The following code sets the minimum date to Oct 15, 2024 00:00 and the maximum date to Nov 29, 2024 00:00. Once these values are set, any date before Oct 15, 2024 00:00, or after Nov 29, 2024 00:00, will not be selectable.
mDateTimePickerFormCell.setMinMaxDate(dateCellformat.parse("Oct 15, 2024 00:00"), dateCellformat.parse("Nov 29, 2024 00:00"));
Adding Day View Decorator¶
Day view decorators can be added to the date-time picker as below. DayViewDecorator is a part of the Android SDK. For more details, refer to this document.
DayViewDecorator dayViewDecorator = new DayViewDecorator() {
@Nullable
@Override
public Drawable getCompoundDrawableBottom(@NonNull Context context, int year, int month, int day, boolean valid, boolean selected) {
if (day == 3 || day == 10 || day == 17 ) {
Drawable d = ContextCompat.getDrawable(context, R.drawable.ic_dot_black_12dp);
assert d != null;
d.setBounds(0, 0, 20, 20);
return d;
} else {
return null;
}
}
@Override
public int describeContents() {
return 0;
}
@Override
public void writeToParcel(@NonNull Parcel dest, int flags) {
}
};
mDateTimePickerFormCell.addDayViewDecorator(dayViewDecorator);
Decorators can be added for each date using the method addDayViewDecorator(DayViewDecorator decorator).
Error and Helper Text¶
Follow design guidelines and see: FormCell
Listening for Cell Value Changes¶
To listen for updates of the cell value, attach a CellValueChangeListener using setCellValueChangeListener:
mDateTimePickerFormCell.setCellValueChangeListener(new FormCell.CellValueChangeListener<Date>() {
@Override
protected void cellChangeHandler(@NonNull Date value) {
// Application logic here
}
});
Required Field¶
A form cell can be marked as a required field by passing true to the setIsRequired() method or setting the isRequired XML attribute to true. This will add an asterisk (*) at the end of the label, to indicate that a date or time must be selected. Note that this does not validate whether a date or time has been chosen or not. To validate the requirement, refer to Error and Helper Text.
DateTimePickerFormCell mDateTimePickerFormCell = findViewById(R.id.dateCell);
mDateTimePickerFormCell.setIsRequired(true);
<com.sap.cloud.mobile.fiori.formcell.DateTimePickerFormCell
android:id="@+id/dateCell"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:key="Required Date Picker"
app:isRequired="true"/>
Also see FormCell