<commit_before># react-day-picker

A minimalistic date picker built for [React](facebook.github.io/react/) and [moment.js](http://www.momentjs.com). Supports CSS modifiers, touch and keyboard events.

See a [live version](http://www.gpbl.org/react-day-picker/) of the [example app](example), which makes the component working together with a `<input>` field.

```bash
npm install 'react-day-picker' --save
```

### Usage example

```js

var DayPicker = require('react-day-picker');
var moment = require('moment');

function isSameDay(a, b) {
  return a.startOf('day').isSame(b.startOf('day'));
}

var MyDatePicker = React.createClass({
  handleDayTouchTap(day, modifiers, event) {
    if (modifiers.indexOf('disabled') === -1)
      alert('You tapped ' + day.format());
  },
  render() {
    var modifiers = {
      today: function (day) {
        // Add --today CSS modifier for the current day
        return isSameDay(moment(), day);
      }
    };
    return (
        <DayPicker 
          initialMonth={ moment() } 
          modifiers={ modifiers } 
          onDayTouchTap={this.handleDayTouchTap} />
    );
  }
});

React.render(<MyDatePicker/>, document.body);

```

### Run the example app

```bash
git clone https://github.com/gpbl/react-day-picker.git
cd react-day-picker
npm install
npm run example
```

...then open [http://localhost:8080](http://localhost:8080).

## Styling

A basic inline style is included in the component to create the calendar layout, but you likely need to setup your own CSS. 

See [this css example](example/main.css): the daypicker selectors begins with `.daypicker`.

## API

#### initialMonth `moment object`

A `moment()` date object with the month to display in the calendar.

#### modifiers `Object`

CSS modifiers are useful to customize the aspect of a day element. You pass an object whose keys are used as CSS class for each day. The key's values are functions being evaluated when rendering a day element: if the function returns `true` (or a truthy value), the modifier is added to the day cell as `daypicker__day--<modifier>` className.

For example, the following modifiers:

```js
modifiers = {
  disabled: function (day) {
    return day.diff(moment(), 'day') < 0;
  },
  all: function (day) {
    return true;
  }
}
```

will add the CSS class `daypicker__day--disabled` to the days of the past, and the `daypicker__day--all` CSS class to all the days (since it returns always `true`).

#### onDayTouchTap `function(day, modifiers, event)`

Use this attribute to add an handler when the user touches a day. 

> To make the touch tap events working, you **must** inject [react-tap-event-plugin](https://github.com/zilverline/react-tap-event-plugin) client side.


#### onDayMouseEnter `function(day, modifiers, event)`

Use this attribute to add an handler when the mouse enters a day element. 

#### onDayMouseLeave `function(day, modifiers, event)`

Use this attribute to add an handler when the mouse leaves a day element. <commit_msg>Better docs<commit_after># react-day-picker

A minimalistic date picker built for [React](facebook.github.io/react/) and [moment.js](http://www.momentjs.com). 

See [demo](http://www.gpbl.org/react-day-picker/).

```bash
npm install 'react-day-picker' --save
```

### Modifiers instead of selected days

This date picker does not have the concept of a *selected date*: instead, you specify *day modifiers*, i.e. strings that classify the aspect and the behaviour for each day in the calendar. 

A modifier is appended to the day cell's CSS class – for example, a `disabled` modifier could make it appearing as disabled, or a `selected` modifier could highlight a range of selected days.

See a [live version](http://www.gpbl.org/react-day-picker/) of the [example app](example), where the the component works together with an `<input>` field. There, the past days are marked as disabled and are not selectable, and the current day is made red.

## Usage example

The following component saves the selected day in its state. It also adds the `daypicker__day--today` CSS modifier to the day cell corresponding to the current day, and the 
`daypicker__day--selected` CSS modifier to the cell corresponding to the selected day.

```js

var DayPicker = require('react-day-picker');
var moment = require('moment');

function isSameDay(a, b) {
  return a.startOf('day').isSame(b.startOf('day'));
}

var MyDatePicker = React.createClass({
  
  handleDayTouchTap(day, modifiers, event) {
    this.setState({ selectedDay: day });
  },

  render() {
    var modifiers = {
      today: function (day) {
        // add the `today` modifier for the current day
        return isSameDay(moment(), day);
      },
      selected: function (day) {
        // add the `selected` modifier for the selected day
        return this.state.selectedDay 
          && isSameDay(this.state.selectedDay, day);
      }
    };
    return (
      <DayPicker modifiers={ modifiers } 
        onDayTouchTap={this.handleDayTouchTap} />
    );
  }
});

React.render(<MyDatePicker/>, document.body);

```

### Run the example app

```bash
git clone https://github.com/gpbl/react-day-picker.git
cd react-day-picker
npm install
npm run example
```

...then open [http://localhost:8080](http://localhost:8080).

## Styling

You need to setup your own CSS. See [this css](example/main.css) as example: the daypicker selectors begins with `.daypicker`.

## API

#### initialMonth `moment object`

A `moment()` date object with the month to display in the calendar.

#### modifiers `Object`

* The keys of this object are used as modifier for each day, using class names folowing a BEM-like syntax: `daypicker__day--<modifier>`
* The key's values are functions being evaluated for each day in the calendar, when they returns `true`, the modifier is added and passed to the `onDayTouchTap` payload.

For example, the following modifiers will add the CSS class `daypicker__day--disabled` to the days of the past:

```js
modifiers = {
  disabled: function (day) {
    return day.diff(moment(), 'day') < 0;
  }
}
```

#### onDayClick `function(day, modifiers, event)`
#### onDayTouchTap `function(day, modifiers, event)`

Use one of these attributes to add an event handler when the user touches/clicks a day. 

* `day <Object>` the touched day (a moment object)
* `modifiers <Array>` array of modifiers for the touched day, e.g. `['disabled', 'today']`
* `event <SyntheticEvent>` the original touch event

> To make the touch tap events working, you **must** inject [react-tap-event-plugin](https://github.com/zilverline/react-tap-event-plugin) client side. It works better then the click event on mobile.

#### onDayMouseEnter `function(day, modifiers, event)`

Use this attribute to add an handler when the mouse enters a day element. 

#### onDayMouseLeave `function(day, modifiers, event)`

Use this attribute to add an handler when the mouse leaves a day element. 
{'fraction_non_alphanumeric': 0.11981500216794334, 'fraction_numerical': 0.0027460615695909813, 'mean_word_length': 3.8629655657062543, 'pattern_counts': {'":': 0, '<': 16, '<?xml version=': 0, '>': 16, 'https://': 4, 'lorem ipsum': 0, 'www.': 5, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6375922', 'n_tokens_mistral': 2087, 'n_tokens_neox': 1994, 'n_words': 795}