Smalldots React Datepicker

Datepicker component for React

Important

This is not a Datepicker Input component. It's just a Datepicker.

For the DatePicker Input component please refer to <coming soon: DatepickerInput>.

Requirements

Smalldots React Datepicker is a plugin for React and Moment.js.

That means that Smalldots React Datepicker doesn't install React or Moment.js, you need to install both in your project.

Styling

1. Every instance has a smalldots-react-datepicker class so you can it use to apply your custom CSS
2. You can pass a className property and define your own classes, so you can style with Foundation, Semantic UI or any other CSS framework (smalldots-react-datepicker class will be removed in this case)
3. You can pass a style property, it works the same as any React component style property
4. There is a maxWidth property, you can use it with any of the options above, just pass a number (pixels)

Custom Rendering

renderWeekDay

Use it to define your own weekday render.

function renderWeekDay(weekday) {
  return <strong>{weekday}</strong>
}

<Datepicker renderWeekDay={renderWeekDay} />

renderDay

Use it to define your own day render.

function renderDay(day, isSelected, isToday) {
  if (isSelected) {
    return <span className="label label-primary">{day}</span>
  }
  if (isToday) {
    return <span className="label label-default">{day}</span>
  }
  return day
}

<Datepicker renderDay={renderDay} />

Events

onDayClick

Dispatched when the user clicks in a day. It receives the a string date (YYYY-MM-DD) and a boolean isToday.

function onDayClick(date, isToday) {
  console.log(date, isToday)
}

<Datepicker onDayClick={onDayClick} />

Localization

Smalldots React Datepicker is a Moment.js plugin, so localization is straightforward:

import React from 'react'
import { render } from 'react-dom'
import moment from 'moment'
import App from './App'

// You should do it on your main project file, before ReactDOM.render()
// If you locale is english you don't need to do anything
moment.locale('pt-br')

render(<App />)

Installation

npm install --save @smalldots/react-datepicker

Recommended Usage

Instead using it directly we recommend that you create a wrapper. That way if in the future you need to implement custom rendering or custom styles, you only need to do it in one place.

import React from 'react'
import ReactDatepicker from '@smalldots/react-datepicker'

export default function Datepicker(props) {
  return <ReactDatepicker {...props} />
}

API

Datepicker.propTypes = {
  className: PropTypes.string,
  date: (props, propName) => {
    if (!/^[0-9]{4}-[0-9]{2}-[0-9]{2}$/.test(props[propName])) {
      return new Error('Invalid date');
    }
  },
  maxWidth: PropTypes.number,
  renderWeekday: PropTypes.func,
  renderDay: PropTypes.func,
  style: PropTypes.object,
  onDayClick: PropTypes.func
}

Datepicker.defaultProps = {
  className: 'smalldots-react-datepicker table table-condensed table-striped text-center',
  date: moment().format('YYYY-MM-DD'),
  maxWidth: 300,
  renderWeekday: weekday => weekday,
  renderDay: (day, isSelected, isToday) => {
    if (isSelected) {
      return <span className="badge">{day}</span>
    }
    if (isToday) {
      return <strong>{day}</strong>
    }
    return day
  }
}