Customization

import { DtPicker, dayToString } from 'react-calendar-datetime-picker'
import React, { useState } from 'react'

function App() {
  const [date, setDate] = useState(null)

  return (
    <DtPicker
      calendarSystem="gregorian"
      onChange={setDate}
      triggerElement={
        <input
          type="text"
          placeholder="Select a date..."
          value={date ? dayToString(date, '/') : ''}
          readOnly
          style={{
            padding: '12px 16px',
            border: '2px solid #28a745',
            borderRadius: '20px',
            fontSize: '16px',
            width: '280px',
            outline: 'none',
            backgroundColor: '#f8fff9',
            color: '#155724',
            fontWeight: '500'
          }}
        />
      }
    />
  )
}

import { DtPicker, parseAndValidateDate } from 'react-calendar-datetime-picker'
import React, { useState, useCallback } from 'react'
import type { Day } from 'react-calendar-datetime-picker'

function InputWithIconTrigger({ onChange, ...props }) {
  const [selectedDate, setSelectedDate] = useState<Day | null>(null)
  const [inputValue, setInputValue] = useState<string>('')

  // Check if input value is valid and get validation result
  const validationResult = inputValue
    ? parseAndValidateDate(inputValue, 'gregorian')
    : null
  const isValid = validationResult?.success ?? null
  const errorMessage = validationResult?.success === false ? validationResult.error?.message : null

  // Handle input change - parse and validate
  const handleInputChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
      const value = e.target.value
      setInputValue(value)

      // Parse and validate the date string
      const validation = parseAndValidateDate(value, 'gregorian')
      if (validation.success && validation.data) {
        setSelectedDate(validation.data)
        onChange?.(validation.data)
      }
    },
    [onChange]
  )

  // Handle calendar selection
  const handleCalendarChange = useCallback(
    (date: Day | null, _jsDate: Date | null, formattedString: string | null) => {
      setSelectedDate(date)
      setInputValue(formattedString || '')
      onChange?.(date) //or _jsDate
    },
    [onChange]
  )

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', width: '100%', maxWidth: '300px' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: '8px', width: '100%' }}>
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
          <input
            type="text"
            placeholder="Type date (YYYY/MM/DD) or click icon"
            value={inputValue}
            onChange={handleInputChange}
            style={{
              width: '100%',
              minWidth: 0,
              padding: '10px 12px',
              border: '2px solid',
              borderRadius: '6px',
              fontSize: '14px',
              outline: 'none',
              backgroundColor: '#ffffff',
              color: '#111827',
              borderColor: isValid === true ? '#10b981' : isValid === false ? '#ef4444' : '#d1d5db'
            }}
          />
          {errorMessage && (
            <div style={{ marginTop: '4px', fontSize: '12px', color: '#ef4444', paddingLeft: '4px' }}>
              {errorMessage}
            </div>
          )}
        </div>
        <div style={{ flexShrink: 0 }}>
          <DtPicker
            calendarSystem="gregorian"
            initValue={selectedDate}
            onChange={handleCalendarChange}
            triggerElement={
              <button
                type="button"
                style={{
                  padding: '10px',
                  border: 'none',
                  borderRadius: '6px',
                  backgroundColor: '#3b82f6',
                  color: 'white',
                  cursor: 'pointer',
                  fontSize: '18px',
                  minWidth: '40px',
                  height: '40px',
                  flexShrink: 0
                }}
                aria-label="Open calendar"
              >
                📅
              </button>
            }
          />
        </div>
      </div>
    </div>
  )
}

import { DtPicker, dayToString } from 'react-calendar-datetime-picker'
import { useForm, Controller } from 'react-hook-form'
import React from 'react'

function App() {
  const { control, handleSubmit } = useForm({
    defaultValues: {
      birthDate: null
    }
  })

  const onSubmit = (data) => {
    console.log('Form data:', data)
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="birthDate"
        control={control}
        render={({ field }) => (
          <DtPicker
            calendarSystem="gregorian"
            initValue={field.value}
            onChange={(date) => {
              field.onChange(date)
              field.onBlur() // Trigger validation on change
            }}
            triggerElement={
              <input
                type="text"
                placeholder="Select your birth date..."
                value={field.value ? dayToString(field.value, '/') : ''}
                readOnly
                style={{
                  padding: '12px 16px',
                  border: '2px solid #6366f1',
                  borderRadius: '8px',
                  fontSize: '16px',
                  width: '100%',
                  outline: 'none',
                  backgroundColor: '#f8f9ff',
                  color: '#1e1b4b',
                  fontWeight: '500'
                }}
              />
            }
          />
        )}
      />
      <button type="submit">Submit</button>
    </form>
  )
}