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.

npm 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:

autoOpenField:

blockedDateTimeRanges:

      let blockedDateTimeRanges = [
        {
          start: new Date('2018-11-06 08:00:00'),
          end: new Date('2018-11-06 20:00:00')
        },
        {
          start: new Date('2020-11-03 08:00:00'),
          end: new Date('2020-11-03 20:00:00')
        }
      ]

calendarDateWidth:

calendarTimeWidth:

className:

container:

dayButtonSize:

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:

    display={(start, end, onFocus) => {
      return (
        <div className='date-range-picker-text-field'>
          <div className='container'>
            <div
              className='date'
              ref={start.dateRef}
              onFocus={onFocus}
              onClick={start.onClickDate}
            >
              <span>{start.formattedDate}</span>
              {start.formattedDate !== 'Pick up' &&
                <span>,</span>
              }
            </div>
            <div
              className={classNames('time', {disabled: start.formattedDate === 'Pick up'})}
              ref={start.timeRef}
              onFocus={onFocus}
              onClick={start.onClickTime}
            >
              <span>{start.formattedTime}</span>
            </div>
          </div>
          <span className='separator'>-</span>
          <div className='container'>
            <div
              className={classNames('date', {disabled: start.formattedDate === 'Pick up'})}
              ref={end.dateRef}
              onFocus={onFocus}
              onClick={end.onClickDate}
            >
              <span>{end.formattedDate}</span>
              {end.formattedDate !== 'Drop off' &&
                <span>,</span>
              }
            </div>
            <div
              className={classNames('time', {disabled: end.formattedDate === 'Drop off'})}
              ref={end.timeRef}
              onFocus={onFocus}
              onClick={end.onClickTime}
            >
              <span>{end.formattedTime}</span>
            </div>
          </div>
        </div>
      );
    }}

endLabel:

firstDayOfWeek:

locale:

mode:

onChange(e, selection):

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

onDismiss(e, selection):

  {
    start: null,
    end: null
  }

showCalendarStatus:

startLabel:

value:

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

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