如何在 RN 中禁用未來的年月日？

Question

我知道有很多相同的問題，但它們都沒有按我的需要工作，即將在 React Native Date Picker 中禁用未來的 YYYY-MM-DD：

    <DatePicker
      modal
      open={open}
      date={date}
      mode="date"
      onConfirm={updateFilter}
      maximumDate={new Date()}
      onCancel={() => {
        setOpen(false)
      }}
      
    />

但它不起作用，未來的月份和日期仍然顯示，只有未來的一年被禁用。 如何禁用所有這些？

Answer 1

根據react-native-date-picker picker 的 repo 上的自述文件， maximumDate需要 YYYY-MM-DD 形式的字符串。 因此，您應該實例化一個新的日期 object 並將其存儲在一個變量中，您可以在該變量上調用訪問這些日期部分所需的各種方法。 然后，您可以將該道具傳遞一個新的日期 object，並添加您需要的字符串片段，如下所示：

const currDate = new Date();
<DatePicker>
    ...
    maximumDate={new Date(`${currDate.getFullYear()}-${currDate.getMonth() + 1}-${currDate.getDate()}`)}
</DatePicker>

Answer 2

主要的 DatePicker 組件：

import React from 'react';
import Grid from '@material-ui/core/Grid';
import DateFnsUtils from '@date-io/date-fns';
import {
  MuiPickersUtilsProvider,
  KeyboardDatePicker,
} from '@material-ui/pickers';

export default function DatePicker(props) {

  const { name, value, label, onChange, error, helperText, ...other } = props;

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <Grid container justifyContent="space-around">
        <KeyboardDatePicker
          margin="normal"
          id="date-picker-dialog"
          label={label}
          name={name}
          value={value}
          onChange={onChange}
          format="dd/MM/yyyy"
          KeyboardButtonProps={{
            'aria-label': 'change date',
          }}
          {...other}
        />
      </Grid>
    </MuiPickersUtilsProvider>
  );
}

調用 DatePicker 組件：

<DatePicker
    label="Check in date"
    name="to_let_from"
    value={formik.values.to_let_from}
    minDate={updateRecord !== null ? updateRecord['to_let_date'] : new Date()}
    maxDate={new Date().setDate(new Date().getDate() + 60)}
    onChange={value => { formik.setFieldValue("to_let_date", value)}}
    onBlur={formik.handleBlur}
    fullWidth
/>

我在這里使用的版本：

@date-io/date-fns": "^1.3.13"

@material-ui/core": "^4.11.3"

@material-ui/pickers": "^3.3.10",

Answer 3

class DatePickerContainer 擴展 React.Component { 構造函數 (props) { super(props) this.state = { startDate: ''

        // Enable this if you want todays date to appear by default
        // startDate: moment()
    };
    this.handleChange = this.handleChange.bind(this);
}

handleChange(date) {
    this.setState({
        startDate: date
    });
}

render() {
    return <DatePicker
        selected={this.state.startDate}
        onChange={this.handleChange}
        placeholderText="MM/DD/YYYY"
    />;
}

}