Feature Request: Ability to select a date range

[tgBryanBailes]

Thank you for this amazing component. Your work and contributions are very much appreciated.

It would be amazing if this component could also work to select a date range (similar to https://ipiz.herokuapp.com/md-date-range-picker-demo/index.html).

[dmtrKovalenko]

I have think about that. We are now a little bit stack with a new features. So I will do it ASAP.

[RedHatter]

Any chance this will be implemented soon?

[vdmkotai]

+1

[RedHatter]

I implemented this feature as well as multiple selection here. Anyone that's interested can try it out. Bugs can be reported on the pull request #508.

[bellini666]

+1, eagerly waiting for this

[RedHatter]

@dmtrKovalenko Not to be a bother, but any chance you'll get to implementing this soon?

[jakeleventhal]

+1 i need this

[marjan2k]

+1 This feature will be much valued

[dvislov]

+1

[KlimkinaD]

+1

[gabrielweich]

+1

[frankbolviken]

+100

[RedHatter]

I've written a quick and dirty wrapper making use of renderDay prop to provide range and multi select.

import React, { useState, useContext, useRef } from 'react'
import { DatePicker } from 'material-ui-pickers'
import { MuiPickersContext } from 'material-ui-pickers'

function DateRangePicker({
  value,
  onChange,
  labelFunc,
  format,
  emptyLabel,
  autoOk,
  onClose,
  ...props
}) {
  const [begin, setBegin] = useState(value[0])
  const [end, setEnd] = useState(value[1])
  const [hover, setHover] = useState(null)
  const picker = useRef()
  const utils = useContext(MuiPickersContext)

  const min = Math.min(begin, end || hover)
  const max = Math.max(begin, end || hover)

  function renderDay(day, selectedDate, dayInCurrentMonth, dayComponent) {
    const style = {
      margin: 0,
      width: '40px'
    }

    if (day >= min && day <= max) {
      style.backgroundColor = '#3f51b5'
      style.color = 'white'
    }

    if (utils.isSameDay(day, min)) style.borderRadius = '50% 0 0 50%'
    else if (utils.isSameDay(day, max)) style.borderRadius = '0 50% 50% 0'
    else style.borderRadius = '0'

    return React.cloneElement(dayComponent, {
      onClick: e => {
        e.stopPropagation()
        if (!begin) setBegin(day)
        else if (!end) {
          setEnd(day)
          if (autoOk) {
            onChange([begin, end].sort())
            picker.current.close()
          }
        } else {
          setBegin(day)
          setEnd(null)
        }
      },
      onMouseEnter: e => setHover(day),
      style
    })
  }

  const formatDate = date => utils.format(date, format || utils.dateFormat)

  return (
    <DatePicker
      {...props}
      value={null}
      renderDay={renderDay}
      onClose={() => {
        onChange([begin, end].sort())
        onClose()
      }}
      onChange={() => {}}
      ref={picker}
      labelFunc={(date, invalid) =>
        labelFunc
          ? labelFunc([begin, end].sort(), invalid)
          : begin && end
          ? `${formatDate(begin)} - ${formatDate(end)}`
          : emptyLabel
      }
    />
  )
}

function DateMultiPicker({
  value,
  onChange,
  labelFunc,
  format,
  emptyLabel,
  onClose,
  ...props
}) {
  const [dates, setDates] = useState(value)
  const utils = useContext(MuiPickersContext)

  function renderDay(day, selectedDate, dayInCurrentMonth, dayComponent) {
    return React.cloneElement(dayComponent, {
      onClick: e => {
        e.stopPropagation()
        const i = dates.findIndex(d => utils.isSameDay(d, day))
        if (i >= 0) {
          const nextDates = [...dates]
          nextDates.splice(i, 1)
          setDates(nextDates)
        } else {
          setDates([...dates, day])
        }
      },
      style: dates.find(d => utils.isSameDay(d, day))
        ? {
            backgroundColor: '#3f51b5',
            color: 'white'
          }
        : {}
    })
  }

  const formatDate = date => utils.format(date, format || utils.dateFormat)

  return (
    <DatePicker
      {...props}
      value={dates[0]}
      renderDay={renderDay}
      onClose={() => {
        onChange(dates)
        onClose()
      }}
      onChange={() => {}}
      labelFunc={(date, invalid) =>
        labelFunc
          ? labelFunc(dates, invalid)
          : dates.length > 0
          ? dates.map(formatDate).join(', ')
          : emptyLabel
      }
    />
  )
}

[dmtrKovalenko]

I like it!

[RedHatter]

I've put up a gist to share any changes I make. Gist

[rhuanbarreto]

Great to see the power of the community here! Kudos for @RedHatter! Sad to see that the repo owner rejected PR #508

[dmtrKovalenko]

I will start work on this issue in a few days 🔥🔥🔥

[Alexzanderk]

@dmtrKovalenko When we can take result of this feature?

[milindR]

@dmtrKovalenko Thanks for the amazing component, when can we have this feature

[dmtrKovalenko]

I suppose 1-2 weeks

[milindR]

@dmtrKovalenko That's great news!!

[ghost]

@dmtrKovalenko thanks for the great work you've done so far.. we are eagerly waiting for this feature...

[TrejGun]

@RedHatter can you please fix your code to work in new version while we are waiting for this feature?

[TrejGun]

so far i have this

import React, {useContext, useState} from "react";
import PropTypes from "prop-types";
import {DateTimePicker, MuiPickersContext} from "@material-ui/pickers";
import classNames from "classnames";
import {FormattedMessage} from "react-intl";
import {checkInTime, checkOutTime, dateTimeFormat} from "holymotors-constants-date";
import {useStyles as useOriginalStyles} from "@material-ui/pickers/DatePicker/components/Day";

import useStyles from "./styles";


function DateRangeWrapper({value, onChange, labelFunc, format, emptyLabel, onClose, ...props}) {
  const [begin, setBegin] = useState(value[0]);
  const [end, setEnd] = useState(value[1]);
  const [hover, setHover] = useState(undefined);
  const originalClasses = useOriginalStyles();
  const classes = useStyles();
  const utils = useContext(MuiPickersContext);

  const min = Math.min(begin, end || hover);
  const max = Math.max(begin, end || hover);

  function renderDay(day, selectedDate, dayInCurrentMonth, dayComponent) {
    return React.cloneElement(dayComponent, {
      onClick: e => {
        e.stopPropagation();
        if (!begin) setBegin(day);
        else if (!end) {
          setEnd(day);
        } else {
          setBegin(day);
          setEnd(undefined);
        }
      },
      onMouseEnter: e => setHover(day),
      className: classNames(originalClasses.day, classes.day, {
        [originalClasses.hidden]: dayComponent.props.hidden,
        [originalClasses.current]: dayComponent.props.current,
        [originalClasses.dayDisabled]: dayComponent.props.disabled,
        [originalClasses.daySelected]: utils.isSameDay(day, min) || utils.isSameDay(day, max) || (day >= min && day <= max),
        [classes.beginCap]: utils.isSameDay(day, min),
        [classes.endCap]: utils.isSameDay(day, max),
      }),
    });
  }

  const formatDate = date => utils.format(date, dateTimeFormat);

  return (
    <DateTimePicker
      {...props}
      fullWidth
      value={begin}
      renderDay={renderDay}
      onClose={onClose}
      onChange={date => {
        onChange([begin, end].sort((a, b) => a - b));
      }}
      onClear={() => {
        setBegin(undefined);
        setEnd(undefined);
        setHover(undefined);
        onChange([]);
      }}
      labelFunc={(date, invalid) =>
        labelFunc
          ? labelFunc([begin, end].sort((a, b) => a - b), invalid)
          : date && begin && end
          ? [begin, end].sort((a, b) => a - b).map(formatDate).join(" - ")
          : emptyLabel || ""
      }
    />
  );
}

DateRangeWrapper.propTypes = {
  value: PropTypes.array,
  onChange: PropTypes.func,
  labelFunc: PropTypes.func,
  format: PropTypes.string,
  emptyLabel: PropTypes.string,
  onClose: PropTypes.func,
};

export default DateRangeWrapper;

import {makeStyles} from "@material-ui/styles";


export default makeStyles(() => ({
  day: {
    margin: 0,
    width: 40,
    borderRadius: 0,
  },
  beginCap: {
    borderTopLeftRadius: "50%",
    borderBottomLeftRadius: "50%",
  },
  endCap: {
    borderTopRightRadius: "50%",
    borderBottomRightRadius: "50%",
  },
}), {name: "DateRangeWrapper"});

[jakeleventhal]

@dmtrKovalenko this looks good, but i think we will want to be able to see all the dates highlighted after the user clicks. i.e. once the range is chosen, the dates in the range should all show up as green rather than just the last selected single date

[dmtrKovalenko]

Make sure that in the initial example you first choose the start date and then the end

Did you notice any issues with displaying the final range?

[jakeleventhal]

@dmtrKovalenko i see, it works but i have to click both text fields first in order for it to show up

[jakeleventhal]

ideally, you would just be able to

1. open date pick via a button
2. click a date then click another date and have the range appear

If the first date picked is before the second date, the first date picked is the start date
if the first date picked is after the second date, the first date picked is the end date.

[dmtrKovalenko]

⬆️ this is how it is working now in chrome

@jakeleventhal could you please record a video how it works for you? Thanks to you I just found a bug in safari

[jakeleventhal]

[jakeleventhal]

it was tricky to get it working

[dmtrKovalenko]

@jakeleventhal in your case it is a problem just because for now we have a prefilled date range for the first example. The initial value is [new Date(), null] – so when you are clicking on the first date it is treated like you want to change the first date and then choose the end. (you can click on inputs to switch from start to end selection)

This must be more obvious in the second example :) Yeah I will change examples and docs structure

In safari it works really weird will take a look at the issue

[Angelk90]

@dmtrKovalenko : I have a list of suggestions, the problem and if I wrote them here they would be lost among all the comments, so if I wrote them then what you think are valid would you consider them?

[dmtrKovalenko]

Yes please, I’d like to hear anything :)

[Angelk90]

@dmtrKovalenko :

• Ability to select only dates prior to the current including the current one.
• Ability to select only dates after the current one including the current one.
• When selecting a start and end date, the possibility of selecting a 24 hour format time, showing it in a single input field.
  example: 24/03/2020 13:00 ~ 27/03/2020 14:00
  

[jvdownie]

Is there a release timeline? Trying to get a sense of when this will be available so I can let our PO know. Thanks!

[oliviertassinari]

@jvdownie first betas in Q2, stable maybe in v5, Q4.

[ghost]

Yes please, I’d like to hear anything :)

Hey bro, it's all right?
Would it be possible to add two optional buttons?

(CANCEL) (APPLY)

Thanks!

[kirill-konshin]

@dmtrKovalenko https://dev.material-ui-pickers.dev/demo/daterangepicker work like charm! One feature request though, is it possible to select same date to make one day range? It currently gives validation error...

[oliviertassinari]

@kirill-konshin Could you open a new issue about the same day range?

[kirill-konshin]

@oliviertassinari #1759 done

[oliviertassinari]

I have added the enterprise label, we will look into how we can publish the range features as part of the enterprise version of Material-UI. The current plan is to have it released as unstable_ in v4, with a warning that it will go enterprise in v5. This should leave us enough time to explore the implications before moving further.

[balazsorban44]

@oliviertassinari

I have added the enterprise label, we will look into how we can publish the range features as part of the enterprise version of Material-UI. The current plan is to have it released as unstable_ in v4, with a warning that it will go enterprise in v5. This should leave us enough time to explore the implications before moving further.

Does this mean that selecting a date range won't be free? Just curious.

[oliviertassinari]

@balazsorban44 the high-level strategy is as follow:

1. bring the best possible MIT date picker component. This is the continuation of the work we have started 6 months ago. There will be a couple of milestones to get there: merge the picker in the mono repository, move the documentation to the main site, provide a desktop-first experience, fix performance issues, fix inconsistencies with core, improve docs. Handle users' feedback. We will know we have succeeded once we get to rank #1 on the query react datepicker on Google. We are still far from it (10-12), but getting closer. The simple fact that a full paid date picker components can rank before our component in the US is a major issue we will address :).
2. bring the most/best position feature-rich date picker, under a GPLv3 or paid enterprise license. To match the existing competitors. Initially, we won't make the date range or date-time range MIT and see how that goes (we can't do it the other way around).

Regarding the pricing, that would likely be approachable and come with a bunch of advances features spread among all the components, e.g tree view drag and drop, data grid virtualization, etc.

[bbigras]

Is there a blog post or something about which material-ui features will only be available in the enterprise version?

[oliviertassinari]

@bbigras So far, advanced data grid, date range picker. Then likely, advanced scheduler, advanced tree view, advanced charting, advanced layouts (like in jupyterlab)

[bbigras]

Thank you very much.