React Date Components

Advantages

• Easily customisable;
• uses styled-components
• supports custom renderers for almost all components
• validates any date format and does not require specifying validation
• guesses date format on paste

Install

npm install --save @idui/react-date-components

yarn add @idui/react-date-components

Calendar

• Docs
• Playground

import React from 'react'
import { Calendar } from '@idui/react-date-components'

function CalendarExample() {
  return <Calendar />
}

DatePicker

• Docs
• Playground

import React, { useState } from 'react'
import { DatePicker } from '@idui/react-date-components'

function DatePickerExample(props) {
    const [value, setValue] = useState();

    return <DatePicker {...props} value={value} onChange={setValue} />;
}

DateInput

• Docs
• Playground

import React, { useState } from 'react'
import { DateInput } from '@idui/react-date-components'

function DateInputExample(props) {
    const [value, setValue] = useState();

    return <DateInput {...props} value={value} onChange={setValue} />;
}

DateRangePicker

• Docs
• Playground

import React, { useState } from 'react'
import { DateRangePicker } from '@idui/react-date-components'

function DateRangePickerExample(props) {
    const [value, setValue] = useState();

    return <DateRangePicker {...props} value={value} onChange={setValue} />;
}

DateRangeInput

• Docs
• Playground

import React, { useState } from 'react'
import { DateRangeInput } from '@idui/react-date-components'

function DateRangeInputExample(props) {
    const [value, setValue] = useState();

    return <DateRangeInput {...props} value={value} onChange={setValue} />;
}

TimePicker

• Docs
• Playground

import React, { useState } from 'react'
import { TimePicker } from '@idui/react-date-components'

function TimePickerExample(props) {
    const [value, setValue] = useState();

    return <TimePicker {...props} value={value} onChange={setValue} />;
}

TimeInput

• Docs
• Playground

import React, { useState } from 'react'
import { TimeInput } from '@idui/react-date-components'

function TimeInputExample(props) {
    const [value, setValue] = useState();

    return <TimeInput {...props} value={value} onChange={setValue} />;
}

Custom renderers

• You can provide custom renderers renderHeader, renderWeek, renderDay to every date component
• You can provide custom renderer renderOption to every time component
• Read more in storybook docs

License

MIT © [email protected]