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>

• javascript
• reactjs
• bootstrap-datepicker

Share Improve this question Follow asked Dec 9, 2016 at 14:49 VikitaVikita 26166 silver badges1616 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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