Option to disable "Clear"-Button in Calendar (DateRange)

Date and time pickers
1

MicrosoftTeams-image
For some date ranges, we want to disable the feature of clearing the range in the DateRange calendar control, so that the text field(s) can never be empty. Currently, there does not seem to be any way to disable this button. Could an option to the calendar control be added for doing this? Something along the lines of

  <mbsc-datepicker select="range" [(ngModel)]="myDateRange" [enableClearButton]="false"></mbsc-datepicker>
2

Hello @Sara :wave:

At the moment it’s not possible to disable the clear button in range selection.

While it is not supported at the moment, I would be more than happy to pass this on to the product team and add your voice to it.
Feel free to share additional information that helps me describe the use case in detail.

3

Hi @Sara

The clear button is a built-in feature as @Elod has mentioned before, which means you won’t be able to configure it on instance basis

Something that came to mind, is hiding it globally - if that helps - by writing a simple CSS override:

.mbsc-range-label-clear {
    display: none;
}

image
image3360Ă—1892 922 KB

If you would like to avoid the submit of a partial selection (eg. start day only), that’s doable by having a “Set” button. The “Set” only becomes active if both ends are selected:

image
image832Ă—1120 59.1 KB

4

inside options you can use the cancelButtonClasses, and use a class instead of using CSS.
Like if you are using bootstrap you can do this:

const config = {
    // The rest of other configs,
    cancelButtonClasses: 'd-none'
};
element.daterangepicker(config, handle_date_range)
1 Like