10 examples of 'react datepicker npm' in JavaScript

Every line of 'react datepicker npm' code snippets is scanned for vulnerabilities by our powerful machine learning engine that combs millions of open source libraries, ensuring your JavaScript code is secure.

All examples are scanned by Snyk Code

By copying the Snyk Code Snippets you agree to
this disclaimer
8export default function ReactDatePicker({ name }) {
9 const ref = useRef(null);
10 const {
11 fieldName, registerField, defaultValue, error,
12} = useField(name);
13 const [selected, setSelected] = useState(defaultValue);
14
15 useEffect(() => {
16 registerField({
17 name: fieldName,
18 ref: ref.current,
19 path: 'props.selected',
20 clearValue: (pickerRef) => {
21 pickerRef.clear();
22 },
23 });
24 }, [ref.current, fieldName]);
25
26 return (
27 <>
28 <DatePicker
29 name={fieldName}
30 selected={selected}
31 onChange={date => setSelected(date)}
32 ref={ref}
33 />
34 {error && <span>{error}</span>}
35 </>
36 );
37}
Important

Use secure code every time

Secure your code as it's written. Use Snyk Code to scan source code in minutes – no build needed – and fix issues immediately. Enable Snyk Code

25export default function DatePicker(props: IProps) {
26 const { defaultDate, onDateChange } = props;
27 const [date, setDate] = useState(defaultDate || new Date());
28
29 const openPicker = async () => {
30 try {
31 // TODO: refactor here
32 const { action, year, month, day } = await DatePickerAndroid.open({
33 date: defaultDate || date
34 });
35 const selectedDate = new Date(year, month, day);
36 setDate(selectedDate);
37 if (action !== DatePickerAndroid.dismissedAction) {
38 onDateChange(selectedDate);
39 }
40 } catch ({ code, message }) {
41 console.warn("Cannot open date picker", message);
42 }
43 };
44 return (
45 <TouchableOpacity onPress={openPicker}>
46 <Text>{date.toDateString()}</Text>
47 </TouchableOpacity>
48 );
49}
108function DatePicker(props) {
109 _classCallCheck(this, DatePicker);
110
111 var _this = _possibleConstructorReturn(this, (DatePicker.__proto__ || Object.getPrototypeOf(DatePicker)).call(this, props));
112
113 _this.state = {
114 locale: 'en-US', // TODO: Get the locale from i18n
115 dateFormat: 'MM/DD/YYYY', // TODO: Get the locale from i18n
116 selectedDate: _DateUtil2.default.createSafeDate(props.selectedDate, 'MM/DD/YYYY')
117 };
118
119 _this.handleChange = _this.handleChange.bind(_this);
120 return _this;
121}
119function DatePicker(props) {
120 _classCallCheck(this, DatePicker);
121
122 // 容器转过的角度
123
124 var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(DatePicker).call(this, props));
125
126 _this.state = {
127 angle: 0,
128 date: _this._productDate(props.date),
129 minDate: _this._productDate(props.minDate),
130 maxDate: _this._productDate(props.maxDate)
131 };
132
133 _this.handleFinishBtnClick = _this.handleFinishBtnClick.bind(_this);
134 _this.handleDateSelect = _this.handleDateSelect.bind(_this);
135 return _this;
136 }
16export default function MuiDatepicker() {
17 const classes = useStyles()
18 // The first commit of Material-UI
19 const [selectedDate, setSelectedDate] = useState(new Date())
20
21 const handleDateChange = date => {
22 setSelectedDate(date)
23 }
24
25 return (
26 <MuiPickersUtilsProvider utils={DateFnsUtils}>
27 <GridItem xs={12} sm={12} md={3}>
28 <KeyboardDatePicker
29 className={classes.noMargin}
30 disableToolbar
31 variant="inline"
32 format="MM/dd/yyyy"
33 margin="normal"
34 id="date-picker-inline"
35 label="当前日期"
36 value={selectedDate}
37 onChange={handleDateChange}
38 KeyboardButtonProps={{
39 'aria-label': 'change date',
40 }}
41 />
42 </GridItem>
43 </MuiPickersUtilsProvider>
44 );
45}
6export default function DatePicker(props) {
7 const options = assign({}, {
8 weekStartDay: 1,
9 weekDayNames: [
10 <span className="dp-weekend">Su</span>,
11 'Mo',
12 'Tu',
13 'We',
14 'Th',
15 'Fr',
16 <span className="dp-weekend">Sa</span>,
17 ],
18 highlightWeekends: true,
19 hideFooter: true,
20 }, props);
21
22 return (
23 <ReactDatePicker { ...options } />
24 );
25}
127private async showDatePicker() {
128 if (this.props.onFocus) {
129 this.props.onFocus();
130 }
131 if (this.state.showDatePicker) {
132 this.setState({
133 showDatePicker: false
134 }, this.onPickerClose);
135 } else {
136 this.setState({
137 showDatePicker: true
138 });
139 await this.showDatePickerAndroid();
140 }
141}
159static getDerivedStateFromProps(nextProps, prevState) {
160 const { selectedDate, value } = nextProps;
161 let nextDateValue = selectedDate;
162
163 // Use the value for a controlled component if one is provided.
164 if (value !== undefined && value !== null) {
165 nextDateValue = value;
166 }
167
168 if (nextDateValue !== prevState.prevPropsSelectedDate) {
169 const nextSelectedDate = DateUtil.createSafeDate(nextDateValue);
170
171 if (nextSelectedDate) {
172 return {
173 selectedDate: nextSelectedDate,
174 prevPropsSelectedDate: nextDateValue,
175 };
176 }
177
178 return {
179 prevPropsSelectedDate: nextDateValue,
180 };
181 }
182
183 return null;
184}
33function KeyboardDatePickerWrapper(props: DatePickerWrapperProps) {
34 const {
35 input: { name, onChange, value, ...restInput },
36 meta,
37 dateFunsUtils,
38 ...rest
39 } = props;
40
41 const showError = ((meta.submitError && !meta.dirtySinceLastSubmit) || meta.error) && meta.touched;
42
43 return pickerProviderWrapper(
44 dateFunsUtils,
45 <MuiKeyboardDatePicker
46 disableToolbar
47 fullWidth={true}
48 autoOk={true}
49 helperText={showError ? meta.error || meta.submitError : undefined}
50 error={showError}
51 variant="inline"
52 format="yyyy-MM-dd"
53 margin="normal"
54 onChange={onChange}
55 name={name}
56 value={(value as any) === '' ? null : value}
57 {...rest}
58 inputProps={restInput}
59 />
60 );
61}
15componentDidMount() {
16 const {defaultValue} = this.props;
17 if (defaultValue) {
18 this.setState({date: new Date(...defaultValue.split('-'))});
19 }
20}

Related snippets