[Feature Request] Clear button on date and date range picker

[DanielReyes03]

Is your feature request related to a problem? Please describe.

I think isn't a problem but would be really useful to have a clear button to clean the selected date or date range.

Describe the solution you'd like

As a user i expect to have a button to clean the date selected

1. I would add a prop in the Date and Date range picker with the name for example -> clearable that allows to show an icon like in the Autocomplete component and clear the current Date or Date range selected.

Example of clear button.

On Clicking the button the component will look like

Describe alternatives you've considered

An alternative solution is using the startContent prop, adding a Button to clear the current Date or DateRange Selected

I know is not the best and beautiful solution but works meanwhile we wait for this feature.

const DateFilter = () => {
  const [dateRange, setDateRange] = useState<any>(null);

  return <>
      <DateRangePicker 
      value={dateRange}
      onChange={setDateRange}
      startContent={
          <Button variant='light' onClick={() => setDateRange(null)} isIconOnly>
              <XMarkIcon className="w-5 h-5 text-gray-500"/> // < - Your Custom Icon to clear date
          </Button>
      } />
  </>
}

https://github.com/nextui-org/nextui/assets/58609880/68ea1dc8-cfbc-490a-be8f-e6c72a3aabed

Screenshots or Videos

No response

[linear[bot]]

ENG-728 [Feature Request] CLEAR_BUTTON_DATE_AND_DATE_RANGE_PICKER

[Jaimayal]

Is there a workaround to achieve the same using the Dropdown component? Doesn't seem support endContent or startContent neither on Dropdown nor DropdownTrigger components

[Mnigos]

this would be very useful

[kabundege]

@DanielReyes03 here's a work around, you could try re-rendering the component when the formik state changes

  const maxDate = useMemo(() => today(getLocalTimeZone()).add({ days: 1 }), [])

  const Dates = useCallback(
    () => (
        <DatePicker
          label="From"
          name="from"
          maxValue={maxDate}
          showMonthAndYearPickers
          value={formik.values.from}
          onChange={vl => formik.setFieldValue("from", vl)}
          endContent={
            <Button
              className="flex-1"
              onClick={() => {
                setSelectedFilters([])
                formik.resetForm({
                  values: {
                    from: undefined,
                  },
                })
              }}
            >
              Clear
            </Button>
          }
        />
     ),
    [formik, maxDate],
  )

[DanielReyes03]

@kabundege Thanks for the alternative solution. I will consider it in my next projects.

¡Happy Coding!