rc-datepicker v5.0.17
React Datepicker
A decent and pretty date picker to be used with React
import 'moment/locale/it.js';
import { DatePicker, DatePickerInput } from 'rc-datepicker';
const date = '2015-06-26' // or Date or Moment.js
onChange = (jsDate, dateString) => {
// ...
}
React.renderComponent(
<div>
// this renders the full component (input and datepicker)
<DatePickerInput
onChange={onChange}
value={date}
className='my-custom-datepicker-component'
{...anyReactInputProps}
/>
// this renders only a fixed datepicker
<DatePicker onChange={onChange} value={date} />
</div>,
document.body
);
You can see a live demo here
or check the full examples here
FOR WEBPACK USERS: webpack by default imports every locale. Please take a look at this question on Stack Overflow for possible solutions.
Install
npm install --save rc-datepicker
The npm package is compiled in JavaScript 5
Changelog
See CHANGELOG.md
DatePickerInput API
See this readme
Locales
DatePicker
and DatePickerInput
use Moment.js, therefore they support any locale inside "moment/locale".
To select a locale you need to require it before requiring the datepicker or moment anywhere in your app: this way it will be automatically selected as current locale.
import 'moment/locale/fr.js' // or 'rc-datepicker/node_modules/moment/locale/fr.js' if you don't have it in your node_modules folder
import { DatePickerInput } from 'rc-datepicker';
DatePickerInput
will now use French locale by default.
Switch between locales
You can switch between locales by passing the prop "locale" to DatePickerInput
or DatePicker
.
WATCH OUT this method requires the wanted locale to be already available in your bundle which is only true if you had already imported it or if you're using moment-with-locales.min.js
import 'moment/locale/fr.js'
import 'moment/locale/es.js'
<DatePicker locale='es' />
Style
DatePickerInput
and DatePicker
come with their own default style. In order to use it you should import it in your project as follows:
import 'rc-datepicker/lib/style.css';
Examples
$ npm install
$ npm start
$ open http://localhost:8080
12 months ago
5 years ago
6 years ago
6 years ago
7 years ago
7 years ago
7 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago