Material UI DatePicker set to Required

Question

i am using the Material UI DatePicker in my react app and need to set the date to be required?

Do I need to create a custom validator checking value on submit or is there a prop I can use to set field to required?

<DatePicker
            spacing={2}
            PopoverProps={{ container: this.props.container }}
            onChange={this.updateEndDate}
            value={this.state.endDate}
            initialFocusedDate={this.state.startDate}
            minDate={this.state.startDate}
            disablePast="true"
            disableToolbar="true"
            variant="inline"
            label="End Date"

           // I have tried adding required, required="true", required={true}


          />

Answer 1

You can set required in a DatePicker by adding the slotProps prop for textfield (you can read more about it in the mui component API section for datepicker):

<DatePicker
        spacing={2}
        PopoverProps={{ container: this.props.container }}
        onChange={this.updateEndDate}
        value={this.state.endDate}
        initialFocusedDate={this.state.startDate}
        minDate={this.state.startDate}
        disablePast="true"
        disableToolbar="true"
        variant="inline"
        label="End Date"

       // I have tried adding required, required="true", required={true}

        slotProps={{
              textField: {
                required: true,
              },
            }}
      />

though it won't show any errors, it sticks with the required property. I'll update the answer if I find a way to add the inherited required dialogue box to it