npm package: @smalldots/react-datepicker
Description: Datepicker component for React
Latest version: 2.0.1
Deprecated: Datepicker was replaced with combinePickers

# Smalldots React Datepicker

Datepicker component for React

[![npm version](https://badge.fury.io/js/%40smalldots%2Freact-datepicker.svg)](https://badge.fury.io/js/%40smalldots%2Freact-datepicker)

![Preview](https://cloud.githubusercontent.com/assets/1625399/14056789/73167282-f2cf-11e5-95dc-163c183261bd.png)

## 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](https://facebook.github.io/react) and [Moment.js](http://momentjs.com).

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.

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

<Datepicker renderWeekDay={renderWeekDay} />
```

### `renderDay`

Use it to define your own day render.

```jsx
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`.

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

<Datepicker onDayClick={onDayClick} />
```

### Localization

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

```jsx
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

```sh
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.

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

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

## API

```jsx
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
  }
}
```