react-period-of-stay-input

About

React.js component for entering a period of stay in a hotel: check-in day and check-out day. See the demo. In case when a native <input type="date"> implementation is not available, it's "polyfilled" with a jQuery UI datepicker (English only).

Installation

Made for Browserify.

npm install --save react-period-of-stay-input

Usage

See the code of the demo mentioned above. The polyfilling part is visible here.

Internationalization

react-intl-based. To translate the component, please pass the messages property, containing:

{
    'react-period-of-stay-input': {
        period: '{count, plural, =0 {Single day} =1 {1 night} other {# nights}}',
        checkInDay: 'Check-in day',
        checkOutDay: 'Check-out day'
    }
}

react-intl allows using react-period-of-stay-input uniformly in bigger applications, and passing all the namespaced translations, from the root, down the React components hierarchy, -- automatically, with the help of IntlMixin.

Please note, that react-intl depends on global Intl object. You can polyfill it with intl package:

if (!global.Intl) {
    require('intl');
}