Press n or j to go to the next uncovered block, b, p or k for the previous block.
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 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 | 9x 9x 9x 13x 13x 13x 1x 1x 1x 13x 13x 9x 9x | import PropTypes from 'prop-types'; import React from 'react'; import DayPicker from 'react-day-picker'; import MomentLocaleUtils, { formatDate, parseDate, } from 'react-day-picker/moment'; import DayPickerInput from 'react-day-picker/DayPickerInput'; import { removeSomeProps } from 'src/utils/componentHelpers'; import { formatForOnChange } from './utils'; import { DEFAULT_DATE_FORMAT, DEFAULT_DATE_VALUE_FORMAT } from './constants'; const propsToTrim = null; const dayPickerInputStyle = { container: { input: { padding: '1rem', }, }, }; export const DateFieldComponent = props => { const { calendarOnly, format, locale, onChange, value, valueFormat, } = props; const handleDayPickerClick = selectedDay => { const formattedDay = formatForOnChange(selectedDay, valueFormat, locale); if (onChange) { onChange({ formattedDay, selectedDay, }); } }; const handleOnChange = (selectedDay, modifiers, dayPickerInput) => { const formattedDay = formatForOnChange(selectedDay, valueFormat, locale); Eif (onChange) { onChange({ dayPickerInput, formattedDay, modifiers, selectedDay, }); } }; Iif (calendarOnly) { return ( <DayPicker locale={locale} localeUtils={MomentLocaleUtils} onDayClick={handleDayPickerClick} {...removeSomeProps(props, propsToTrim)} /> ); } return ( <DayPickerInput format={format} formatDate={formatDate} locale={locale} localeUtils={MomentLocaleUtils} onDayChange={handleOnChange} parseDate={parseDate} style={dayPickerInputStyle} value={value} {...removeSomeProps(props, propsToTrim)} /> ); }; DateFieldComponent.propTypes = { calendarOnly: PropTypes.bool, format: PropTypes.string, locale: PropTypes.string, onChange: PropTypes.func, value: PropTypes.any, valueFormat: PropTypes.string, }; DateFieldComponent.defaultProps = { calendarOnly: false, format: DEFAULT_DATE_FORMAT, locale: 'en', onChange: () => {}, // moment-day-picker prefers undefined as the value for no date value: undefined, valueFormat: DEFAULT_DATE_VALUE_FORMAT, }; |