Reset date picker field

React

Angular

Web Components

const [date, setDate] = useState<Date | undefined>();

  const setNewDate = (value: Date | undefined) => {
    setDate(value);
  };

  function setValue() {
    const d = new Date();
    d.setDate(d.getDate() - 7);
    setDate(d);
  }

  function clearValue() {
    setDate(undefined);
  }

<GoabFormItem label="Date Picker">
        <GoabDatePicker
          name="item"
          value={date}
          onChange={(e) => setNewDate(e.value as Date)}
          mb="xl"
        />
      </GoabFormItem>

      <GoabButtonGroup mt="xs" alignment="start">
        <GoabButton onClick={setValue}>
          Set Value
        </GoabButton>
        <GoabButton onClick={clearValue}>Clear Value</GoabButton>
      </GoabButtonGroup>

Allow users to programmatically set or clear a date picker field value, useful for reset functionality or setting default dates.

When to use

Use this pattern when:

Users need to clear a date field to start over
You need to set a default or suggested date value
Providing quick actions to modify date values
Building forms with reset functionality

Considerations

Provide clear button labels indicating the action
Consider whether clearing should also reset validation state
The date picker should update immediately when set or cleared
Consider providing a confirmation for clearing important dates