@material-ui/pickers#KeyboardDateTimePicker JavaScript Examples
The following examples show how to use
@material-ui/pickers#KeyboardDateTimePicker.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: index.js From flame-coach-web with MIT License | 4 votes |
|
Appointments = ({
customerIdentifier
}) => {
const queryClient = useQueryClient();
const classes = useStyles();
const [appointment, setAppointment] = React.useState({
id: null,
title: null,
allDay: false,
dttmStarts: new Date(),
dttmEnds: new Date(),
resource: {
notes: "",
price: null,
clientIdentifier: null
}
});
const [notification, setNotification] = useState({
enable: false,
message: "",
level: "INFO"
});
const [openDialog, setOpenDialog] = React.useState(false);
const [operation, setOperation] = React.useState("ADD");
const [calendarView, setCalendarView] = React.useState(Views.DAY);
React.useEffect(() => {
setNotification(update(notification, {
enable: { $set: false }
}));
}, [openDialog]);
const {
register,
handleSubmit
} = useForm();
const { mutate: addAppointment } = useAddAppointmentClient();
const editAppointment = useEditAppointmentClient();
const { mutate: deleteAppointment } = useDeleteAppointmentClient();
const appointments = useFetchAppointmentsCoach(customerIdentifier,
{
select: (data) => {
if (data === undefined || !data.appointments) {
return [];
}
return data.appointments.map((item) => {
const startDate = moment.tz(item.dttmStarts, defaultTimezone);
const endDate = moment.tz(item.dttmEnds, defaultTimezone);
return {
id: item.identifier,
title: `${item.client.firstName} ${item.client.lastName}`,
start: new Date(startDate.format("YYYY-MM-DDTHH:mm:ss")),
end: new Date(endDate.format("YYYY-MM-DDTHH:mm:ss")),
allDay: false, //TODO: Check if this is all day
resource: {
clientIdentifier: item.client.identifier,
price: item.price,
notes: item.notes
}
};
}
);
}
}
);
const clientsCoach = useFetchClientsCoach(customerIdentifier);
const okDialogHandler = (data, event) => {
event.preventDefault();
logInfo("Appointments", "okDialogHandler", "value", appointment);
if (!appointment.title || !appointment.dttmStarts ||
!appointment.dttmEnds || !appointment.resource?.price ||
!appointment.resource?.clientIdentifier) {
setNotification(update(notification,
{
enable: { $set: true },
message: { $set: ErrorMessage.CODE_0009.msg },
level: { $set: ErrorMessage.CODE_0009.level }
}));
} else {
if (appointment.dttmStarts.isAfter(appointment.dttmEnds)) {
setNotification(update(notification,
{
enable: { $set: true },
message: { $set: ErrorMessage.CODE_0008.msg },
level: { $set: ErrorMessage.CODE_0008.level }
}));
} else {
if (operation === "ADD") {
addAppointment({
appointment: appointment,
clientIdentifier: appointment.resource?.clientIdentifier,
coachIdentifier: customerIdentifier
}, {
onSuccess: () => {
queryClient.invalidateQueries(["getCoachAppointments", customerIdentifier]);
setOpenDialog(false);
},
onError: (error) => {
logError("Appointments", "useMutation addAppointment", "Error Details:", error.response.data.detail);
const errorCode = ErrorMessage.fromCode(error.response.data.code);
setNotification(update(notification,
{
enable: { $set: true },
message: { $set: errorCode.msg },
level: { $set: errorCode.level }
}));
}
}
);
}
if (operation === "EDIT/DELETE") {
editAppointment.mutate({
appointmentIdentifier: appointment.id,
appointment: appointment
}, {
onSuccess: () => {
queryClient.invalidateQueries(["getCoachAppointments", customerIdentifier]);
setOpenDialog(false);
},
onError: (error) => {
logError("Appointments", "useMutation editAppointment", "Error Details:", error.response.data.detail);
const errorCode = ErrorMessage.fromCode(error.response.data.code);
setNotification(update(notification,
{
enable: { $set: true },
message: { $set: errorCode.msg },
level: { $set: errorCode.level }
}));
}
}
);
}
}
}
};
const deleteHandler = () => {
deleteAppointment({
appointmentIdentifier: appointment.id
}, {
onSuccess: () => {
queryClient.invalidateQueries(["getCoachAppointments", customerIdentifier]);
setOpenDialog(false);
},
onError: (error) => {
logError("Appointments", "useMutation deleteAppointment", "Error Details:", error.response.data.detail);
const errorCode = ErrorMessage.fromCode(error.response.data.code);
setNotification(update(notification,
{
enable: { $set: true },
message: { $set: errorCode.msg },
level: { $set: errorCode.level }
}));
}
});
};
const doubleClickSlotHandler = (slot) => {
setOperation("EDIT/DELETE");
let dateTimeZoneStart;
let dateTimeZoneEnd;
let allDay = false;
//Entire day event
if (slot?.allDay) {
dateTimeZoneStart = getTimezoneDateTime(slot.start);
dateTimeZoneEnd = getTimezoneDateTime(slot.start)
.add(1, "days")
.subtract(1, "seconds");
allDay = true;
} else {
//Select the first and the last date
dateTimeZoneStart = getTimezoneDateTime(slot.start);
dateTimeZoneEnd = getTimezoneDateTime(slot.end);
}
setAppointment(update(appointment, {
id: { $set: slot.id },
title: { $set: slot.title },
dttmStarts: { $set: dateTimeZoneStart },
dttmEnds: { $set: dateTimeZoneEnd },
allDay: { $set: allDay },
resource: {
notes: { $set: slot.resource?.notes },
price: { $set: slot.resource?.price },
clientIdentifier: { $set: slot.resource?.clientIdentifier }
}
}));
setOpenDialog(true);
};
const selectSlotHandler = (slots) => {
setOperation("ADD");
let dateTimeZoneStart;
let dateTimeZoneEnd;
let allDay = false;
//Selected entire day
if (slots.length === 1) {
dateTimeZoneStart = getTimezoneDateTime(slots[0]);
dateTimeZoneEnd = getTimezoneDateTime(slots[0])
.add(1, "days")
.subtract(1, "seconds");
allDay = true;
} else {
//Select the first and the last date
dateTimeZoneStart = getTimezoneDateTime(slots[0]);
dateTimeZoneEnd = getTimezoneDateTime(slots[slots.length - 1]);
}
setAppointment(update(appointment, {
id: { $set: null },
title: { $set: "" },
dttmStarts: { $set: dateTimeZoneStart },
dttmEnds: { $set: dateTimeZoneEnd },
allDay: { $set: allDay },
resource: {
notes: { $set: "" },
price: { $set: 0.0 },
clientIdentifier: { $set: null }
}
}));
setOpenDialog(true);
};
return (
<Page
title={"Appointments"}
isError={clientsCoach.isError || appointments.isError}
isLoading={clientsCoach.isFetching || appointments.isFetching}>
<Card className={clsx(classes.calendarCard)}>
<CardHeader
title="Appointments"
className={clsx(classes.calendarCardHeader)}
/>
<Divider />
<CardContent className={clsx(classes.calendarCard, classes.calendarCardContent)}>
<BigCalendar
view={calendarView}
events={appointments.data}
localizer={localizer}
doubleClickSlotHandler={doubleClickSlotHandler}
selectSlotHandler={selectSlotHandler}
onView={(value) => setCalendarView(value)}
/>
</CardContent>
</Card>
<FormDialog
submitHandler={handleSubmit}
dialogTitle={operation === "ADD" ? "New Appointment" : "Edit Appointment"}
dialogDescription="Please complete the following fields below:"
open={openDialog}
deleteHandler={operation === "EDIT/DELETE" ? deleteHandler : null}
okHandler={okDialogHandler}
closeHandler={() => setOpenDialog(false)}>
<Grid
container
spacing={1}
direction="row">
<Grid
item
xs={12}
md={12}>
<SearchClient
clients={!clientsCoach.isLoading ? clientsCoach?.data.clientsCoach : []}
clientDefault={appointment.resource?.clientIdentifier}
disabled={operation === "EDIT/DELETE"}
searchSelectedHandler={(newValue) => {
setAppointment(update(appointment, {
title: { $set: newValue ? `${newValue.firstname} ${newValue.lastname}` : "" },
resource: {
clientIdentifier: { $set: newValue.identifier }
}
}));
}}
error={Boolean(!appointment.resource?.clientIdentifier)}
margin="dense"
inputRef={register("client")}
/>
</Grid>
<Grid
item
xs={12}
md={6}
>
<KeyboardDateTimePicker
autoOk
fullWidth
name="dttmStarts"
label="Starts"
inputVariant="outlined"
inputRef={register("dttmStarts")}
onChange={(newDate) => {
logDebug("Appointments", "onChange KeyboardDateTimePicker", "New Date", newDate);
setAppointment(update(appointment, {
dttmStarts: { $set: newDate }
}));
}}
error={Boolean(!appointment.dttmStarts)}
value={appointment.dttmStarts}
/>
</Grid>
<Grid
item
xs={12}
md={6}
>
<KeyboardDateTimePicker
autoOk
fullWidth
name="dttmEnds"
label="Ends"
inputVariant="outlined"
inputRef={register("dttmEnds")}
onChange={(newDate) => {
logDebug("Appointments", "onChange KeyboardDateTimePicker", "New Date", newDate);
setAppointment(update(appointment, {
dttmEnds: { $set: newDate }
}));
}}
error={Boolean(!appointment.dttmEnds)}
value={appointment.dttmEnds}
variant="outlined"
/>
</Grid>
<Grid
item
xs={12}
md={12}
>
<TextField
fullWidth
label="Price"
name="price"
type="number"
inputProps={{
step: 0.05,
min: 0
}}
InputProps={{
startAdornment: <InputAdornment position="start">£</InputAdornment>
}}
onChange={(event) => {
setAppointment(update(appointment, {
resource: {
price: { $set: event.target.value }
}
}));
}}
value={appointment.resource?.price}
error={Boolean(!appointment.resource?.price)}
margin="dense"
inputRef={register("price")}
variant="outlined"
/>
</Grid>
<Grid
item
xs={12}
md={12}
>
<TextField
fullWidth
label="Notes"
name="notes"
margin="dense"
inputRef={register("notes")}
onChange={(event) => {
setAppointment(update(appointment, {
resource: {
notes: { $set: event.target.value }
}
}));
}}
value={appointment.resource?.notes}
variant="outlined"
/>
</Grid>
{notification.enable
? (
<Grid item xs={12}>
<Notification
collapse
open={notification.enable}
openHandler={() => setNotification(update(notification,
{
enable: { $set: false }
}))
}
level={notification.level}
message={notification.message}
/>
</Grid>
)
: null}
</Grid>
</FormDialog>
</Page>
);
}
Example #2
| Source File: ModalContent.js From Doto with MIT License | 4 votes |
|
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>
);
}
Example #3
| Source File: UpdateModalContent.js From Doto with MIT License | 4 votes |
|
UpdateModalContent = props => {
const classes = useStyles();
const [selectedName, setSelectedName] = useState(props.taskToUpdate.title);
const [selectedDescription, setSelectedDescription] = useState(props.taskToUpdate.description);
const [selectedDueDate, setSelectedDueDate] = useState(props.taskToUpdate.dueDate);
const [selectedEarliestDate, setSelectedEarliestDate] = useState(props.taskToUpdate.earliestDate);
// 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(props.taskToUpdate.location);
const [selectedPriority, setSelectedPriority] = useState("");
const [selectedReminder, setSelectedReminder] = useState("");
const [dueDateValid, setDueDateValid] = useState(props.taskToUpdate.dueDate > new Date());
const [earliestDateValid, setEarliestDateValid] = useState(props.taskToUpdate.earliestDate >= new Date());
const [selectedCategory, setSelectedCategory] = useState("");
useEffect(() => {
setSelectedName(props.taskToUpdate.title || "");
setSelectedDescription(props.taskToUpdate.description || "");
setSelectedDueDate(props.taskToUpdate.dueDate || "");
setSelectedDuration(convertMinutesToDateTime(props.taskToUpdate.duration));
setSelectedTravelTime(convertMinutesToDateTime(props.taskToUpdate.travelTime));
setSelectedLocation(props.taskToUpdate.location || "");
setSelectedCategory(props.taskToUpdate.category || "");
setSelectedPriority(props.taskToUpdate.priority || "");
setSelectedReminder(props.taskToUpdate.reminderType || "");
setSelectedEarliestDate(props.taskToUpdate.earliestDate || "");
}, [props.taskToUpdate]);
// ----- 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()) {
setSelectedEarliestDate(date);
setEarliestDateValid(true);
} else {
setSelectedEarliestDate("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);
};
const convertMinutesToDateTime = minutes => {
const date = new Date();
date.setMinutes(minutes % 60);
date.setHours((minutes - (minutes % 60)) / 60);
return date;
};
// ----- END HANDLERS FOR INPUT FIELDS -----
// Task variables passed into calendar.js to add new task to the calendar
const handleUpdate = event => {
const task = {
taskId: props.taskToUpdate.taskId,
title: selectedName,
description: selectedDescription,
dueDate: selectedDueDate,
earliestDate: selectedEarliestDate,
duration: selectedDuration.getHours() * 60 + selectedDuration.getMinutes(),
travelTime: selectedTravelTime.getHours() * 60 + selectedTravelTime.getMinutes(),
location: selectedLocation,
priority: selectedPriority,
reminder: selectedReminder,
category: selectedCategory,
};
props.onTaskUpdated(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}
defaultValue={selectedName}
/>
</div>
<div>
<TextField
className="text-area group-spacing"
id="standard-basic"
label="Task description"
onChange={handleDescriptionChange}
defaultValue={selectedDescription}
/>
</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}
defaultValue={selectedLocation}
/>
</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>
</div>
</form>
</div>
<div id="add-button">
<Button
variant="contained"
color="default"
onClick={handleUpdate}
disabled={!(dueDateValid && earliestDateValid)}
>
Update
</Button>
</div>
</div>
);
}
