DateRangeField usage in forms

[ochrstn]

Description

The usage of the DateRangeField inside of a form should be as easy and feature complete as any of the other build-in fields

This includes showing the error border highlighting on the field in addition to the validation message and also respecting props like isDisabled.

Link to Reproduction

https://codesandbox.io/p/sandbox/ecstatic-feistel-v7rt4g

Steps to reproduce

No response

Saas UI Version

2.8.3

Chakra UI Version

No response

Browser

No response

Operating System

• [ ] macOS
• [ ] Windows
• [ ] Linux

Additional Information

No response

[linear[bot]]

SUI-483 DateRangeField usage in forms

[Pagebakers]

Thanks for reporting @ochrstn , i don't seem to have access to the code sandbox.

[ochrstn]

https://codesandbox.io/p/sandbox/ecstatic-feistel-v7rt4g

Sorry, sandbox should be public now.

[Pagebakers]

Thanks!

I got another request for support of isInvalid and invalid styles, I'll investigate.

Here is an example with DateInput that might be useful.

import { forwardRef } from '@chakra-ui/react'
import {
  DateInput,
  DateInputProps,
  DateValue,
  parseDate,
} from '@saas-ui/date-picker'
import { createField } from '@saas-ui/forms'

interface DateFieldProps extends Omit<DateInputProps, 'value' | 'onChange'> {
  value?: string
  onChange?: (value: string) => void
}

const DateField = createField(
  forwardRef<DateFieldProps, 'input'>((props, ref) => {
    const { value: valueProp, onChange: onChangeProp, ...rest } = props

    const value =
      typeof valueProp === 'string' && valueProp !== ''
        ? parseDate(valueProp)
        : valueProp === ''
          ? undefined
          : valueProp

    const onChange = (value: DateValue | null) => {
      onChangeProp?.(value?.toString() || '')
    }

    return <DateInput ref={ref} value={value} onChange={onChange} {...rest} />
  }),
  {
    isControlled: true,
  },
)