/
index.js
43 lines (38 loc) · 1.14 KB
/
index.js
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
import React from 'react'
import { format } from 'date-fns'
import { Position } from '@blueprintjs/core'
import { DateInput, TimePrecision } from '@blueprintjs/datetime'
import PropTypes from 'prop-types'
const DateTimeInput = ({ date, isAllDay, onSelect }) => {
const minDateTime = new Date()
const formatDate = value =>
format(value, `MM/DD/YYYY${isAllDay ? '' : ' hh:mm a'}`)
const timePrecision = isAllDay ? undefined : TimePrecision.MINUTE
return (
<div>
<DateInput
closeOnSelection={isAllDay}
canClearSelection={false}
placeholder="When? *"
minDate={minDateTime}
inputProps={{ readOnly: true }}
formatDate={formatDate}
parseDate={str => new Date(str)}
timePrecision={timePrecision}
timePickerProps={{ useAmPm: true }}
popoverProps={{ position: Position.TOP }}
onChange={onSelect}
value={date}
/>
</div>
)
}
DateTimeInput.propTypes = {
date: PropTypes.instanceOf(Date),
isAllDay: PropTypes.bool.isRequired,
onSelect: PropTypes.func.isRequired,
}
DateTimeInput.defaultProps = {
date: null,
}
export default DateTimeInput