react-datetime-bootstrap

Summary

This package is a rework of an existing React Datetime picker. Some changes:

1. Updated to latest React environment.
2. moment compatible datetime (or moment object) as input (optionally undefined for today's date)
3. Provide a property that allows you to specify any or all underlying bootstrap-datetimepicker options
4. ISO 8601 datetime output via onChange property.
5. Also, can get the moment object, input text via second parameters of onChange

For development, using React NPM Boilerplate. See below.

Notes

This is a React wrapper surrounding bootstrap-datetimepicker This package depends on jQuery, since the underlying date-time picker is built on jQuery. pickerOptions are simply passed to that underlying date-time picker.

Usage

Installation

Using npm:

$ npm install --save react-datetime-bootstrap

This depends on Bootstrap css, so:

$ npm install --save bootstrap

Date and Time

Since date time is a complex topic, this package takes a momentjs compatible formatted datetime and outputs an ISO 8601 formatted datetime. It uses momentjs to handle date time.

Example usage:

Somewhere in your app, you will need to import bootstrap css. For example, add the following to the top of App.css

@import "../node_modules/bootstrap/dist/css/bootstrap.css";

Bootstrap also provides sass or less files, so import as appropriate.

import { DateTime } from 'react-datetime-bootstrap';
 
export default const MyRenderer = (props) => (
    <div>
        <h4>Minimum Usage to pick today date</h4>
        <DateTime />
        <h4>Provide a value</h4>
        <DateTime value="2017-04-20"/>
        <h4>Format (See momentjs for available formats)</h4>
        <DateTime pickerOptions={{format:"LL"}} value="2017-04-20"/>
        <h4>Time Only</h4>
        <DateTime pickerOptions={{format:"LTS"}}/>
    </div>
);

Props:

placeholder:

• Type: string.
• isRequired: ✘
• DefaultValue: undefined
• Description: The simple placeholder input.

bsStyle:

• Type: string.
• isRequired: ✘
• DefaultValue: ''
• Description: Set the validation color, accept: success, error, warning.

disabled:

• Type: boolean.
• isRequired: ✘
• DefaultValue: false
• Description: It disabled the input field.

pickerOptions:

• Type: object.
• isRequired: ✘
• DefaultValue: object containing the following options. Your overrides here will be merged with default values below.
• Description: Options used by underlying Datetime picker

pickerOptions Defaults:

pickerOptions.locale:

• Type: string.
• isRequired: ✘
• DefaultValue: en
• Description: Translate the calendar e.g.: 'it', 'en', 'ru', ... .

pickerOptions.format:

• Type: string.
• isRequired: ✘
• DefaultValue: moment().format()
• Description: Set the format date view e.g: D/M/YYYY.

pickerOptions.minDate:

• Type: arrayOf(string) or object.
• isRequired: ✘
• DefaultValue: undefined
• Description: Set the minDate start in the calendar, accept: moment() or new Date().

pickerOptions.maxDate:

• Type: arrayOf(string) or object.
• isRequired: ✘
• DefaultValue: undefined
• Description: Set the minDate start in the calendar, accept: moment() or new Date().

pickerOptions.disabledDates:

• Type: arrayOf(string) or object.
• isRequired: ✘
• DefaultValue: undefined
• Description: Disable the dates.

pickerOptions.daysOfWeekDisabled:

• Type: array.
• isRequired: ✘
• DefaultValue: undefined
• Description: Disable a single day in the week, e.g: [0,6].

pickerOptions.viewMode:

• Type: string.
• isRequired: ✘
• DefaultValue: days
• Description: Set the viewMode of the calendar, accept: decades, years, months.

pickerOptions.allowInputToggle:

• Type: boolean.
• isRequired: ✘
• DefaultValue: false
• Description: It'll show the datetimepicker on the textbox focus. If the icon is empty then it's set true.

pickerOptions.calendarWeeks:

• Type: boolean.
• isRequired: ✘
• DefaultValue: false
• Description: It shows the week of the year to the left of first day of the week.

pickerOptions.toolbarPlacement:

• Type: boolean.
• isRequired: ✘
• DefaultValue: false
• Description: It changes the placement of the icon toolbar.

pickerOptions.tooltips:

• Type: object.
• isRequired: ✘.
• DefaultValue:

{
    today: 'Go to today',
    clear: 'Clear selection',
    close: 'Close the picker',
    selectMonth: 'Select Month',
    prevMonth: 'Previous Month',
    nextMonth: 'Next Month',
    selectYear: 'Select Year',
    prevYear: 'Previous Year',
    nextYear: 'Next Year',
    selectDecade: 'Select Decade',
    prevDecade: 'Previous Decade',
    nextDecade: 'Next Decade',
    prevCentury: 'Previous Century',
    nextCentury: 'Next Century'
}

• Description: This will change the tooltips over each icon to a custom string.

Developer Notes

Boilerplate for creating React Npm packages with ES2015

The package is based on npm-base package by Kadira which is really great when you want to prepare Npm package. This one is prepared to be used as a starter point for React components which needs to be published on Npm.

It includes linting with ESLint and testing with Mocha, Enzyme and JSDOM.

Also there is of course ES6 transpilation.

Usage

1. Clone this repo
2. Inside cloned repo run npm install && rm -rf .git && git init and update package.json with your package name.
3. If you want to run tests: npm test or npm run testonly or npm run test-watch. You need to write tests in __tests__ folder. You need at least Node 4 on your machine to run tests.
4. If you want to run linting: npm test or npm run lint. Fix bugs: npm run lint-fix. You can adjust your .eslintrc config file.
5. If you want to run transpilation to ES5 in dist folder: npm run prepublish (standard npm hook).

CSS and preprocessors

For more information check out this thread: #5

Blog post about it:

• Creating React NPM packages with ES2015

Also check out

• React Alert UI component
• React project boilerplate with Webpack, HMR, React Router

License

MIT (http://www.opensource.org/licenses/mit-license.php)