DateRangePicker

import { DateRangePicker } from '@incmix/calendar'

function dateRangePickerExample() {
  const [state, setState] = useState([
    {
      startDate: new Date(),
      endDate: new Date(),
      key: 'selection',
    },
  ])

  return (
    <DateRangePicker
      onChange={item => setState([item.selection])}
      moveRangeOnFirstSelection={false}
      months={1}
      ranges={state}
      direction="horizontal"
    />
  )
}

function dateRangePickerExample() {
  const [state, setState] = useState([
    {
      startDate: new Date(),
      endDate: new Date(),
      key: 'selection',
    },
  ])

  return (
    <DateRangePicker
      onChange={item => setState([item.selection])}
      moveRangeOnFirstSelection={false}
      months={2}
      ranges={state}
      direction="horizontal"
    />
  )
}

import dayjs from 'dayjs'

function dateRangePickerExample() {
  const [state, setState] = useState([
    {
      startDate: new Date(),
      endDate: new Date(),
      key: 'selection',
    },
  ])

  return (
    <DateRangePicker
      onChange={item => setState([item.selection])}
      months={1}
      minDate={dayjs(new Date()).add(-300, 'day').toDate()}
      maxDate={days(new Date()).add(900, 'day').toDate()}
      direction="vertical"
      scroll={{ enabled: true }}
      ranges={state}
    />
  )
}

import dayjs from "dayjs";

function dateRangePickerExample() {
  const [state, setState] = useState({
    selection1: {
      startDate: dayjs(new Date()).add(1, "day").toDate(),
      endDate: null,
      key: 'selection1'
    },
    selection2: {
      startDate: dayjs(new Date()).add(4, "day").toDate(),
      endDate: dayjs(new Date()).add(8, "day").toDate(),
      key: 'selection2'
    },
    selection3: {
      startDate: dayjs(new Date()).add(8, "day").toDate(),
      endDate: dayjs(new Date()).add(1, "day").toDate()),
      key: 'selection3',
      autoFocus: false
    }
  });

  return(
    <DateRangePicker
      onChange={item => setState({ ...state, ...item })}
      months={1}
      minDate={dayjs(new Date()).add(-300, "day").toDate()}
      maxDate={dayjs(new Date()).add(900, "day").toDate()}
      direction="vertical"
      scroll={{ enabled: true }}
      ranges={[state.selection1, state.selection2, state.selection3]}
    />
  )
}

import dayjs from "dayjs";

function dateRangePickerExample() {
  const [state, setState] = useState({
    selection1: {
      startDate: dayjs(new Date()).add(1, "day").toDate(),
      endDate: null,
      key: 'selection1'
    },
    selection2: {
      startDate: dayjs(new Date()).add(4, "day").toDate(),
      endDate: dayjs(new Date()).add(8, "day").toDate(),
      key: 'selection2'
    }
  });

  <DateRangePicker
    onChange={item => setState({ ...state, ...item })}
    months={1}
    minDate={dayjs(new Date()).add(-300, "day").toDate()}
    maxDate={dayjs(new Date()).add(900, "day").toDate()}
    direction="vertical"
    scroll={{ enabled: true }}
    ranges={[state.selection1, state.selection2]}
    ariaLabels={{
      dateInput: {
        selection1: {
                      startDate: "start date input of selction 1",
                      endDate: "end date input of selction 1"
        },
        selection2: {
                      startDate: "start date input of selction 2",
                      endDate: "end date input of selction 2"
        }
      },
      monthPicker: "month picker",
      yearPicker: "year picker",
      prevButton: "previous month button",
      nextButton: "next month button",
    }}
  />
  )
}

import dayjs from 'dayjs'

function dateRangePickerExample() {
  const [state, setState] = useState({
    selection1: {
      startDate: dayjs(new Date()).add(1, 'day').toDate(),
      endDate: null,
      key: 'selection1',
    },
    selection2: {
      startDate: dayjs(new Date()).add(4, 'day').toDate(),
      endDate: dayjs(new Date()).add(8, 'day').toDate(),
      key: 'selection2',
    },
  })

  function customDayContent(day) {
    let extraDot = null

    if (dayjs(day).day() > 4) {
      extraDot = (
        <div
          style={{
            height: '5px',
            width: '5px',
            borderRadius: '100%',
            background: 'orange',
            position: 'absolute',
            top: 2,
            right: 2,
          }}
        />
      )
    }
    return (
      <div>
        {extraDot}
        <span>{dayjs(day).format('D')}</span>
      </div>
    )
  }

  return (
    <DateRangePicker
      onChange={item => setState({ ...state, ...item })}
      months={1}
      minDate={dayjs(new Date()).add(-300, 'day').toDate()}
      maxDate={dayjs(new Date()).add(900, 'day').toDate()}
      direction="vertical"
      scroll={{ enabled: true }}
      ranges={[state.selection1, state.selection2]}
      dayContentRenderer={customDayContent}
    />
  )
}