# Date/Time Pickers

**File Name:** DateTimePickers.tsx

**Imports:**
- Date/Time Pickers from Material-UI: [Date/Time Pickers Doc](https://material-ui.com/components/pickers/#date-time-pickers)
    - [Date Picker Doc](https://material-ui-pickers.dev/demo/datepicker)
    - [Time Picker Doc](https://material-ui-pickers.dev/demo/timepicker)
- { KeyboardTimePicker, KeyboardDatePicker } from '@material-ui/pickers'
    - [KeyboardTimePicker API](https://material-ui-pickers.dev/api/KeyboardTimePicker)
    - [KeyboardDatePicker API](https://material-ui-pickers.dev/api/KeyboardDatePicker)

**Example:**
- On Create Schedule Page:
    - Start Date
    - End Date
    - Selection Start
    - Selection End
- On Edit Schedule Page:
    - Start Date
    - End Date
    - Selection Start
    - Selection End
- On Create Time Slot Page:
    - Start Time
    - End Time
    - Start Date
    - End Date
- On Edit Time Slot Page:
    - Start Time
    - End Time
    - Start Date
    - End Date
- On Create Shifts Page:
    - Start Time
    - End Time
- On Edit Shifts Page:
    - Start Time
    - End Time

**Description:**
- Pages:
    - Create Schedule page
    - Edit Schedule page
    - Create Time Slot page
    - Edit Time Slot page
    - Create Shifts page
    - Edit Shifts page
- Allows an admin to select time and date on related fields

**I/O:** 
- Clicking on the Start Time and End Time fields allow manual entering of a time.
- Clicking on the Start Date and End Date fields allow manual entering of dates.
- Clicking on Selection Start and Selection End allow manual entering of dates.

**Code Example**

```typescript
import React, { useState } from 'react';
import { KeyboardDatePicker, KeyboardTimePicker } from '@material-ui/pickers';

export default function DateTimePicker(props: any)
{
    const [selectedDate, handleDateChange] = useState<Date | null>(new Date());

    const handleDateChange = (date: Date | null) => {
        setSelectedDate(date);
    };

    const time = props.time
    
    if (time)
    {
        return(
            <div>
                <KeyboardTimePicker 
                    clearble
                    value={selectedDate}
                    onChange={handleDateChange}
                    label={props.name}
                />
            </div>
        )
    }
    else
    {
        return(
            <div>
                <KeyboardDatePicker
                    clearable
                    value={selectedDate}
                    onChange={handleDateChange}
                    format="MM/dd/yyyy"
                    label={props.name}
                />
            </div>
        )
    }
}
```

**Create Schedule Page**

<img src="../../images/components/DateTimePickers-CreateSchedule.png" width="500"/>

**Edit Schedule Page**

<img src="../../images/components/DateTimePickers-EditSchedule.png" width="500"/>

**Create Time Slot Page**

<img src="../../images/components/DateTimePickers-CreateTimeSlot.png" width="500"/>

**Edit Time Slot Page**

<img src="../../images/components/DateTimePickers-EditTimeSlot.png" width="500"/>

**Create Shifts Page**

<img src="../../images/components/DateTimePickers-CreateShifts.png" width="500"/>

**Edit Shifts Page**

<img src="../../images/components/DateTimePickers-EditShifts.png" width="500"/>