Date Picker

Component to render date picker.

Usage

The Date Picker component can be imported using

import { DatePicker } from '@tail-kit/tail-kit'

Default Date Picker

<DatePicker className="w-64" allowClear />

<DatePicker className="w-64" allowClear />

Controlled Date Picker

function ControlledDatePicker() {
  const [dateSelected, setDateSelected] = React.useState(undefined)
  return (
    <div className="flex items-center space-x-4">
      <DatePicker
        className="w-64"
        allowClear
        date={dateSelected}
        onChange={setDateSelected}
      />
      {dateSelected ? (
        <div>
          <div className="text-xs font-medium text-blue-500">Date Selected</div>
          <div className="text-sm txt-gray-800">
            {dayjs(dateSelected).format('DD-MM-YYYY')}
          </div>
        </div>
      ) : null}
    </div>
  )
}

function ControlledDatePicker() {
  const [dateSelected, setDateSelected] = React.useState(undefined)
  return (
    <div className="flex items-center space-x-4">
      <DatePicker
        className="w-64"
        allowClear
        date={dateSelected}
        onChange={setDateSelected}
      />
      {dateSelected ? (
        <div>
          <div className="text-xs font-medium text-blue-500">Date Selected</div>
          <div className="text-sm txt-gray-800">
            {dayjs(dateSelected).format('DD-MM-YYYY')}
          </div>
        </div>
      ) : null}
    </div>
  )
}

Date Picker with Date Range

The following example shows a Date Picker with a date range. User is only allowed to select a date within 10 days from the current date.

function DatePickerWithDateRange() {
  const delta = 10
  return (
    <DatePicker
      className="w-64"
      allowClear
      startDate={dayjs().subtract(delta, 'day').toDate()}
      endDate={dayjs().add(delta, 'day').toDate()}
    />
  )
}

function DatePickerWithDateRange() {
  const delta = 10
  return (
    <DatePicker
      className="w-64"
      allowClear
      startDate={dayjs().subtract(delta, 'day').toDate()}
      endDate={dayjs().add(delta, 'day').toDate()}
    />
  )
}

Weekdays Only Date Picker

<DatePicker
  className="w-64"
  allowClear
  placeholder="Select Week Day"
  disableDate={(date) => {
    const day = dayjs(date).day()
    return day === 6 || day === 0
  }}
/>

<DatePicker
  className="w-64"
  allowClear
  placeholder="Select Week Day"
  disableDate={(date) => {
    const day = dayjs(date).day()
    return day === 6 || day === 0
  }}
/>

function DatePickerWithModal() {
  const [modalVisible, setModalVisible] = React.useState(false)
  return (
    <>
      <Button onClick={() => setModalVisible(true)}>Click To Open Modal</Button>
      <Modal
        visible={modalVisible}
        onRequestClose={() => setModalVisible(false)}
        title="Cron Job"
        closable
      >
        <Alert
          title="Job Runner"
          content="Schedule the job in a weekday as you won't want to spend your weekend on debugging"
          className="mb-4"
        />
        <div className="flex space-x-4">
          <Select
            placeholder="Select Schedule"
            options={[
              {
                label: 'Every Minute (* * * * *)',
                value: '* * * * *',
              },
              {
                label: 'Every 15 minutes (*/15 * * * *)',
                value: '*/15 * * * *',
              },
              {
                label: 'Every Hour (0 * * * *)',
                value: '0 * * * *',
              },
              {
                label: 'Every 2 Hours (0 */2 * * *)',
                value: '0 */2 * * *',
              },
            ]}
            className="flex-1"
          />
          <DatePicker
            allowClear
            className="flex-1"
            placeholder="Select Day"
            disableDate={(date) => {
              const day = dayjs(date).day()
              return day === 6 || day === 0
            }}
          />
        </div>
      </Modal>
    </>
  )
}

function DatePickerWithModal() {
  const [modalVisible, setModalVisible] = React.useState(false)
  return (
    <>
      <Button onClick={() => setModalVisible(true)}>Click To Open Modal</Button>
      <Modal
        visible={modalVisible}
        onRequestClose={() => setModalVisible(false)}
        title="Cron Job"
        closable
      >
        <Alert
          title="Job Runner"
          content="Schedule the job in a weekday as you won't want to spend your weekend on debugging"
          className="mb-4"
        />
        <div className="flex space-x-4">
          <Select
            placeholder="Select Schedule"
            options={[
              {
                label: 'Every Minute (* * * * *)',
                value: '* * * * *',
              },
              {
                label: 'Every 15 minutes (*/15 * * * *)',
                value: '*/15 * * * *',
              },
              {
                label: 'Every Hour (0 * * * *)',
                value: '0 * * * *',
              },
              {
                label: 'Every 2 Hours (0 */2 * * *)',
                value: '0 */2 * * *',
              },
            ]}
            className="flex-1"
          />
          <DatePicker
            allowClear
            className="flex-1"
            placeholder="Select Day"
            disableDate={(date) => {
              const day = dayjs(date).day()
              return day === 6 || day === 0
            }}
          />
        </div>
      </Modal>
    </>
  )
}

Date Picker Props

Name	Description	Default Value
defaultDate	Default date selected. It can used to set a default date when using the date picker as uncontrolled component `Date \| undefined`	--
date	Date selected. It should be used along with `onChange` prop to set the date when using date picker as controlled component `Date \| undefined`	--
onChange	Callback function called when the date is changed. `OnChangeType \| undefined`	--
placeholder	Placeholder for empty date picker `string \| undefined`	`Select Date`
allowClear	Show clear button when a date is selected `boolean \| undefined`	--
startDate	Start date for the date picker. All the dates before the start date would be disabled `Date \| undefined`	--
endDate	End date for the date picker All the dates after the end date would be disabled `Date \| undefined`	--
disableDate	Function to determine whether a particular date should be disabled or not It is helpful in the cases where we want to disable dates based on a custom logic rather than range values specfied by `startDate` and `endDate` prop `((date: Date) => boolean) \| undefined`	--
className	Addtional classes to style date picker `string \| undefined`	--
style	Additional styles for date picker `CSSProperties \| undefined`	--