10 examples of 'react date picker npm' in JavaScript

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
}

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
}

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
    }

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
}

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
}

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
}

17
constructor(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
}

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
}

14
function 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>
25
    
26
        
27
    
28
    </div>
29
  );
30
}

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