Fluentui: Datepicker - Clear date

[enriquin]

Hello,

The datepicker does not offer the posibility of clearing the date once the user enters it.

If you are using the datepicker without allowing text input, there is no way the user can delete the value of the input once he has selected one date. You have to put a button to "manually" clear the field.

It would be nice to have an integrated link/button/whatever to clear the field value.

Thanks!

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions to Fabric React!

[stale[bot]]

This issue has been automatically closed because it has not had recent activity after being marked as stale. If you belive this issue is still a problem or should be reopened, please reopen it! Thank you for your contributions to Fabric React!
Why am I receiving this notification?

[mateofd]

I agree with @enriquin it would be a nice feature

[ThreadPitt]

Yes, I second that!

[NickVarnado]

I agree.

[enriquin]

@micahgodbolt The issue was closed, is this abandoned?

I think it is a really easy to fix usability problem. Even in the website examples you have to insert an additional clear date button ;)

Thanks!

[micahgodbolt]

This was closed some time ago by an overly aggressive stalebot. This is a valid question to bring up. I'll ping @lorejoh12 about if it's on the calendar team's roadmap (or if they have other suggestions)

[j-te]

This is my dirty work-around for implementing a clear button. It may give @lorejoh12 some ideas for styling. I feel the default calendar icon is confusing on the right-side as typically within an input: a controllable button is on the right. So I flipped it.

          <DatePicker
            label={showLabel ? label : null}
            allowTextInput={false}
            isMonthPickerVisible={true}
            highlightCurrentMonth={false}
            firstDayOfWeek={1}
            placeholder="Select a date..."
            disabled={inputDisabled}
            strings={DAY_PICKER_STRINGS}
            textField={{
              required: required,
              inputClassName: { paddingLeft: "34px", paddingRight: "8px" },
              onRenderSuffix: showClear ? () => <ClearButton field={field} onChange={onChange} disabled={disabled} /> : null,
              styles: { suffix: { padding: "0 4px" } }
            }}
            styles={{
              icon: { left: "9px", right: "unset" }
            }}
            value={formatDateValue(field)}
            onSelectDate={_value => onChange(formatDateValue(_value), field)}
          />

[cesarhoeflich]

Assign a new 'Key' in your DatePicker property to each reset or cleaning you want.