配置 React 输入日期类型的日期格式

【问题标题】：Configure Date Format of React Input Date-type配置 React 输入日期类型的日期格式
【发布时间】：2020-07-10 12:26:49
【问题描述】：

我有一个来自 reactstrap 的<Input/>，它接受日期。我正在使用 moment.js 来解析我的日期。虽然我希望日期的格式本地化。

这是我的代码：

<Input
   bsSize="lg"
   type="date"
   name="date"
   value={moment(this.state.birthDate).locale('en').format("LLLL")}
   onChange={this.handleBirthDateChange}
/>

虽然当我尝试选择我的日期输入时，它不接受选择的日期。

【问题讨论】：

您遇到了什么问题？
使用这个 {moment(this.state.birthDate).locale('en').format("LLLL")} 不会接受我输入的日期
你会发布handleBirthDateChange吗？

标签： date input momentjs locale reactstrap

【解决方案1】：

Moment 将是一个对象，您需要将其格式化为 ISO 标准字符串，即 HTML 的日期类型

试试这个moment().format('YYYY-MM-DD')

沙盒：https://codesandbox.io/s/musing-mclaren-tuqz0

这可能会帮助您入门

import React from 'react'
import ReactDOM from 'react-dom'
import moment from 'moment'
import {Input} from 'reactstrap'
import 'bootstrap/dist/css/bootstrap.css'

export class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      birthDate: moment()
        .locale('en')
        .format('YYYY-MM-DD')
    }
  }
  handleChange = e => {
    this.setState({birthDate: e.target.value})
  }

  render() {
    let {birthDate} = this.state
    return (
      <>
        <Input
          bsSize="lg"
          type="date"
          name="date"
          value={birthDate}
          onChange={this.handleChange}
        />
      </>
    )
  }
}
ReactDOM.render(<App />, document.getElementById('root'))

【讨论】：