React-bootstrap-daterangepickerで米国のデフォルトのdateformat入力フィールドを変更する方法

Question

私はReactとJavascriptを使い慣れていないので、次の問題があります。私のReact-bootstrap-daterangepickerでデフォルトの米国のdateformatを変更する必要があります。私は、ロケールオブジェクトをmomentjsサイトから変更する方法についていくつかの情報を見つけましたが、実装方法を正確にはわかりません。また、dateFormat = "DD/MM/YYYY"（およびformat = "DD/MM/YYYY" ）属性をDatePickerに渡しますが、成功しません。 私のリアクションバージョンは15.4.0 ありがとうございます！ probably official siteにターンポイントで、startDateなど、一緒に、あなたはsetStateに渡すことができそうですoriginal project、を指しdocumentationによると、

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

私は私のcompoentすなわち

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() 

    }); 
    } 

、その後、日付ピッカータグのロケール属性を設定でcomponentWillMount（）メソッドでロケールのconstを初期化することによって、私の問題を解決するために管理：

<DatePicker locale={this.state.locale} 

...

Answer 2

one of the examplesに示すように、locale: {format: 'DD-MM-YYYY'}のようなサブオブジェクトであるlocaleである。

希望すると便利です。