From 23e800851716e0645451c99f2e0084937747a4c6 Mon Sep 17 00:00:00 2001 From: Artem Fedulov Date: Sun, 8 Jul 2018 20:37:30 +0300 Subject: [PATCH] feat: add `initialDate` attribute --- README.md | 3 +++ package.json | 2 +- src/containers/withStateInput.js | 33 ++++++++++++++++++++++++-------- 3 files changed, 29 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 922690b5..f7259d91 100644 --- a/README.md +++ b/README.md @@ -124,6 +124,7 @@ moment.locale('ru') | ``inline`` | {bool} If ``true`` inline picker displayed. Default: ``false`` | | ``startMode`` | {string} Display mode to start. One of ['year', 'month', 'day']. Default: ``day`` | | ``closable`` | {bool} If true, popup closes after selecting a date | +| ``initialDate`` | {string|moment|Date} Date to display initially when no date is selected | ### TimeInput @@ -145,6 +146,7 @@ moment.locale('ru') | ``inline`` | {bool} If ``true`` inline picker displayed. Default: ``false`` | | ``startMode`` | {string} Display mode to start. One of ['year', 'month', 'day']. Default: ``day`` | | ``closable`` | {bool} If true, popup closes after selecting a date-time | +| ``initialDate`` | {string|moment|Date} Date to display initially when no date is selected | ### DatesRangeInput @@ -155,6 +157,7 @@ moment.locale('ru') | ``popupPosition``| {string} One of ['top left', 'top right', 'bottom left', 'bottom right', 'right center', 'left center', 'top center', 'bottom center']. Default: ``top left``| | ``inline`` | {bool} If ``true`` inline picker displayed. Default: ``false`` | | ``closable`` | {bool} If true, popup closes after selecting a dates range | +| ``initialDate`` | {string|moment|Date} Open a calendar on this date | ### YearInput diff --git a/package.json b/package.json index 08a17ba8..d9880b4b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "semantic-ui-calendar-react", - "version": "0.6.0", + "version": "0.7.0", "description": "date/time picker built from semantic-ui elements", "main": "dist/index.js", "scripts": { diff --git a/src/containers/withStateInput.js b/src/containers/withStateInput.js index 27ecfce2..7bfbf75a 100644 --- a/src/containers/withStateInput.js +++ b/src/containers/withStateInput.js @@ -37,9 +37,17 @@ const getTime = ({hour = '00', minute = '00'}) => { return `${hour}:${minute}`; }; -const parseDate = (value, format) => { - const date = moment(value, format); - return date.isValid()? date : moment(); +const parseDate = (value, format, defaultVal) => { + let date = moment(value, format); + if (date.isValid()) { + return date; + } else if (defaultVal) { + date = moment(defaultVal, format); + if (date.isValid()) { + return date; + } + } + return moment(); }; function withStateInput(WrappedComponent) { @@ -67,7 +75,13 @@ function withStateInput(WrappedComponent) { /* Characters that separate date and time values. */ divider: PropTypes.string, /* If true, popup closes after selecting a date/time */ - closable: PropTypes.bool + closable: PropTypes.bool, + /* Date to display initially when no date is selected */ + initialDate: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.instanceOf(moment), + PropTypes.instanceOf(Date) + ]) } static defaultProps = { @@ -83,11 +97,14 @@ function withStateInput(WrappedComponent) { const { value, dateFormat, - startMode + startMode, + initialDate, } = props; - const initialDate = value? moment(value, dateFormat) : moment().startOf('month'); + const _initialDate = value? + moment(value, dateFormat) : initialDate? + moment(initialDate, dateFormat) : moment().startOf('month'); this.state = { - dateToShow: initialDate, // moment + dateToShow: _initialDate, // moment month: '', // str year: '', // str activeHour: '', // str @@ -327,7 +344,7 @@ function withStateInput(WrappedComponent) { } render() { - const activeDate = parseDate(this.props.value, this.props.dateFormat); + const activeDate = parseDate(this.props.value, this.props.dateFormat, this.props.initialDate); const wrapperState = { ...this.state, activeDate: activeDate,