Question

我是React和Javascript的新手并且遇到以下问题：我需要在我的React-bootstrap-daterangepicker中更改默认的US dateformat。我找到了一些关于从momentjs站点更改语言环境对象的信息，但不确定如何实现它...我还尝试添加dateFormat =＆＃34; DD / MM / YYYY＆＃34; （并格式化=＆＃34; DD / MM / YYYY＆＃34;）属于我的DatePicker，但没有成功。我的React版本是15.4.0 提前致谢！

＆＃13;

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;

＆＃13;

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

＆＃13;

Answer 1

根据引用documentation的original project，而probably official site又指向one of the examples，您似乎可以传递给<nav class="navbar navbar-default navbar navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div>  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div> </div> </nav>以及{setState 1}}等startDate子对象，例如locale，如{{3}}所示。

希望这有帮助！

Answer 2

我设法通过在我的compoent中的componentWillMount（）方法中初始化locale 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}

...

如何更改React-bootstrap-daterangepicker中的US默认日期格式输入字段

2 个答案: