Как изменить поля ввода данных даты по умолчанию в React-bootstrap-daterangepicker

Question

Я новичок в React and Javascript и имею следующую проблему: мне нужно изменить формат даты по умолчанию в моем React-bootstrap-daterangepicker. Я нашел некоторую информацию об изменении объекта locale с сайта 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

мне удалось решить мою проблему путем инициализации локали сопзЬ в componentWillMount() метод в моем 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() 

    }); 
    } 

, а затем установив атрибут языка для тега DatePicker:

<DatePicker locale={this.state.locale} 

...

Answer 2

Согласно documentation, которая относится к original project, который, в свою очередь, указывает на probably official site, кажется, вы могли бы перейти к setState, наряду с startDate и тому подобное, в locale под-объект, такой как locale: {format: 'DD-MM-YYYY'}, как показано в one of the examples.

Надеюсь, это поможет!