-
Notifications
You must be signed in to change notification settings - Fork 1
/
DatePicker.jsx
72 lines (67 loc) · 1.87 KB
/
DatePicker.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
// DO NOT USE MOMENT FOR YOUR TIME CALCULATIONS
// THESE GUYS PROVIDE LOTS OF USEFUL FUNCTIONS
// https://material-ui-pickers.dev/guides/formats
import React from 'react';
import PropTypes from 'prop-types';
import moment from 'moment';
import blueGrey from '@material-ui/core/colors/blueGrey';
import { createMuiTheme } from '@material-ui/core';
import { ThemeProvider } from '@material-ui/styles';
import {
DatePicker,
KeyboardDatePicker,
} from '@material-ui/pickers';
import {
isMobile,
isDesktop,
} from 'utilities';
const defaultMaterialTheme = createMuiTheme({
palette: {
primary: blueGrey,
},
});
function EntryFormDatePicker({ selectedDate, handleDateChange }) {
return (
<>
<ThemeProvider theme={defaultMaterialTheme}>
{isMobile
&& (
<DatePicker
autoOk
disablePast
format='MM/DD/YYYY'
label='Release Date:'
minDateMessage='Selected date is in the past'
value={selectedDate}
onChange={handleDateChange}
/>
)}
{isDesktop
&& (
<KeyboardDatePicker
autoOk
disablePast
format='MM/DD/YYYY'
label='Release Date:'
value={selectedDate}
minDateMessage='Selected date is in the past'
KeyboardButtonProps={{ margin: 'none' }}
InputAdornmentProps={{ position: 'start' }}
onChange={handleDateChange}
/>
)}
</ThemeProvider>
</>
);
}
EntryFormDatePicker.defaultProps = {
selectedDate: new Date(),
};
EntryFormDatePicker.propTypes = {
handleDateChange: PropTypes.func.isRequired,
selectedDate: PropTypes.oneOfType([
PropTypes.instanceOf(Date),
PropTypes.instanceOf(moment),
]),
};
export default React.memo(EntryFormDatePicker);