diff --git a/src/DatePicker/DatePicker.js b/src/DatePicker/DatePicker.js index 73e06f5b1..b3318613f 100644 --- a/src/DatePicker/DatePicker.js +++ b/src/DatePicker/DatePicker.js @@ -10,12 +10,14 @@ import React, { Component } from 'react'; class DatePicker extends Component { constructor(props) { super(props); - + const ISO_DATE_FORMAT = 'YYYY-MM-DD'; + const formattedDate = props.defaultValue.length > 0 ? + moment(props.defaultValue, ISO_DATE_FORMAT).format(this.getLocaleDateFormat()) : ''; this.state = { hidden: true, - selectedDate: null, + selectedDate: formattedDate.length === 0 ? null : moment(formattedDate, this.getLocaleDateFormat()), arrSelectedDates: [], - formattedDate: '' + formattedDate }; this.calendarRef = React.createRef(); @@ -61,7 +63,7 @@ class DatePicker extends Component { } validateDates = () => { - const longDateFormat = moment.localeData(this.props.locale).longDateFormat('L'); + const longDateFormat = this.getLocaleDateFormat(); if (this.props.enableRangeSelection) { const dateRange = this.state.formattedDate.split('-'); @@ -114,7 +116,7 @@ class DatePicker extends Component { }; updateDate = (date) => { - const longDateFormat = moment.localeData(this.props.locale).longDateFormat('L'); + const longDateFormat = this.getLocaleDateFormat(); if (this.props.enableRangeSelection) { let formatDate = date[0].format(longDateFormat); @@ -133,6 +135,8 @@ class DatePicker extends Component { } } + getLocaleDateFormat = () => moment.localeData(this.props.locale).longDateFormat('L'); + _handleBlur = () => { this.props.onBlur({ date: this.state.selectedDate, @@ -175,7 +179,7 @@ class DatePicker extends Component { onChange={this.modifyDate} onClick={() => this.openCalendar('input')} onKeyPress={this.sendUpdate} - placeholder={moment.localeData(this.props.locale).longDateFormat('L')} + placeholder={this.getLocaleDateFormat()} value={this.state.formattedDate} />