Package Exports

@idui/react-date-components
@idui/react-date-components/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@idui/react-date-components) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

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

function CalendarExample() {
  return <Calendar />
}

DatePicker

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

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

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

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

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

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

@idui/react-date-components