如何在React-bootstrap-daterangepicker中更改美国默认dateformat输入字段

Question

我是React和Javascript的新手，并且存在以下问题：我需要在React-bootstrap-daterangepicker中更改默认的美国dateformat。 我在momentjs网站上找到了一些有关更改语言环境对象的信息，但不确定如何实现...我还尝试添加dateFormat =“ DD / MM / YYYY”（和format =“ DD / MM / YYYY” ）属性归为我的DatePicker，但没有成功。 我的React版本是15.4.0预先感谢！

 import React from 'react'; import { ControlLabel, FormGroup, HelpBlock } from 'react-bootstrap'; import DatePicker from "react-bootstrap-daterangepicker"; import moment from 'moment'; class DateRangePicker extends React.Component { componentWillMount() { const value = new Date().toISOString().replace("T", " ").replace("Z", ""); const date = value; this.setState({ value: date, startDate: moment(), endDate: moment() }); } handleChange(e, datepicker) { this.setState({ startDate: datepicker.startDate, endDate: datepicker.endDate, value: datepicker.startDate + " to " + datepicker.endDate }); const label = datepicker.startDate + " to " + datepicker.endDate; const {startDate, endDate} = datepicker; this.props.onSelect(startDate, endDate) } render() { let start = moment(this.state.startDate).format("DD/MM/YYYY"); let end = moment(this.state.endDate).format("DD/MM/YYYY"); let dateRange = start + ' to ' + end; return ( <fieldset className="form-group form-group--small pull-left"> <legend className="hidden">Choose a date range</legend> <FormGroup> <ControlLabel className="hidden" htmlFor="dateRange"> Date range:</ControlLabel> <DatePicker readOnly="false" startDate={this.start} endDate={this.end} onApply={this .handleChange .bind(this)} onChange={this .handleChange .bind(this)}> <div className="input-group input-group-small"> <div className="input-group-addon"> <i className="fa fa-calendar"></i> </div> <input type="text" id="dateRange" className="form-control" value={dateRange} /> </div> </DatePicker> <HelpBlock className="hidden">Help</HelpBlock> </FormGroup> </fieldset> ); } } export default DateRangePicker; 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 

Answer 1

根据引用原始项目的文档 ，该文档又指向可能的官方网站 ，似乎您可以将setState以及startDate等传递给locale子对象，如locale: {format: 'DD-MM-YYYY'} ，如示例之一所示 。

希望这可以帮助！

Answer 2

我设法通过在组件即componentWillMount（）方法中初始化语言环境const来解决我的问题

    componentWillMount() {
    const value = new Date().toISOString();
    const date = value;
    const locale = locale;

    this.setState({
        value: date,
        locale: {
            'format': 'DD/MM/YYYY'
        },
        startDate: moment(),
        endDate: moment()

    });
   }

然后为DatePicker标记设置一个语言环境属性：

 <DatePicker  locale={this.state.locale}

...