如何在反应日期选择器格式中获取价值 yyyy-mm-dd答案

【问题标题】：how to get value in react datepicker format yyyy-mm-dd如何在反应日期选择器格式中获取价值 yyyy-mm-dd
【发布时间】：2020-05-02 21:22:10
【问题描述】：

我有一个datepicker react js组件，格式是yyyy-MM-dd，但是为什么我只使用数据时它的时间值无效

const date = moment().format("yyyy-MM-dd");

class Register extends Component {

  constructor(props) {
    super(props)
    this.state = {
      BIRTH_OF_DATE:date
    }
  }

  render(){
   return(
     <DatePicker
      showPopperArrow={false}
      selected={this.state.BIRTH_OF_DATE}
      onChange={(newDate) => this.setState({BIRTH_OF_DATE:newDate})}
    />
   )
  }
}

【问题讨论】：

标签： reactjs date datepicker

【解决方案1】：

您可以使用dateFormat 属性，但在这种情况下，由于格式错误，这将不起作用：

moment().format('yyyy-MM-dd')
"yyyy-01-Th"

这将是正确的形式

 moment().format('YYYY-MM-dd')
    "2020-01-Th"

然后试试：

 <DatePicker
  showPopperArrow={false}
  selected={this.state.BIRTH_OF_DATE}
  onChange={(newDate) => this.setState({BIRTH_OF_DATE:newDate})}
  dateFromat='YYYY-MM-dd' />

编辑：

class Register extends Component {

  constructor(props) {
    super(props)
    this.state = {
      BIRTH_OF_DATE: moment().format("yyyy-MM-dd")
    }
  }

  render(){
   return(
     <DatePicker
      showPopperArrow={false}
      selected={this.state.BIRTH_OF_DATE}
      onChange={(newDate) => this.setState({BIRTH_OF_DATE: moment(newDate).format("yyyy-MM-dd")})}
    />
   )
  }
}

【讨论】：

我已经完成了它并且它有效，但是我如何更改为 yyyy-mm-dd 格式？在此之前我 console.log 结果是这样的 Sun Jan 26 2020 00:00:00 GMT+0700 (Western Indonesia Time)，我想得到的应该是这样的 2020-01-16 非常感谢
@MuhamadRahmatSetiawan - 我知道我参加聚会迟到了，但为什么不使用 react-datepicker 中的 dateFormat 属性。更不用说你可以一起取消过度膨胀的momentjs。 dateFormat={"yyyy/MM/dd"}

【解决方案2】：

我认为您需要进一步澄清您所面临的问题。假设您使用的是react-datepicker 包，我想我已经找到了问题所在。

Here is the list of props of react-datepicker. 据说selected 属性应该是Date 对象。您正在使用 moment 对象，这应该是问题所在。我的建议是，首先使用Date 对象，然后将输出更改为您想要的任何格式。希望我说的是你所面临的问题，我的回答对你有帮助！

另外，如果我理解正确，您需要输出采用上述格式。为此，您可以使用 dateFormat 道具，并提供您想要使用的正确日期格式。检查如何给出正确的日期格式（moment.js 文档是查看的好地方），例如：mm 和 MM 是不同的。

【讨论】：

【解决方案3】：

你必须在函数handleOnchange中设置onchange={this.handleOnchange}和句柄，你不能在render()上设置setState

【讨论】：

【解决方案4】：

 <DatePicker
   selected={props.date}
   onChange={date => setDate(date)}
   customInput={ <ButtonInput /> }
/>

-------- 按钮输入 ---------

// convert mm/dd/yyyy to dd/mm/yyyy
    const formatDate = (tgl) => {
        var temp = tgl.split('/');
    
        return (temp[1] + '/' + temp[0] + '/' + temp[2]);
    }
    
    // eslint-disable-next-line react/display-name
    const ButtonInputFR = React.forwardRef((props, ref) => (
        <Button outline
            onClick={props.onClick}
            ref={ref}
        >
            <i className="fa fa-fw fa-calendar-o mr-1" />
            { formatDate(props.value) }
        </Button>
    ));
    
    ButtonInputFR.propTypes = {
        onClick: PropTypes.func,
        value: PropTypes.string
    }
    
    export { ButtonInputFR as ButtonInput };

【讨论】：