react-date-time-group

React Component for a date picker & time picker, emitting Date instances if either part is changed. Requires react v16+.

var DateTimeGroup = require('react-date-time-group');
React.render(<DateTimeGroup />, document.getElementById('container'));

Options

• onChange - Event handler for when a date is selected. It will be passed a date instance set to that time, with years/months/days to match the date you provided as value, or today's date if it was not present.
• onTimeChange - Event handler for when a time is selected. It will be passed a time object with minutes and hours, and add that to the currently selected date.
• value - JS Date instance representing the datetime to be displayed.
• includeTime - Whether to ask for a date and time, or just a date. Defaults to true.
• locale - Locale ReactIntl should attempt to use for formatting. Default is 'en-GB'.

Date options

• dateLabel - Label for date field. Default "Date".
• dateStart - Date instance representing the earliest day selectable
• dateName - Name for date field. Default "Date"
• dateEnd - Date instance representing the latest day selectable
• dateExclusions - Array of date instances to be "greyed out"
• dateFormat - Format string used in the calendar header and as the value of the input element
• dateId - Optional id for the date field.
• showMonthDropdown - Show a month dropdown on the calendar.
• showYearDropdown - Shows a year dropdown on the calendar.

Time options

• timeClassName - class attribute to be applied to time picker element. Default "input-sm".
• timeLabel - Label for time field. Default "Time".
• timeName - Name for time field. Default "Time".
• timeStart - Time to start from when generating range, for example start={1230}. Default is {30} (00:30).
• timeEnd - Time to stop generating range. Default is {2359}. Will not be listed as an option if your "step" value overruns it.
• timeStep - Number of minutes between each option. Default is {30}.
• timeId - Optional id for the time field.
• seperateHourMins - Optional toggle for seperating hour and minutes into seperate inputs.
• time - Time object of hours / minutes to set values of seperate hours and minutes inputs.

Developing

Clone the repo and npm install.

npm start will create and watchify an example which you can open in your browser, at doc/example.html

npm test for the unit tests.

npm run lint checks the code against our guidelines

npm run coverage gets coverage with istanbul, outputing to the coverage directory, and exiting nonzero if any metric is below 100%.