calendar-date-input v0.16.1

calendar-date-input

A controlled HTML5 date input with a calendar UI for desktop and native support for mobile.

Features

• Calendar date picker UI for date selection across all modern desktop browsers.
• Native mobile UX.
• Locale support.
• Max/min date support.
• Controlled React component.
• Composable components.

Note: Typing directly into the input is not supported - the intention of this component for the user to select a date by means of a calendar UI.

Demo

Check out the Storybook docs for working examples.

Quick Start

Install the package:

npm i calendar-date-input

Set up the component:

import CalendarDateInput from 'calendar-date-input';
import { useState } from 'react';

const Form = () => {
  const [value, setValue] = useState('');
  return (
    <CalendarDateInput
      name="field-name"
      onChange={setValue}
      value={value}
    />
  );
}

Composable usage:

You may want to customise the component styling, I recommend using emotion with the composable component structure (as demonstrated below).

Alternatively, you can also pass your own className(s) to each of the composable components for targeted styling.

import CalendarDateInput, {
  Calendar,
  CalendarArrow,
  CalendarTabs,
  DateInput,
  View,
  ViewBody,
  ViewHead,
  ViewWeekDays,
} from 'calendar-date-input';
import { useState } from 'react';


const Form = () => {
  const [value, setValue] = useState('');
  return (
    <CalendarDateInput
      name="CalendarDateInput"
      onChange={setValue}
      value={value}
      css={{...}}
    >
      <DateInput css={{...}} />
      <Calendar css={{...}}>
        <CalendarArrow css={{...}} />
        <CalendarTabs css={{...}} />
        <View css={{...}}>
          <ViewHead css={{...}} />
          <ViewBody css={{...}}>
            <ViewWeekDays css={{...}} />
          </ViewBody>
        </View>
      </Calendar>
    </CalendarDateInput>
  );
}

Required props

Optional props

Note: While any valid HTML attributes will be given to the input, be advised that some are set from within this component (e.g. placeholder).

Resources:

• Powered by React & date-fns.
• Mobile detection by isMobile.
• Styled with emotion.

License

MIT