如何在 React-bootstrap-daterangepicker 中更改美国默认日期格式输入字段
How to change the US default dateformat input fields in React-bootstrap-daterangepicker
我是 React 的新手,Javascript 遇到以下问题:我需要在我的 React-bootstrap-daterangepicker 中更改默认的美国日期格式。我从 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>
根据 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.
希望对您有所帮助!
我设法通过在组件的 componentWillMount() 方法中初始化语言环境常量来解决我的问题,即
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}
...
我是 React 的新手,Javascript 遇到以下问题:我需要在我的 React-bootstrap-daterangepicker 中更改默认的美国日期格式。我从 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>
根据 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.
希望对您有所帮助!
我设法通过在组件的 componentWillMount() 方法中初始化语言环境常量来解决我的问题,即
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}
...