具有自定义格式的 DatePicker 日期输入

Question

我想使用 redux-form 存储我所在州的日期。我使用反应日期选择器。为了使日期选择器与我的 redux-form 兼容，我写了：

import React, { PropTypes } from 'react';
import DatePicker from 'react-datepicker';
import moment from 'moment';
import 'react-datepicker/dist/react-datepicker.css';

    const MyDatePicker = ({ input, meta: { touched, error } }) => (
      <div>
        <DatePicker
          {...input} dateFormat="YYYY-MM-DD"
          selected={input.value ? moment(input.value) : null}
        />
        {
          touched && error &&
          <span className="error">
            {error}
          </span>
        }
      </div>
    );

    MyDatePicker.propTypes = {
      input: PropTypes.shape().isRequired,
      meta: PropTypes.shape().isRequired
    };

    export default MyDatePicker;

问题是，当我选择日期时，我希望它显示为 DD-MM-YYYY，但我希望日期以 YYYY-MM-DD HH:MM:SS 格式保存在我的状态中。这个怎么做？我用了瞬间的格式功能，但它似乎没有用

Answer 1

您应该使用 redux-form 为此提供的

价值生命周期方法

。

使用

parse

格式化来自

react-datepicker

的值以进行存储，使用

format

将存储的值解析回

react-datepicker

以呈现它。例子：

function formatDateForInput(storedDate) {
  // the returned value will be available as `input.value`
  return moment(pickedDate).format('right format for your input')
}

function parseDateForStore(pickedDate) {
  // the returned value will be stored in the redux store
  return moment(storedDate).format('desired format for storage')
}

<Field
  component={ MyDatePicker }
  format={ formatDateForInput }
  parse={ parseDateForStore }
/>

如果这对您不起作用，我建议您检查是否需要在

onChange

和

DatePicker

道具之间放置自定义

input

处理程序，由

redux-form

提供。因为

DatePicker

用来调用

onChange

的值可能是

redux-form

不理解的值。像这样：

const MyDatePicker = ({ input, meta: { touched, error } }) => {

  const onChange = event => {
    const pickedDate = event.path.to.value;
    input.onChange(pickedDate);
  }

  return (
    <div>
      <DatePicker
        dateFormat="YYYY-MM-DD"
        selected={input.value ? moment(input.value) : null}
        onChange={ onChange }
      />
      {
        touched && error &&
        <span className="error">
          {error}
        </span>
      }
    </div>
  );
}

MyDatePicker.propTypes = {
  input: PropTypes.shape().isRequired,
  meta: PropTypes.shape().isRequired
};

export default MyDatePicker;

希望这有帮助！

Answer 2

如果我理解正确，您只需要 2 种不同的格式用于同一日期，一种在 UI 上，另一种保存？

moment(date).format('DD-MM-YYYY')

和

moment(date).format('YYYY-MM-DD HH:MM:SS')

会给你两种格式的日期。

Answer 3

只需使用属性 dateFormat="dd/MM/yyyy"

例子：

<DatePicker 
    selected={startDate} 
    onChange={date => handleChange(date)} 
    dateFormat="DD/MM/YYYY"
/>

Answer 4

我使用以下道具 -mask、inputFormat 和 format - 将默认格式更改为“yyyy-MM-dd”格式。 格式代码“yyyy-MM-dd”很重要，绕过它找到所需的格式。

例子：

<LocalizationProvider dateAdapter={AdapterDateFns} >
   <DatePicker
      label="SomeDate"
      {...register("details_received_date")}
      mask="____-__-__"
      inputFormat="yyyy-MM-dd"
      format="yyyy-MM-dd"
      value={someDate}
      onChange={(newValue) => {setSomeDate(newValue);}}
      renderInput={(params) => <TextField {...params} />}
      />
</LocalizationProvider>

这将显示在前端并以所需格式提供值。 希望这会有所帮助。

Answer 5

试试这个

inputFormat="日/月/年"

const [value, setValue] = useState(null);

<LocalizationProvider dateAdapter={AdapterDayjs}>
    <DatePicker
        label="DatePicker Example"
        value={value}
        onChange={(newValue) => {
          setValue(newValue);
        }}
        renderInput={(params) => <TextField {...params} />}
        inputFormat="DD/MM/YYYY"
      />

</LocalizationProvider>

Answer 6

只需使用这个道具

dateFormat="日/月/年"

“dd”代表日期， “MM”代表月份， "yyyy" 代表年

<DatePicker
  selected={startDate}
  onChange={(date) => setStartDate(date)}
  placeholderText="Click to select a date"
  dateFormat="dd/MM/yyyy"
/>