@ks-rogers/react-date-picks

A date picker for your React app.

Pick days, months, years. No moment.js used.

Screenshots

Demo

Online demo is available here

OR

yarn
yarn start

Getting started

Compatibility

You need to use React 16 or later in project.

Installation

yarn add @ks-rogers/react-date-picks

Usage

import React, { useState } from 'react'
import DatePicker from '@ks-rogers/react-date-picks'
import dayjs from 'dayjs'

const Sample: React.FC = () => {
  const [value, setValue] = useState(dayjs().format())
  const handleChange = value => {
    setValue(value)
  }
  return (
  <DatePicker
    value={value}
    handleChange={handleChange}
    dateFormat="YYYY-M-DD"
    locale="ja"
    placeholder="year month picker"
  />
)

React.render(Sample, container)

With Formik

import React from 'react'
import dayjs from 'dayjs'
import DatePicker from '@ks-rogers/react-date-picks'
import { Formik, Field } from 'formik'

const Sample: React.FC = () => {
  return (
    <>
      <Formik
        initialValues={{ date: dayjs().format() }}
        onSubmit={(values, { setSubmitting }) => {
          setTimeout(() => {
            alert(JSON.stringify(values, null, 2))
            setSubmitting(false)
          }, 400)
        }}
      >
        {({ handleSubmit, isSubmitting }) => (
          <form onSubmit={handleSubmit}>
            <Field component={DatePickerWithFormik} required />
            <button type="submit" disabled={isSubmitting}>
              Submit
            </button>
          </form>
        )}
      </Formik>
    </>
  )
}

const DatePickerWithFormik = ({ form: { setFieldValue, values } }) => {
  return (
    <DatePicker
      value={values.date}
      placeholder="year month"
      yearMonthPicker={true}
      handleChange={date => {
        setFieldValue('date', date)
      }}
      locale="ja"
    />
  )
}

React.render(Sample, container)

Override styles

Each internal components is given an identifier and exposed as a target for overrides. When overriding style with overrides props, you can pass a style object.

The style object you return from this API is deep merged with the default component styles. Please refer to the code snippet below.

import React, { useState, Fragment } from 'react'
import DatePicker from '@ks-rogers/react-date-picks'
import dayjs from 'dayjs'

const ComponentsOptions = [
  'Root',
  'YearMonthHeader',
  'YearMonthBody',
  'MonthOptions',
  'YearMonthButton',
  'YearOptions',
  'DateField',
  'Label',
  'Divider',
  'DateFieldLabeled',
  'YearMonthOption',
  'SelectButton'
]

const Sample: React.FC = () => {
  const [value, setValue] = useState(dayjs().format())
  const [selectValue, setSelectValue] = useState('Root')
  const handleChange = (value: string) => {
    setValue(value)
  }
  const updateOperator = (value: string) => {
    setSelectValue(value)
  }
  return (
    <div>
      <h2>Component Override</h2>
      <div>
        {ComponentsOptions.map(data => {
          return (
            <Fragment key={data}>
              <label>{data}</label>
              <input
                type="radio"
                name="component"
                value={data}
                onChange={e => updateOperator(e.target.value)}
                checked={data === selectValue}
              />{' '}
              <br />
            </Fragment>
          )
        })}
      </div>

      <DatePicker
        value={value}
        handleChange={handleChange}
        yearMonthPicker={true}
        placeholder="year month"
        overrides={{
          [selectValue]: {
            style: { backgroundColor: '#F7BFA5', padding: '15px' }
          }
        }}
      />
    </div>
  )
}

React.render(Sample, container)

API

Props

name	type	description	default
yearMonthPicker	boolean	Whether the year month picker	false
handleChange	(target: string) => void	handleChange function	-
value	string	Input value	-
dateFormat	(optional) string	Input format based on Unicode Technical Standard. Supported values are: y, M, MM, MMM, MMMM, d, dd.	'YYYY-MM-DDTHH:mm:ssZ'
placeholder	string	Input placeholder	-
locale	(optional) string	IETF tag	'en-ca'
overrides	(optional) string	Styles for override	{}
disabled	(optional) boolean	Whether input is disabled or not	false

License

@ks-rogers/react-date-picks is available under the MIT license. See the LICENSE file for more info.