Material-ui-pickers: Add minTime & minDateTime props to disable period of time

[demiters]

Just a suggestion, I have a case where I need the earliest time selectable to be exactly 24 hours ago.

[dmtrKovalenko]

Actually this is a big scope of work - to disable the part of hour. It will not be implemented in the nearest relase. But maybe it would be better to validate this by yourself - and additionally show the error?

[klassicd]

It would be great if disablePast on <DateTimePicker also respected the time constraint.

[rkrueger11]

It would be great if disablePast on

Woah, thanks for pointing out that it doesn't. I totally assumed it did.

[jieming]

Any news whether this feature will be implemented? I hope so since it's quite an important requirement in our App.

Is the only alternative for now is to overwrite the TextFieldComponent and have the full control of the validation handling? Any suggestions?

Thanks :^^

[tangzhen]

This issue is caused by the recent change(https://github.com/dmtrKovalenko/material-ui-pickers/pull/658/commits/b556698997ec874667f4cce98a6e093e1456d15c).

Suggest we can change the DateTimePicker passing a flag => ModalWrapper => DateTextField, if the flag is datetime, don't apply utils.endOfDay and utils.startOfDay when getError().

[antonioferngarcia]

Any feedback about this issue status?

[dmtrKovalenko]

This issue needs a lot of work. And low priority for us. But if you want you can submit a PR

[dustxd]

Hi, I tried forking this package from the master branch to add this functionality but got the following errors when doing npm install :

Module not found: Error: Can't resolve 'material-ui-pickers/DateTimePicker'
Module not found: Error: Can't resolve 'material-ui-pickers/MuiPickersUtilsProvider'

This is the command that I used: npm install material-ui-pickers@github:dmtrKovalenko/material-ui-pickers

When I opened the material-ui-pickers folder in the node_modules, there's no lib file in there, which I believe is what's causing the error. Can anyone help?

[dmtrKovalenko]

That’s strange. If you want to contribute checkout CONTRIBUTORS.md

[vaibhavsanghigor]

Any updates regarding this?
Would be quite useful for many of us!

[rommelmamedov]

Is there any update on this ? 🧐

[iaomar]

any news?

[jonathangiamp]

Hi everyone 👋
Any news about this feature?

[baba43]

Nice to see that this feature with land in v4.

However, is there any good workaround for now?

I thought about showing an error message to the user if the selected time is invalid, but how could we achieve that? Of course I'd like to re-use the error label that is generated by the picker itself so that error messages are conistent.

[ColdTuna]

I got a little workaround for minTime and maxTime, though I couldn't get the component's native error message to trigger, so I created my own.

I created a component called CustomTimePicker:

import React from "react";
import moment from "moment";
import MomentUtils from "@date-io/moment";
import { MuiPickersUtilsProvider, TimePicker } from "@material-ui/pickers";

function CustomTimePicker(props) {
    return (
        <MuiPickersUtilsProvider utils={MomentUtils}>
            <div className="timepicker">
                <TimePicker
                label={props.label ? props.label : "Time Picker"}
                value={
                    props.value
                    ? moment(props.value, "HH:mm")
                    : moment("00:00", "HH:mm")
                }
                ampm={false}
                autoOk={true}
                minutesStep={1}
                onChange={(time) => props.setSelectedTime(time)}
                error={props.errorMessage ? true : false}
                />
                {props.errorMessage && (
                <span className="error">{props.errorMessage}</span>
                )}
            </div>
        </MuiPickersUtilsProvider>
    );
}

export default CustomTimePicker;

Then I use it like this:

let { error } = this.state;

<CustomTimePicker
    label="My Time Picker"
    value={"8:00"}
    setSelectedTime={(time) => {
        const minTime = moment("4:59", "HH:mm");
        const maxTime = moment("9:01", "HH:mm");
        if (minTime.isBefore(time) && maxTime.isAfter(time)) {
            this.changeTime(time.format("HH:mm"));
            error = false;
        } else {
            error = "Select between 5:00 and 9:00";
        }
        this.setState({ error });
    }}
    errorMessage={error}
/>;

Do your own testing, I created this quickly just now and it seems to be working for me fine. The error message will need some CSS styling to look pretty and it can all probably be improved upon.

Cheers.