datepicker.addEventListener('dds-valid-date', e => {
  console.log('Valid Value:', e.detail)
  datepicker.feedback = 'valid'
  datepicker.status = 'valid'
  datepicker.feedbackType = 'positive'
})

datepicker.addEventListener('dds-invalid-date', e => {
  console.log('dds-invalid-date', event.detail.value)

  datepicker2.status = 'error'
  datepicker2.feedbackType = 'negative'

  if(event.detail.type === 'invalid') {
    datepicker2.feedback = 'Invalid date'
  }

  if(event.detail.type === 'out-of-range') {
    datepicker2.feedback = 'Date is out of range'
  }
})

datepicker.addEventListener('dds-change', e => {
  console.log('Value:', e.detail)
})

import { DapDSButtonReact, DapDSDatePickerReact } from 'dap-design-system/dist/react'
import { Controller, useForm } from 'react-hook-form';
import dayjs from 'dayjs'

function App() {
  const {
    control,
    handleSubmit,
    setValue,
    setError,
    formState: { errors },
  } = useForm()

  const onSubmit = (data: any) => {
    console.log('data', data)
  }
  
  return (
    <div className="App">
    <form onSubmit={handleSubmit(onSubmit)} noValidate>
      <Controller
        name="datepicker"
        control={control}
        render={({ field: { value } }) => (
          <DapDSDatePickerReact
            id="datepicker"
            label="Birth date"
            description="Your birth date"
            required
            name="textInput"
            value={value}
            feedback={errors?.datepicker?.message?.toString()}
            feedbackType={errors?.datepicker ? 'negative' : 'positive'}
            onDdsChange={(e) => {
              console.log(e)
              setValue('datepicker', e.detail.value, { shouldValidate: true })}
            }
            onDdsInvalidDate={(e) => {
              console.log(e)
              if (e.detail.type === 'invalid') {
                setError('datepicker',
                  { message: `Invalid date: ${dayjs.Ls[dayjs.locale()].formats.L}` })
              }

              if (e.detail.type === 'out-of-range') {
                setError('datepicker', { message: 'Date out of range' })
              }
            }}
            onDdsValidDate={(e) => {
              console.log(e)
              setError('datepicker', { message: '' })
            }}
          >
          </DapDSDatePickerReact>
        )}
        rules={{
          validate: {
            required: value => {
              if (!value) return '*Required'
            },
          },
        }}
      />
      <DapDSButtonReact htmlType="submit">Submit</DapDSButtonReact>
    </form>
    </div>
  );
}

export default App;