I'm new to React and Javascript and have the following problem: I need to change the default US dateformat in my React-bootstrap-daterangepicker. I found some info about changing the locale object from the momentjs site, but not sure how exactly to implement it... I also tried adding a dateFormat="DD/MM/YYYY" (and format="DD/MM/YYYY") attribute to my DatePicker but with no success. My React version is 15.4.0 Thanks in advance!
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 {
ponentWillMount() {
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=".1.0/react.min.js"></script>
<script src=".1.0/react-dom.min.js"></script>I'm new to React and Javascript and have the following problem: I need to change the default US dateformat in my React-bootstrap-daterangepicker. I found some info about changing the locale object from the momentjs site, but not sure how exactly to implement it... I also tried adding a dateFormat="DD/MM/YYYY" (and format="DD/MM/YYYY") attribute to my DatePicker but with no success. My React version is 15.4.0 Thanks in advance!
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 {
ponentWillMount() {
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./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>2 Answers
Reset to default 2I managed to solve my issue by initializing the locale const in the ponentWillMount() method in my poent i.e
ponentWillMount() {
const value = new Date().toISOString();
const date = value;
const locale = locale;
this.setState({
value: date,
locale: {
'format': 'DD/MM/YYYY'
},
startDate: moment(),
endDate: moment()
});
}
and then setting a locale attribute for the DatePicker tag:
<DatePicker locale={this.state.locale}
...
According to the documentation, which refers to the original project, which in turn points to the probably official site, it seems you could pass to setState, along with startDate and the like, a locale sub-object such as locale: {format: 'DD-MM-YYYY'}, as illustrated in one of the examples.
Hope this helps!