@material-ui/pickers#MuiPickersUtilsProvider JavaScript Examples

AllTheProviders = ({ children }) => {
  return (
    <ThemeProvider theme={theme}>
      <MuiPickersUtilsProvider utils={MomentUtils}>
        <QueryClientProvider client={queryClient}>
          {children}
        </QueryClientProvider>
      </MuiPickersUtilsProvider>
    </ThemeProvider>
  );
}

function FormDatePicker(props) {
  const { control } = useFormContext();
  const { name, label } = props;

  return (
    <React.Fragment>
      <MuiPickersUtilsProvider utils={MomentUtils}>
        <Controller
          as={MuiDatePicker}
          name={name}
          control={control}
          label={label}
          defaultValue={null}
          {...props}
        />
      </MuiPickersUtilsProvider>
    </React.Fragment>
  );
}

render() {
    return (
      <MuiPickersUtilsProvider utils={DateFnsUtils}>
        <InternalTimePicker
          autoOk={true}
          clearable={true}
          disableFuture={true}
          format={this.props.state.format || TimePicker.defaultProps.state.format}
          value={this.props.value}
          disabled={this.props.disabled}
          error={this.props.invalid}
          onChange={this.onChange}
        />
      </MuiPickersUtilsProvider>
    );
  }

render() {
    return (
      <MuiPickersUtilsProvider utils={DateFnsUtils}>
        <InternalDateTimePicker
          autoOk={true}
          clearable={true}
          disableFuture={true}
          format={this.props.state.format || DateTimePicker.defaultProps.state.format}
          value={this.props.value}
          disabled={this.props.disabled}
          error={this.props.invalid}
          onChange={this.onChange}
        />
      </MuiPickersUtilsProvider>
    );
  }

render() {
    return (
      <MuiPickersUtilsProvider utils={DateFnsUtils}>
        <InternalDatePicker
          autoOk={true}
          clearable={true}
          disableFuture={true}
          format={this.props.state.format || DatePicker.defaultProps.state.format}
          value={this.props.value}
          disabled={this.props.disabled}
          placeholder={this.props.state.placeholder}
          error={this.props.invalid}
          onChange={this.onChange}
        />
      </MuiPickersUtilsProvider>
    );
  }

function YearMonthPicker(props) {
  return (
    <MuiThemeProvider theme={customTheme}>
      <MuiPickersUtilsProvider utils={DateFnsUtils}>
        <DatePicker
          inputVariant="outlined"
          views={["year"]}
          label={props.label}
          variant="outlined"
          value={props.value}
          onChange={props.onChange}
        />
      </MuiPickersUtilsProvider>
    </MuiThemeProvider>
  );
}

function InlineDatePicker(props) {
  return (
    <MuiThemeProvider theme={customTheme}>
      <MuiPickersUtilsProvider utils={DateFnsUtils}>
        <KeyboardDatePicker
          autoOk
          // disableToolbar
          variant="inline"
          inputVariant="outlined"
          format="dd/MM/yyyy"
          id={props.id}
          color={props.color}
          label={props.label}
          value={props.value}
          error={props.error}
          placeholder={props.placeholder}
          helperText={props.helperText}
          onChange={props.onChange}
          KeyboardButtonProps={{
            "aria-label": "change date",
          }}
        />
      </MuiPickersUtilsProvider>
    </MuiThemeProvider>
  );
}

CustomDateTimePicker = props => {
  return (
    <MuiThemeProvider theme={customTheme}>
      <MuiPickersUtilsProvider utils={DateFnsUtils}>
        <DateTimePicker
          label={props.label}
          inputVariant="outlined"
          value={props.value}
          placeholder={props.placeholder}
          onChange={props.onChange}
          helperText={props.helperText}
          {...props}
          fullWidth
        />
      </MuiPickersUtilsProvider>
    </MuiThemeProvider>
  );
}

Datepicker = ({ ...props }) => {
  const [clearedDate, handleClearedDateChange] = React.useState(null);
  const [selectedDate, setSelectedDate] = React.useState();

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <DatePicker
        clearable
        label={props.label}
        error={props.error ? props.error : false}
        helperText={props.helperText ? props.helperText : null}
        inputVariant="outlined"
        value={props.value ? props.value : clearedDate}
        onChange={props.onChange}
        format={props.format}
      />
    </MuiPickersUtilsProvider>
  );
}

DateTimepicker = ({ ...props }) => {
  const [clearedDate, handleClearedDateChange] = React.useState(null);
  const [selectedDate, setSelectedDate] = React.useState();

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <DateTimePicker
        clearable
        label={props.label}
        error={props.error ? props.error : false}
        helperText={props.helperText ? props.helperText : null}
        inputVariant="outlined"
        value={props.value ? props.value : clearedDate}
        onChange={props.onChange}
        format={props.format}
        fullwidth = {true}
      />
    </MuiPickersUtilsProvider>
  );
}

renderRoutes = () => (
  // <Provider store={store}>
    <Router history={browserHistory}>
    <MuiPickersUtilsProvider utils={MomentUtils}>
    <CookiesProvider>
    <ToastContainer />
      <Switch>
        <Route exact path="/" component={Nearme} />
        <Route exact path="/addLine" component={AddLine} />
        <Route exact path="/editLine" component={EditLine} />
        <Route exact path="/shopDetails" component={ShopDetails} />
        <Route exact path="/feedback" component={FeedBack} />
        <Route exact path="/FAQ" component={faq} />
        <Route exact path="/learntocode" component={learntocode} />
        <Route exact path="/duplicated" component={duplicated} />
        <Route exact path="/stocks" component={Stocks} />
        <Route exact path="/editLocation" component={EditLocation} />
      </Switch>
      </CookiesProvider>
      </MuiPickersUtilsProvider>
    </Router>

  // </Provider>
)

basic = props => {
  const facetID = 'productionTimespan'
  return (
    <div style={{ width: 400, height: 150 }}>
      <MuiPickersUtilsProvider libInstance={moment} utils={MomentUtils} locale='fi'>
        <DateFacet
          facetID={facetID}
          facet={facet}
          facetClass='perspective1'
          resultClass='perspective1'
          facetUpdateID={0}
          fetchFacet={() => null}
          someFacetIsFetching={false}
          updateFacetOption={() => null}
        />
      </MuiPickersUtilsProvider>
    </div>
  )
}

render() {
        const { classes } = this.props;
        return (
            <MuiPickersUtilsProvider utils={DateFnsUtils}>
                <CustomDateRangePicker
                    variant="inline"
                    className={classes.datepicker}
                    format={this.state.dateFormat}
                    id={this.props.id}
                    value={this.state.date}
                    placeholder={t('ehr', 'Select Date')}
                    onChange={this.handleChange}
                    maxDate={this.props.maxDate}
                    KeyboardButtonProps={{
                        'aria-label': this.props.ariaLabel,
                    }}
                    autoOk={true}
                />
            </MuiPickersUtilsProvider>
        );
    }

render() {
        return (
            <MuiPickersUtilsProvider utils={DateFnsUtils}>
                <KeyboardDateTimePicker
                    variant="inline"
                    format={this.state.dateTimeFormat}
                    id={this.props.id}
                    value={this.state.date}
                    placeholder={t('ehr', 'Select Date/Time')}
                    onChange={this.handleChange}
                    KeyboardButtonProps={{
                        'aria-label': this.props.ariaLabel,
                    }}
                    TextFieldComponent={props => <KailonaTextField {...props} inputRef={this.props.inputRef} />}
                    autoOk={true}
                    disableFuture={this.props.disableFuture}
                />
            </MuiPickersUtilsProvider>
        );
    }

render() {
        return (
            <MuiPickersUtilsProvider utils={DateFnsUtils}>
                <KeyboardDatePicker
                    variant="inline"
                    format={this.state.dateFormat}
                    id={this.props.id}
                    value={this.state.date || null}
                    placeholder={this.props.ariaLabel}
                    onChange={this.handleChange}
                    KeyboardButtonProps={{
                        'aria-label': this.props.ariaLabel,
                    }}
                    TextFieldComponent={props => <KailonaTextField {...props} inputRef={this.props.inputRef} />}
                    autoOk={true}
                    disableFuture={this.props.disableFuture}
                    openTo={this.props.openTo}
                    fullWidth={this.props.fullWidth}
                />
            </MuiPickersUtilsProvider>
        );
    }

PlannerPage = () => {
  const [session, loading] = useSession();
  const router = useRouter();

  if (loading) return null;

  logInfo('IndexPage', 'render', 'session', session);

  return (
    <Auth router={router}>
      {session ?
        <DashboardLayout user={session.user}>
          <MuiPickersUtilsProvider utils={MomentUtils}>
            <PlannerView customerIdentifier={session.user.identifier}/>
          </MuiPickersUtilsProvider>
        </DashboardLayout> : null
      }
    </Auth>
  );
}

AppointmentsPage = () => {
  const router = useRouter();
  const [session, loading] = useSession();

  if (loading) return null;

  return (
    <Auth router={router}>
      {session ?
        <DashboardLayout user={session.user}>
          <MuiPickersUtilsProvider utils={MomentUtils}>
            <Appointments
              customerIdentifier={session.user.identifier}
            />
          </MuiPickersUtilsProvider>
        </DashboardLayout> : null
      }
    </Auth>
  );
}

App = ({
  Component,
  pageProps
}) => {
  return (
    <>
      <ThemeProvider theme={theme}>
        <GlobalStyles />
        <CssBaseline />
        <Provider
          // Provider options are not required but can be useful in situations where
          // you have a short session maxAge time. Shown here with default values.
          options={{
            // Client Max Age controls how often the useSession in the client should
            // contact the server to sync the session state. Value in seconds.
            // e.g.
            // * 0  - Disabled (always use cache value)
            // * 60 - Sync session state with server if it's older than 60 seconds
            clientMaxAge: 0,
            // Keep Alive tells windows / tabs that are signed in to keep sending
            // a keep alive request (which extends the current session expiry) to
            // prevent sessions in open windows from expiring. Value in seconds.
            //
            // Note: If a session has expired when keep alive is triggered, all open
            // windows / tabs will be updated to reflect the user is signed out.
            keepAlive: 0
          }}
          session={pageProps.session}>
          <QueryClientProvider client={queryClient}>
            <MuiPickersUtilsProvider utils={MomentUtils}>
              <Component {...pageProps} />
            </MuiPickersUtilsProvider>
          </QueryClientProvider>
        </Provider>
      </ThemeProvider>
    </>
  );
}

export default function Reports() {
    const classes = useStyles()
    const [error, setError] = useState('')
    const [year, setYear] = useState(new Date())
    const [yearlyExpense, setYearlyExpense] = useState([])
    const jwt = auth.isAuthenticated()
    const monthStrings = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

    useEffect(() => {
        const abortController = new AbortController()
        const signal = abortController.signal
        yearlyExpenses({year: year.getFullYear()},{t: jwt.token}, signal).then((data) => {
          if (data.error) {
            setError(data.error)
          }
            setYearlyExpense(data)
        })
        return function cleanup(){
          abortController.abort()
        }
    }, [])

    const handleDateChange = date => {
        setYear(date)
        yearlyExpenses({year: date.getFullYear()},{t: jwt.token}).then((data) => {
          if (data.error) {
            setError(data.error)
          }
            setYearlyExpense(data)
        })
    }
   
    return (
      <div>
          <Typography variant="h6" className={classes.title}>Your monthly expenditures in</Typography>
          <MuiPickersUtilsProvider utils={DateFnsUtils}>
            <DatePicker value={year} onChange={handleDateChange} views={["year"]}
                disableFuture
                label="Year"
                animateYearScrolling
                variant="inline"/>
          </MuiPickersUtilsProvider>
          <VictoryChart
                theme={VictoryTheme.material}
                domainPadding={10}
                height={300}
                width={450}>
                <VictoryAxis/>
                <VictoryBar
                    categories={{
                        x: monthStrings
                    }}
                    style={{ data: { fill: "#69f0ae", width: 20 }, labels: {fill: "#01579b"} }}
                    data={yearlyExpense.monthTot}
                    x={monthStrings['x']}
                    domain={{x: [0, 13]}}
                    labels={({ datum }) => `$${datum.y}`}
                />
          </VictoryChart>
      </div>
    )
  }

export default function MonthlyScatter() {
    const classes = useStyles()
    const [error, setError] = useState('')
    const [plot, setPlot] = useState([])
    const [month, setMonth] = useState(new Date())
    const jwt = auth.isAuthenticated()
    useEffect(() => {
        const abortController = new AbortController()
        const signal = abortController.signal

        plotExpenses({month: month},{t: jwt.token}, signal).then((data) => {
          if (data.error) {
            setError(data.error)
          } else {
            setPlot(data)
          }
        })
        return function cleanup(){
          abortController.abort()
        }
    }, [])
    const handleDateChange = date => {
        setMonth(date)
        plotExpenses({month: date},{t: jwt.token}).then((data) => {
          if (data.error) {
            setError(data.error)
          } else {
            setPlot(data)
          }
        })
    }

    return (
      <div style={{marginBottom: 20}}>
      <Typography variant="h6" className={classes.title}>Expenses scattered over </Typography> 
      <MuiPickersUtilsProvider utils={DateFnsUtils}>
                 <DatePicker value={month} onChange={handleDateChange} views={["year", "month"]}
                 disableFuture
                    label="Month"
                    animateYearScrolling
                    variant="inline"/>
          </MuiPickersUtilsProvider>
        <VictoryChart
                theme={VictoryTheme.material}
                height={400}
                width={550}
                domainPadding={40}
                >
                    <VictoryScatter
                        style={{
                            data: { fill: "#01579b", stroke: "#69f0ae", strokeWidth: 2 },
                            labels: { fill: "#01579b", fontSize: 10, padding:8}
                        }}
                        bubbleProperty="y"
                        maxBubbleSize={15}
                        minBubbleSize={5}
                        labels={({ datum }) => `$${datum.y} on ${datum.x}th`}
                        labelComponent={<VictoryTooltip/>}
                        data={plot}
                        domain={{x: [0, 31]}}
                    />
                    <VictoryLabel
                      textAnchor="middle"
                      style={{ fontSize: 14, fill: '#8b8b8b' }}
                      x={270} y={390}
                      text={`day of month`}
                    />
                    <VictoryLabel
                      textAnchor="middle"
                      style={{ fontSize: 14, fill: '#8b8b8b' }}
                      x={6} y={190}
                      angle = {270} 
                      text={`Amount ($)`}
                    />
                </VictoryChart> 
        </div>
    )
  }

StatefulDateField = ({ field }) => {
  const {
    label,
    property,
    onChange,
    disabled,
    onValidate,
    validationErrorMsg,
    focus,
  } = field;

  var locale = field.langCode;
  var currentDate = new Date();

  if (locale === "am") {
    const basicDate = ToEthiopian(
      currentDate.getDate(),
      currentDate.getMonth() + 1,
      currentDate.getFullYear()
    );
    const etdate = basicDate.year + "-" + basicDate.month + "-" + basicDate.day;

    currentDate = moment(etdate).format();
  }
  const [value, setValue] = useState(field.value || currentDate);

  const [isValid, setIsValid] = useState(true);

  const firstUpdate = useRef(true); // dont run on mount
  useEffect(() => {
    if (firstUpdate.current) {
      firstUpdate.current = false;
      return;
    }

    if (onValidate) {
      const result = onValidate(value);
      setIsValid(result);
    }
  }, [value, onValidate]);

  const handleDateChange = (date) => {
    const newValue = date.format();
    setValue(newValue);

    if (onChange) {
      onChange(newValue);
    }
  };

  const props = {};
  if (!isValid) {
    props["error"] = true;
    props["helperText"] = !isEmpty(validationErrorMsg)
      ? validationErrorMsg
      : "Incorrect Input";
  } else {
    props["error"] = undefined;
    props["helperText"] = undefined;
  }

  if (focus) {
    props["autoFocus"] = true;
  }

  return (
    <Box>
      <InputLabel shrink>{label}</InputLabel>
      <MuiPickersUtilsProvider utils={MomentUtils} locale={locale}>
        <DatePicker
          id={`${property}-outlined`}
          inputVariant="outlined"
          value={value}
          onChange={(date) => handleDateChange(date)}
          disabled={!!disabled}
          format="LL"
          fullWidth={true}
          autoComplete="false"
          size="small"
          {...props}
        />
      </MuiPickersUtilsProvider>
    </Box>
  );
}

SchedulePost = ({ postId, scheduledTime }) => {
	const [schedule, setSchedule] = useState(scheduledTime || new Date());
	const [invalidDate, setInvalidDate] = useState(false);
	const [modalOpen, setModalOpen] = useState(false);

	const dispatch = useDispatch();

	const handleChange = (date, e) => {
		console.log(e);
		setInvalidDate(false);
		setSchedule(date);
	};

	const handleSchedulePost = async () => {
		if (schedule > Date.now()) {
			await dispatch(scheduleTweet(postId, schedule));
		} else {
			setInvalidDate(true);
		}
	};

	return (
		<>
			<Button onClick={() => setModalOpen(true)} color="primary">
				{scheduledTime ? "Reschedule" : "Schedule"}
			</Button>
			<Modal
				open={modalOpen}
				handleClose={() => setModalOpen(false)}
				title="Schedule Post"
				handleConfirmation={handleSchedulePost}
			>
				<MuiPickersUtilsProvider utils={DateFnsUtils}>
					<Grid container direction="column" justify="space-around">
						<KeyboardDatePicker
							minDate={new Date()}
							margin="normal"
							id="date-picker-dialog"
							label="Date"
							format="MM/dd/yyyy"
							value={schedule}
							onChange={handleChange}
							KeyboardButtonProps={{
								"aria-label": "change date",
							}}
						/>
						<KeyboardTimePicker
							minDate={new Date()}
							margin="normal"
							id="time-picker"
							label="Time"
							value={schedule}
							onChange={handleChange}
							KeyboardButtonProps={{
								"aria-label": "change time",
							}}
						/>
						{invalidDate && (
							<Typography variant="caption" color="error">
								Invalid time
							</Typography>
						)}
					</Grid>
				</MuiPickersUtilsProvider>
			</Modal>
		</>
	);
}

TimeLog = props => {
  const { basicDetail, reload } = props;
  const { timelogs, applicationId } = basicDetail;

  const classes = useStyles();
  const [openAddTimeLog, setOpenAddTimeLog] = useState(false);

  const handleAddTimeLogOpen = () => {
    setOpenAddTimeLog(true);
  };

  const handleAddTimeLogClose = () => {
    setOpenAddTimeLog(false);
  };

  return (
    <MuiPickersUtilsProvider utils={DayJsAdapter}>
      <div className={classes.root}>
        <Typography variant="h6" color="primary">
          Time Logs
        </Typography>
        {timelogs.length === 0 ? <EmptyLogView /> : ''}
        {timelogs.map(timelog => (
          <TimeLogItem
            applicationId={applicationId}
            type={timelog.type}
            note={timelog.note}
            time={timelog.time}
            id={timelog.id}
            key={timelog.id}
            onUpdate={reload}
          />
        ))}
        <div className={classes.displayFlex}>
          <Button onClick={handleAddTimeLogOpen}>Add</Button>
        </div>
        <TimeLogForm
          open={openAddTimeLog}
          onClose={handleAddTimeLogClose}
          onChange={reload}
          applicationId={applicationId}
          isNew
        />
      </div>
    </MuiPickersUtilsProvider>
  );
}

render() {

        const { classes, selected_currency, _selected_date, coin_data, coin_id } = this.state;
        const { _cryptocurrency_input_value, _fiat_input_value, _min_date } = this.state;

        const date_format = this._get_date_format();

        const market_convert_card = coin_data !== null ?
            <Fade in>
                <Card>
                    <CardHeader title={t( "components.coin_charts_convert.title")} />
                    <CardContent>
                        <TextField className={classes.convertInput}
                                   id="cryptocurrency-input"
                                   type="number"
                                   label={coin_data.symbol.toUpperCase()}
                                   value={_cryptocurrency_input_value}
                                   onChange={this._handle_cryptocurrency_input_value_change}
                        />
                        <TextField
                            className={classes.convertInput}
                            id="fiat-input"
                            type="number"
                            label={selected_currency}
                            value={_fiat_input_value}
                            onChange={this._handle_fiat_input_value_change}
                        />
                        <MuiPickersUtilsProvider utils={DateFnsUtils} locale={DATE_FNS_LOCALE_MAP[document.documentElement.lang] || DATE_FNS_LOCALE_MAP["en"]}>
                            <KeyboardDatePicker
                                cancelLabel={t("words.cancel")}
                                okLabel={t("words.ok")}
                                minDate={_min_date}
                                maxDate={Date.now()}
                                disableFuture={true}
                                invalidDateMessage={t("sentences.invalid date message")}
                                className={classes.noTopMargin}
                                margin="normal"
                                id="date-picker-dialog"
                                label={t( "sentences.pick a date")}
                                format={date_format}
                                value={_selected_date}
                                onChange={this._handle_selected_date_change}
                            />
                        </MuiPickersUtilsProvider>
                        <Button className={classes.buyButton}
                                onClick={(event) => {this._open_buy()}}
                                fullWidth
                                variant="contained"
                                color="primary">
                            {t( "components.coin_charts_convert.buy_x", {coin_name: coin_data.name})}
                        </Button>
                    </CardContent>
                </Card>
            </Fade>: null;

        return (
            <div className={classes.fullHeight}>{market_convert_card}</div>
        );
    }

ReminderAction = ({ onAddReminder }) => {
  const [open, setOpen] = useState(false);
  const [selectedDate, setSelectedDate] = useState(new Date());

  const handleDateChange = (date) => {
    setSelectedDate(date);
  };
  const toggleReminder = () => {
    setOpen(() => !open);
  };

  const handleSave = () => {
    onAddReminder(selectedDate);
    toggleReminder();
  };

  return (
    <Box>
      <IconButton aria-label="Remind" onClick={toggleReminder}>
        <AlarmIcon />
      </IconButton>
      <Dialog
        open={open}
        onClose={toggleReminder}
        aria-labelledby="form-dialog-title"
      >
        <DialogTitle id="form-dialog-title">Remind</DialogTitle>
        <DialogContent>
          <DialogContentText>
            <MuiPickersUtilsProvider utils={DateFnsUtils}>
              <KeyboardDatePicker
                margin="normal"
                label="Date"
                format="MM/dd/yyyy"
                value={selectedDate}
                onChange={handleDateChange}
                KeyboardButtonProps={{
                  'aria-label': 'change date',
                }}
              />
              <KeyboardTimePicker
                margin="normal"
                label="Time"
                value={selectedDate}
                onChange={handleDateChange}
                KeyboardButtonProps={{
                  'aria-label': 'change time',
                }}
              />
            </MuiPickersUtilsProvider>
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button onClick={toggleReminder} color="primary">
            Cancel
          </Button>
          <Button onClick={handleSave} color="primary">
            Save
          </Button>
        </DialogActions>
      </Dialog>
    </Box>
  );
}

DateTimeInput = ({ dateInputProps, onChange, required, timeInputProps, value }) => {
  const handleChange = (field, newValue) => {
    onChange({
      ...value,
      [field]: newValue,
    });
  };

  const datePickerContainerProps = {
    id: "datetime-input-date",
    label: "Date",
    margin: "normal",
    ...dateInputProps,
  };

  const timePickerProps = {
    id: "datetime-input-time",
    label: "Time",
    margin: "normal",
    ...timeInputProps,
  };

  return (
    <MuiPickersUtilsProvider utils={MomentUtils}>
      <KeyDatePickerContainer
        onChange={(val) => handleChange("date", val)}
        required={required}
        value={value.date}
        margin="normal"
        format="MM/dd/yyyy"
        KeyboardButtonProps={{
          "aria-label": "change date",
        }}
        {...datePickerContainerProps}
      />
      <KeyboardTimePicker
        value={value.time}
        required={required}
        onChange={(val) => handleChange("time", val)}
        KeyboardButtonProps={{ "aria-label": "change time" }}
        {...timePickerProps}
      />
    </MuiPickersUtilsProvider>
  );
}

render() {
    return (
      <ThemeProvider theme = {theme}>
        <div>
          <Navbar
          history = {this.props.history}/>
          <br/>
          <div style = {{"textAlign" : "center",'color' : '#006064'}}>
              <form className="form">
                <h3>Create New Auction</h3>
                <TextField
                  variant="outlined"
                  label = "Auction Title"
                  type = "text"
                  name = "title"
                  style = {{"width" : "60%", "margin":"10px"}}
                  placeholder = "Enter Auction Title"
                  value = {this.state.title}
                  onChange = {this.handleInputChange}
                  required
                />
                <br/>
                <TextField
                  variant="outlined"
                  label = "Asset Address"
                  type = "text"
                  name = "asset_addr"
                  style = {{"width" : "60%", "margin":"10px"}}
                  placeholder = "Enter Address of the asset you wish to sell"
                  value = {this.state.asset_addr}
                  onChange = {this.handleInputChange}
                  required
                />
                <br/>
                <TextField
                  variant="outlined"
                  label = "Reserved Price"
                  type = "number"
                  name = "reserved_price"
                  style = {{"width" : "60%", "margin":"10px"}}
                  placeholder = "Enter Reserved Price in Ethers"
                  value = {this.state.reserved_price}
                  onChange = {this.handleInputChange}
                  required
                />
                <br/>
                <MuiPickersUtilsProvider utils={DateFnsUtils}>
                <KeyboardDatePicker
                    clearable
                    value={this.state.selectedDate}
                    label = "Select deadline for the auction"
                    onChange={date => this.handleDateChange(date)}
                    minDate={new Date()}
                    format="dd/MM/yyyy"
                    style = {{"width" : "40%", "margin":"10px"}}
                  />
                </MuiPickersUtilsProvider>
                <br/>
                <br/>
                <Button variant = "contained" style = {{'color' : '#FFFFFF', 'background' : '#006064'}} onClick = {this.createAuction}>Create Auction</Button>
                <br/>
                <br/>

              </form>
          </div>
        </div>
      </ThemeProvider>
    );
  }

WorkingHoursPicker = props => {
    const [dialog, setDialog] = useState(false);

    const handleClickOpen = () => {
        setDialog(true);
    };

    const handleClose = () => {
        setDialog(false);
    };

    const handleCloseAndSave = () => {
        setDialog(false);
        props.saveChanges(props.startTime, props.endTime);
    };

    const handleStartTimeChange = date => {
        props.changeStartTime(date);
    };

    const handleEndTimeChange = date => {
        props.changeEndTime(date);
    };

    return (
        <Grid container>
            <h2 style={{ marginLeft: "10vw", marginTop: "4vh", textAlign: "left" }}>Working Hours:</h2>
            <div style={{ marginLeft: "3vw" }}>
                <MuiPickersUtilsProvider utils={DateFnsUtils}>
                    <KeyboardTimePicker
                        margin="normal"
                        label="Start Time"
                        value={props.startTime}
                        onChange={handleStartTimeChange}
                        KeyboardButtonProps={{
                            "aria-label": "change time",
                        }}
                    />
                </MuiPickersUtilsProvider>
            </div>
            <h2 style={{ marginLeft: "3vw", marginTop: "4vh", textAlign: "left" }}>to</h2>
            <div style={{ marginLeft: "3vw" }}>
                <MuiPickersUtilsProvider utils={DateFnsUtils}>
                    <KeyboardTimePicker
                        margin="normal"
                        label="End Time"
                        value={props.endTime}
                        onChange={handleEndTimeChange}
                        KeyboardButtonProps={{
                            "aria-label": "change time",
                        }}
                    />
                </MuiPickersUtilsProvider>
            </div>
            <div style={{ marginLeft: "3vw", marginTop: "3vh", textAlign: "left" }}>
                <Button variant="contained" color="secondary" onClick={handleClickOpen}>
                    Save
                </Button>
                <Dialog
                    open={dialog}
                    onClose={handleClose}
                    aria-labelledby="alert-dialog-title"
                    aria-describedby="alert-dialog-description"
                >
                    <DialogTitle id="alert-dialog-title">{"Want to save those changes?"}</DialogTitle>
                    <DialogContent>
                        <DialogContentText id="alert-dialog-description">
                            Your time-table will be re-managed automatically. Please check again.
                        </DialogContentText>
                    </DialogContent>
                    <DialogActions>
                        <Button onClick={handleClose} color="primary">
                            Cancel
                        </Button>
                        <Button onClick={handleCloseAndSave} color="primary" autoFocus>
                            Ok
                        </Button>
                    </DialogActions>
                </Dialog>
            </div>
        </Grid>
    );
}

ModalContent = props => {
    const classes = useStyles();

    const [selectedName, setSelectedName] = useState("TASK - " + new Date());
    const [selectedDescription, setSelectedDescription] = useState("");
    const [selectedDueDate, setSelectedDueDate] = useState(new Date());
    const [selectedEarliestDate, setEarliestDate] = useState(new Date());

    // default duration is 1 hour
    var initialDuration = new Date();
    initialDuration.setHours(1);
    initialDuration.setMinutes(0);
    const [selectedDuration, setSelectedDuration] = React.useState(initialDuration);

    // default travel time is 10 minutes unless specified
    const travelTime = new Date();
    travelTime.setHours(0);
    travelTime.setMinutes(10);
    const [selectedTravelTime, setSelectedTravelTime] = React.useState(travelTime);

    const [selectedLocation, setSelectedLocation] = useState("");
    const [selectedPriority, setSelectedPriority] = useState("");
    const [selectedReminder, setSelectedReminder] = useState("");
    const [dueDateValid, setDueDateValid] = useState(false);
    const [earliestDateValid, setEarliestDateValid] = useState(true);
    const [selectedCategory, setSelectedCategory] = useState("");

    // ----- HANDLERS FOR INPUT FIELDS -----
    const handleNameChange = event => {
        setSelectedName(event.target.value);
    };

    const handleDescriptionChange = event => {
        setSelectedDescription(event.target.value);
    };

    const handleDateChange = date => {
        if (date > new Date()) {
            setSelectedDueDate(date);
            setDueDateValid(true);
        } else {
            setSelectedDueDate("invalid date");
            setDueDateValid(false);
        }
    };

    const handleEarliestChange = date => {
        if (date >= new Date()) {
            setEarliestDate(date);
            setEarliestDateValid(true);
        } else {
            setEarliestDate("invalid date");
            setEarliestDateValid(false);
        }
    };

    const handleLocationChange = event => {
        setSelectedLocation(event.target.value);
    };

    const handlePriority = event => {
        setSelectedPriority(event.target.value);
    };

    const handleCategory = event => {
        setSelectedCategory(event.target.value);
    };

    const handleReminder = event => {
        setSelectedReminder(event.target.value);
    };

    // ----- END HANDLERS FOR INPUT FIELDS -----

    // Task variables passed into calendar.js to add new task to the calendar
    const handleAdd = event => {
        const task = {
            title: selectedName,
            description: selectedDescription,
            dueDate: selectedDueDate,
            earliestDate: selectedEarliestDate,
            duration: selectedDuration.getHours() * 60 + selectedDuration.getMinutes(),
            travelTime: selectedTravelTime.getHours() * 60 + selectedTravelTime.getMinutes(),
            location: selectedLocation,
            priority: selectedPriority,
            category: selectedCategory,
            reminder: selectedReminder,
        };

        props.addNewTask(task);
    };

    return (
        // Setting .css properties based on theme selected
        <div className={props.modalBackground === Themes.DARK ? "modal-p" : "modal-g"}>
            <div className="forum-content">
                <form className={classes.root} noValidate autoComplete="off">
                    <div>
                        <TextField
                            className="text-area name-field"
                            id="standard-basic"
                            label="Task name"
                            InputProps={{
                                classes: {
                                    input: classes.taskNameInput,
                                },
                            }}
                            InputLabelProps={{
                                classes: {
                                    root: classes.taskNameInput,
                                    shrink: classes.labelFocus,
                                },
                            }}
                            onChange={handleNameChange}
                        />
                    </div>
                    <div>
                        <TextField
                            className="text-area group-spacing"
                            id="standard-basic"
                            label="Task description"
                            onChange={handleDescriptionChange}
                        />
                    </div>
                    <div>
                        <MuiPickersUtilsProvider utils={DateFnsUtils}>
                            <KeyboardDateTimePicker
                                disableToolbar
                                autoOk={true}
                                minDate={new Date()}
                                minDateMessage="Date must be after now"
                                invalidDateMessage="Date must be after now"
                                variant="inline"
                                format="MM/dd/yyyy HH:mm"
                                ampm={false}
                                margin="normal"
                                id="date-picker-inline"
                                label="Due Date"
                                value={selectedDueDate}
                                onChange={handleDateChange}
                                KeyboardButtonProps={{
                                    "aria-label": "Change date/time",
                                }}
                                error={!dueDateValid}
                            />
                        </MuiPickersUtilsProvider>
                    </div>
                    <div>
                        <MuiPickersUtilsProvider utils={DateFnsUtils}>
                            <KeyboardDateTimePicker
                                disableToolbar
                                autoOk={true}
                                minDate={new Date()}
                                minDateMessage="Date must be after now"
                                invalidDateMessage="Date must be after now"
                                variant="inline"
                                format="MM/dd/yyyy HH:mm"
                                ampm={false}
                                margin="normal"
                                id="date-picker-inline"
                                label="Earliest Start"
                                value={selectedEarliestDate}
                                onChange={handleEarliestChange}
                                KeyboardButtonProps={{
                                    "aria-label": "Change date/time",
                                }}
                                error={!earliestDateValid}
                            />
                        </MuiPickersUtilsProvider>
                    </div>
                    <div>
                        <MuiPickersUtilsProvider utils={DateFnsUtils}>
                            <KeyboardTimePicker
                                ampm={false}
                                label="Duration of task (hours : minutes)"
                                margin="normal"
                                id="time-picker"
                                value={selectedDuration}
                                onChange={setSelectedDuration}
                                KeyboardButtonProps={{
                                    "aria-label": "change time",
                                }}
                            />
                        </MuiPickersUtilsProvider>
                    </div>
                    <div>
                        <MuiPickersUtilsProvider utils={DateFnsUtils}>
                            <KeyboardTimePicker
                                ampm={false}
                                label="Travel Duration (hours : minutes)"
                                margin="normal"
                                id="travel-time-picker"
                                value={selectedTravelTime}
                                onChange={setSelectedTravelTime}
                                KeyboardButtonProps={{
                                    "aria-label": "change time",
                                }}
                            />
                        </MuiPickersUtilsProvider>
                    </div>
                    <div>
                        <TextField
                            className="text-area spacing"
                            id="standard-basic"
                            label="Location"
                            onChange={handleLocationChange}
                        />
                    </div>
                    <div className="drop-down">
                        {/* Scheduling based on priority. Hight priority will schedule the task closer to current time. Low priority will
                        schedule task closer to deadline. */}
                        {/* TODO: Improve algorithm for more smarter Scheduling */}
                        <FormControl className={classes.formControl}>
                            <InputLabel id="priority-label">Priority</InputLabel>
                            <Select value={selectedPriority} onChange={handlePriority}>
                                <MenuItem value={10}>High</MenuItem>
                                <MenuItem value={20}>Medium</MenuItem>
                                <MenuItem value={30}>Low</MenuItem>
                            </Select>
                        </FormControl>
                    </div>
                    <div className="drop-down">
                        {/* Set task categories, the category will determine what colour the task has */}
                        <FormControl className={classes.formControl}>
                            <InputLabel id="category-label">Category</InputLabel>
                            <Select value={selectedCategory} onChange={handleCategory}>
                                <MenuItem value={1}>Homework</MenuItem>
                                <MenuItem value={2}>Work</MenuItem>
                                <MenuItem value={3}>Household</MenuItem>
                                <MenuItem value={4}>Personal</MenuItem>
                            </Select>
                        </FormControl>
                    </div>
                    <div className="drop-down">
                        {/* TODO: Send a reminder email to associated gmail address */}
                        <FormControl className={classes.formControl}>
                            <InputLabel id="reminder-label">Reminders</InputLabel>
                            <Select value={selectedReminder} onChange={handleReminder}>
                                <MenuItem value={10080}>1 Week Before</MenuItem>
                                <MenuItem value={1440}>1 Day Before</MenuItem>
                                <MenuItem value={60}>1 Hour Before</MenuItem>
                                <MenuItem value={30}>30 Minutes Before</MenuItem>
                                <MenuItem value={15}>15 Minutes Before</MenuItem>
                                <MenuItem value={5}>5 Minutes Before</MenuItem>
                            </Select>
                        </FormControl>
                        <Button
                            id="add-button"
                            variant="contained"
                            color="default"
                            onClick={handleAdd}
                            disabled={!(dueDateValid && earliestDateValid)}
                        >
                            ADD
                        </Button>
                    </div>
                </form>
            </div>
        </div>
    );
}