10 examples of 'react datepicker npm' in JavaScript

8
export 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
       setSelected(date)}
29
        ref={ref}
30
      />
31
      {error &amp;&amp; <span>{error}</span>}
32
    &lt;/&gt;
33
  );
34
}

25
export 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
    
46
      {date.toDateString()}
47
    
48
  );
49
}

108
function 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
}

119
function 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
    }

16
export 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
    
27
      
28
        
29
      
30
    
31
  );
32
}

6
export default function DatePicker(props) {
7
  const options = assign({}, {
8
    weekStartDay: 1,
9
    weekDayNames: [
10
      <span>Su</span>,
11
      'Mo',
12
      'Tu',
13
      'We',
14
      'Th',
15
      'Fr',
16
      <span>Sa</span>,
17
    ],
18
    highlightWeekends: true,
19
    hideFooter: true,
20
  }, props);
21
22
  return (
23
    
24
  );
25
}

127
private 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
}

159
static 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
}

33
function 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
		
46
	);
47
}

15
componentDidMount() {
16
  const {defaultValue} = this.props;
17
  if (defaultValue) {
18
    this.setState({date: new Date(...defaultValue.split('-'))});
19
  }
20
}