Material-UI Datetime Range Picker is a datetime range picker built off of Material-UI components.
Check out their documentation site for live examples.
Material-UI Datetime Range Picker is available as an npm package.
npm install material-ui-datetime-range-pickerThis 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!
import { DateRangePicker } from 'material-ui-datetime-range-picker';
<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>
/>
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:
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:
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:
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:
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).
{
start: Wed Jun 13 2018 12:00:00 GMT-0600 (MDT),
end: undefined
}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).
{
start: null,
end: null
}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:
{
start: Wed Jun 13 2018 12:00:00 GMT-0600 (MDT),
end: Wed Jun 14 2018 12:00:00 GMT-0600 (MDT)
}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.
This project is licensed under the terms of the MIT license