https://github.com/jfmdev/reactcombodatepicker

React component for select dates using combo boxes
https://github.com/jfmdev/reactcombodatepicker

datepicker javascript library react react-component react-library

Last synced: 2 months ago
JSON representation

React component for select dates using combo boxes

• Host: GitHub
• URL: https://github.com/jfmdev/reactcombodatepicker
• Owner: jfmdev
• License: mpl-2.0
• Created: 2016-11-19T21:48:46.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2017-05-06T00:21:36.000Z (over 7 years ago)
• Last Synced: 2024-11-07T17:58:22.646Z (3 months ago)
• Topics: datepicker, javascript, library, react, react-component, react-library
• Language: JavaScript
• Homepage:
• Size: 430 KB
• Stars: 4
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: license.txt

Awesome Lists containing this project

README

        
reactComboDatePicker

====================

_Select dates with combo boxes_

**reactComboDatePicker** is an React component to select dates using combo boxes.

[See the live demos and read the docs](http://jfmdev.github.io/reactComboDatePicker/ "reactComboDatePicker - Live demos and docs")

> Note that this project is a fork [ngComboDatePicker](https://github.com/jfmdev/ngComboDatePicker), an Angular implementation of this component.

Usage

-----

In order to use this component:

**1)** Include the library (located in the `dist` folder) in the header of your HTML files, after including React:

```html

```

**2)** Then use the component `ComboDatePicker` in your code:

```javascript

ReactDOM.render(

    ,

    document.getElementById('root')

);

```

Attributes

----------

The _reactComboDatePicker_ component supports the following attributes:

Name | Description

------------- | ----

`date`  | A Date object, a string or a number representing the initial date of the picker.

`minDate`  | A Date object, a string or a number representing the minimum date that can be picked. By default the minimum date is 100 years before the current day.

`maxDate`  | A Date object, a string or a number representing the maximum date that can be picked. By default the maximum date is the current day.

`months`  | A string (comma separated) or an array with the names of the twelve months. 

`order`  | A string with the characters "d", "m" and "y" indicating in which order the combo boxes must be displayed. By default, the combo boxes are displayed in the order "dmy".

`attrsDate`  | An object with HTML attributes to add to the `select` element for the date. 

`attrsMonth`  | An object with HTML attributes to add to the `select` element for the month. 

`attrsYear`  | An object with HTML attributes to add to the `select` element for the year. 

`yearOrder`  | A string indicating if the years must be sorted in "ascending" or "descending" order. 

`timezone`  | A number indicating timezone to be used when converting a string or an integer to a date. By default the timezone of the client is used. 

`placeholder`  | A string (comma separated) or an array with the placeholders for the year, month and date combo boxes (in that order). 

`onChange`  | A callback function invoked each time that the date, represented by the pickers, changes. 

Compilation

-----------

Since the project uses [JSX](https://facebook.github.io/react/docs/jsx-in-depth.html) and [ES6](http://es6-features.org/), you should use [Babel](https://babeljs.io/) to recompile the file `reactComboDatePicker.js` (from the `source` folder) every time you modify it, using the command: `babel source --out-dir dist`

License

-------

reactComboDatePicker is free software; you can redistribute it and/or

modify it under the terms of the Mozilla Public

License v2.0. You should have received a copy of the MPL 2.0 along with this library, otherwise you can obtain one at .