10 examples of 'react date picker npm' in JavaScript

Every line of 'react date picker 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
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}
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

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}
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 }
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}
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}
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}
17constructor(props) {
18 super(props);
19
20 this.state = {
21 isOpen: false,
22 selectedDay: this.makeDate(this.props.defaultValue),
23 };
24 this.datePickerHasFocus = false;
25 this.timeout = {};
26}
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}
14function MaterialUIPickers(props) {
15 // The first commit of Material-UI
16 const [selectedDate, setSelectedDate] = useState(props.initialValue ? props.initialValue : new Date());
17
18 function handleDateChange(date) {
19 setSelectedDate(new Date(date));
20 props.onPassData(new Date(date));
21 }
22
23 return (
24 <div style={{display: 'flex', justifyContent: 'center', margin: 10}}>
25 <MuiPickersUtilsProvider utils={MomentFnsUtils}>
26 <KeyboardDatePicker
27 label={props.label}
28 value={selectedDate}
29 onChange={handleDateChange}
30 />
31 </MuiPickersUtilsProvider>
32 </div>
33 );
34}
24function updateNativeDate(picker) {
25 var year = types.isNumber(picker.year) ? picker.year : picker.android.getYear();
26 var month = types.isNumber(picker.month) ? (picker.month - 1) : Math.max(0, picker.android.getMonth() - 1);
27 var day = types.isNumber(picker.day) ? picker.day : picker.android.getDayOfMonth();
28 picker.date = new Date(year, month, day);
29}

Related snippets