Allowing to accept changes with missing start or end

Date and time pickers
1

Is there a way to use a range datetime picker that accepts an empty start date or an empty end date? The component does now allow the user to confirm changes if one of the two are missing.

In our application, start and end can be optional.

if not, is there a way to have the component behave in ‘live’ mode without having to display the SET button? because the SET button is not behaving the way we want. Our users needs to be able to accept ANY changes, even when a start or end date are missing

2

Hi @Jacques_Hache

The Live selection article might help. You can hide the “set” button by setting touchUi to false.

Let me know if this helps :wave:

3

Sorry I meant to ask if it is possible to hide the SET button but keep the behavior of the picker as if it was visible.

I want the user to confirm changes but the default SET button does not behave the way we need (see initial post) . So I would like to add a custom button that allows the user to save the changes even if the end_date is undefined. Right now the default SET BUTTON is disabled when either start or end is undefined which is a problem for us.

4

Hi @Jacques-Michel_Hache

The buttons option lets you create any custom button and set up a handler function for it. In the following example I’ve overwritten the ‘Set’ button with a custom one:
Component.ts:

  @ViewChild('picker', { static: false })
  inst!: MbscDatepicker;
  btns = [
    {
      text: 'Set',
      handler: (event: any) => {
        // use the picker instance here
        console.log(this.inst!.getVal());
      },
    },
    'cancel',
  ];

Template:

  <mbsc-datepicker
    #picker
    [controls]="['calendar']"
    select="range"
    label="Range"
    placeholder="Please Select..."
    [touchUi]="true"
    [buttons]="btns"
  ></mbsc-datepicker>

Is this what you’ve been looking for?