Material-UI Datetime Range Picker

Material-UI Datetime Range Picker is a datetime range picker built off of Material-UI components.

Check out their documentation site for live examples.

Installation

Material-UI Datetime Range Picker is available as an npm package.

1npm install material-ui-datetime-range-picker

Notes

This is still a work in progress so use it at your own risk. I've added some basic documentation. There are many attributes that need to be abstracted into a param and other work that needs to be done. Please note that this uses Material UI version 0.2 and requires some additional imports. Feel free to contribute!

Usage

import { DateRangePicker } from 'material-ui-datetime-range-picker';

Example:

<MuiThemeProvider muiTheme={getMuiTheme(theme)}>
  <DateRangePicker
      autoOk={true}
      autoOpenField={true}
      onChange={onChange}
      onDismiss={onDismiss}
      showCalendarStatus={true}
      className="my-date-picker"
      firstDayOfWeek={0}
      dayButtonSize="6.25vw"
      calendarDateWidth="80vw"
      calendarTimeWidth="40vw"
      local='en-US'
      mode='portrait'
      startLabel='Beginning'
      endLabel='Ending'
</MuiThemeProvider>
/>

Options:

autoOk:

  Description:
    Boolean - If true, this closes the calendar automatically
    when a date/time is selected.
  Default:
      false

autoOpenField:

  Description:
      Boolean - If true, immediately jumps to the next input field.
      For example, if you just selected the start date, the start time
      field would open immediately.
  Default:
      false

blockedDateTimeRanges:

  Description:
      Array of Objects with start and end attributes - Allows you to
      block specific datetime ranges so that datetimes in those ranges
      are not selectable.
  Default:
      []
  Example:

1      let blockedDateTimeRanges = [
2        {
3          start: new Date('2018-11-06 08:00:00'),
4          end: new Date('2018-11-06 20:00:00')
5        },
6        {
7          start: new Date('2020-11-03 08:00:00'),
8          end: new Date('2020-11-03 20:00:00')
9        }
10      ]

calendarDateWidth:

  Description:
      String - Allows you to adjust the width of the **day** picker. It is a string
      because it allows you to use different units from px to vw.
  Default:
      '310px'

calendarTimeWidth:

  Description:
      String - Allows you to adjust the width of the **time** picker. It is a string
      because it allows you to use different units from px to vw.
  Default:
      '125px'

className:

  Description:
      String - If provided, it will allow the class styling to overwrite some basic
      styling of the root element.
  Default:
      null

container:

  Description:
      String - Determines if the calendar/time picker should appear as a
      modal or inline when active.
  Default:
      'dialog'
  Options:
      'dialog' or 'inline'

dayButtonSize:

  Description:
      String - Allows you to adjust the size of the **day button**. It is a string
      because it allows you to use different units from px to vw.
  Default:
      '34px'

display(start, end, onFocus): Description: Function - Enables an absolute customization of the date/time fields. Please note that all variables below are required if you do this! Variables: start { dateRef - References the start date node, onClickDate - Function for handling the onClick event for the start date, formattedDate - Formatted start date, timeRef - References the start time node, onClickTime - Function for handling the onClick event for the start time, formattedTime - Formatted start time, } end { dateRef - References the end date node, onClickDate - Function for handling the onClick event for the end date, formattedDate - Formatted end date, timeRef - References the end time node, onClickTime - Function for handling the onClick event for the end time, formattedTime - Formatted end time, } onFocus - Function for handling focus event Example:

1    display={(start, end, onFocus) => {
2      return (
3        <div className='date-range-picker-text-field'>
4          <div className='container'>
5            <div
6              className='date'
7              ref={start.dateRef}
8              onFocus={onFocus}
9              onClick={start.onClickDate}
10            >
11              <span>{start.formattedDate}</span>
12              {start.formattedDate !== 'Pick up' &&
13                <span>,</span>
14              }
15            </div>
16            <div
17              className={classNames('time', {disabled: start.formattedDate === 'Pick up'})}
18              ref={start.timeRef}
19              onFocus={onFocus}
20              onClick={start.onClickTime}
21            >
22              <span>{start.formattedTime}</span>
23            </div>
24          </div>
25          <span className='separator'>-</span>
26          <div className='container'>
27            <div
28              className={classNames('date', {disabled: start.formattedDate === 'Pick up'})}
29              ref={end.dateRef}
30              onFocus={onFocus}
31              onClick={end.onClickDate}
32            >
33              <span>{end.formattedDate}</span>
34              {end.formattedDate !== 'Drop off' &&
35                <span>,</span>
36              }
37            </div>
38            <div
39              className={classNames('time', {disabled: end.formattedDate === 'Drop off'})}
40              ref={end.timeRef}
41              onFocus={onFocus}
42              onClick={end.onClickTime}
43            >
44              <span>{end.formattedTime}</span>
45            </div>
46          </div>
47        </div>
48      );
49    }}

endLabel:

  Description:
      String - The text used to indicate the ending date/time selection fields.
  Default:
      'End'

firstDayOfWeek:

  Description:
      Integer - Used to change the first day of week. It varies from Saturday
      to Monday between different locales. The allowed range is 0 (Sunday)
      to 6 (Saturday). The default is `1`, Monday, as per ISO 8601.
  Default:
      1

locale:

  Description:
      String - The locale for calculating the datetime.
  Default:
      'en-US'

mode:

  Description:
      String - Determines the rotation of the calendar.
  Default:
      'portrait'
  Options:
      'portrait' or 'landscape'

onChange(e, selection):

  Description:
      Function - Called when the datetimes have been selected for start and end.
  Default: null
  Example:
      The selection will be an object with start and end attributes that will either be a
      datetime value or falsey (undefined/null).

1  {
2    start: Wed Jun 13 2018 12:00:00 GMT-0600 (MDT),
3    end: undefined
4  }

Note that if a date is not given it will be either undefined or null (falsey value).

onDismiss(e, selection):

  Description:
      Function - Called when the picker has been closed/dismissed.
  Default:
      null
  Example:
      The `selection` will be an object with start and end attributes
      that will either be a datetime value or falsey (undefined/null).

1  {
2    start: null,
3    end: null
4  }

Note that if a date is not given it will be either undefined or null (falsey value).

showCalendarStatus:

  Description:
      Boolean - If true, this will show a header with the current field being selected.
  Default:
      false
  Example:
      If true, the user would see a header displaying "Start Date",
      "End Time", etc... or the custom labels provided.

startLabel:

  Description:
      String - The text used to indicate the beginning date/time selection fields.
  Default:
      'Start'

value:

  Description:
      Object - The default value for the date/time range picker
  Example:

1  {
2    start: Wed Jun 13 2018 12:00:00 GMT-0600 (MDT),
3    end: Wed Jun 14 2018 12:00:00 GMT-0600 (MDT)
4  }

Contributions:

I don't have a lot of time to maintain this repo currently. If you see any bugs, feel free to open an issue and if you have time, code contributions are always welcome.

License

This project is licensed under the terms of the MIT license