feat: sync #date-picker input values with calendars views

packages/dnb-design-system-portal/src/pages/uilib/components/date-picker/date-picker-properties.md

@@ -25,6 +25,7 @@ draft: true
 | `show_submit_button` | _(optional)_ if set to `true`, a submit button will be shown. Defaults to `false`.                                                                                   |
 | `show_cancel_button` | _(optional)_ if set to `true`, a cancel button will be shown. Defaults to `false`.                                                                                   |
 | `link`               | _(optional)_ link both calendars, once to user is navigating between months. Only meant to use if range is set to ture. Defaults to `false`.                         |
+| `sync`               | _(optional)_ sync input values with the calendars views. Once the input values getting changed, the calendar changes its views in sync. Defaults to `true`.          |
 | `first_day`          | _(optional)_ to define the first day of the week. Defaults to `monday`.                                                                                              |
 | `locale`             | _(optional)_ to define the locale used in the calendar. Needs to be an `date-fns` locale object, like `import nbLocale from 'date-fns/locale/nb'`. Defaults to `nb`. |
 | `label`              | _(optional)_ a prepending label in sync with the date input field.                                                                                                   |

packages/dnb-ui-lib/src/components/date-picker/DatePicker.js

@@ -88,6 +88,7 @@ export const propTypes = {
   locale: PropTypes.object,
   range: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   link: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  sync: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   label: PropTypes.string,
   disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   status: PropTypes.string,
@@ -132,6 +133,7 @@ export const defaultProps = {
   locale: nbLocale,
   range: false,
   link: false,
+  sync: true,
   label: null,
   disabled: false,
   status: null,
@@ -485,6 +487,7 @@ export default class DatePicker extends PureComponent {
       reset_date,
       locale,
       link,
+      sync,
       disabled,
       status,
       status_state,
@@ -609,9 +612,10 @@ export default class DatePicker extends PureComponent {
                     firstDayOfWeek={first_day}
                     minDate={minDate}
                     maxDate={maxDate}
-                    resetDate={isTrue(reset_date)}
                     locale={locale}
+                    resetDate={isTrue(reset_date)}
                     link={isTrue(link)}
+                    sync={isTrue(sync)}
                     hideDays={isTrue(hide_days)}
                     hideNav={isTrue(hide_navigation)}
                     views={

packages/dnb-ui-lib/src/components/date-picker/DatePickerRange.js

@@ -17,6 +17,7 @@ export const propTypes = {
 
   range: PropTypes.bool,
   link: PropTypes.bool,
+  sync: PropTypes.bool,
   views: PropTypes.oneOfType([
     PropTypes.number,
     PropTypes.arrayOf(PropTypes.object)
@@ -38,6 +39,7 @@ export const defaultProps = {
   // apperance
   range: null,
   link: null,
+  sync: null,
   views: null,
   // views: [{ nextBtn: false }, { prevBtn: false }],
 
@@ -51,6 +53,34 @@ export default class DatePickerRange extends PureComponent {
   static propTypes = propTypes
   static defaultProps = defaultProps
 
+  static getDerivedStateFromProps(props, state) {
+    if (state._listenForPropChanges) {
+      if (
+        props.sync &&
+        ((props.startDate &&
+          state.startDate &&
+          (props.startDate.getMonth() !== state.startDate.getMonth() ||
+            props.startDate.getFullYear() !==
+              state.startDate.getFullYear())) ||
+          (props.endDate &&
+            state.endDate &&
+            (props.endDate.getMonth() !== state.endDate.getMonth() ||
+              props.endDate.getFullYear() !==
+                state.endDate.getFullYear())))
+      ) {
+        state.views = DatePickerRange.getViews(props)
+      }
+      if (props.startDate) {
+        state.startDate = props.startDate
+      }
+      if (props.endDate) {
+        state.endDate = props.endDate
+      }
+    }
+    state._listenForPropChanges = true
+    return state
+  }
+
   state = {
     views: null,
     startDate: null,
@@ -60,9 +90,12 @@ export default class DatePickerRange extends PureComponent {
 
   constructor(props) {
     super(props)
+    this.state.views = DatePickerRange.getViews(props)
+  }
 
+  static getViews(props) {
     // fill the views with the calendar data getMonth()
-    this.state.views = (Array.isArray(props.views)
+    return (Array.isArray(props.views)
       ? props.views
       : Array(
           props.range
@@ -71,43 +104,24 @@ export default class DatePickerRange extends PureComponent {
         ).fill(1)
     ).map((view, i) => ({
       ...view,
-      month: this.getMonth(i),
+      month: DatePickerRange.getMonth(i, props),
       nr: i
     }))
   }
 
-  getMonth(viewCount) {
-    if (
-      (this.props.startMonth || this.props.startDate) &&
-      viewCount === 0
-    ) {
-      return this.props.startMonth || this.props.startDate
+  static getMonth(viewCount, props) {
+    if ((props.startMonth || props.startDate) && viewCount === 0) {
+      return props.startMonth || props.startDate
     }
-    if ((this.props.endMonth || this.props.endDate) && viewCount === 1) {
-      return this.props.endMonth || this.props.endDate
+    if ((props.endMonth || props.endDate) && viewCount === 1) {
+      return props.endMonth || props.endDate
     }
     return addMonths(
-      this.props.month ||
-        this.props.startMonth ||
-        this.props.startDate ||
-        new Date(),
+      props.month || props.startMonth || props.startDate || new Date(),
       viewCount
     )
   }
 
-  static getDerivedStateFromProps(props, state) {
-    if (state._listenForPropChanges) {
-      if (props.startDate) {
-        state.startDate = props.startDate
-      }
-      if (props.endDate) {
-        state.endDate = props.endDate
-      }
-    }
-    state._listenForPropChanges = true
-    return state
-  }
-
   callOnChange() {
     const { startDate, endDate, views } = this.state
     this.props.onChange &&
@@ -161,16 +175,17 @@ export default class DatePickerRange extends PureComponent {
   }
 
   render() {
+    const { views, startDate, endDate, hoverDate } = this.state
     return (
       <div className="dnb-date-picker__views">
-        {this.state.views.map(calendar => (
+        {views.map(calendar => (
           <DatePickerCalendar
             key={calendar.nr}
             {...this.props}
             {...calendar}
-            startDate={this.state.startDate}
-            endDate={this.state.endDate}
-            hoverDate={this.state.hoverDate}
+            startDate={startDate}
+            endDate={endDate}
+            hoverDate={hoverDate}
             onSelect={this.onSelect}
             onHover={this.onHover}
             onPrev={this.onPrev}

packages/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap

@@ -66,6 +66,7 @@ exports[`DatePicker component have to match snapshot 1`] = `
   status="status"
   status_animation={null}
   status_state="error"
+  sync={true}
 >
   <span
     className="dnb-date-picker dnb-date-picker--hidden dnb-date-picker--show-input dnb-date-picker--show-footer"

packages/dnb-ui-lib/stories/components/DatePicker.js

@@ -24,6 +24,8 @@ export default [
           start_date="1981-01-15"
           end_date="2019-06-15"
           range={true}
+          // link={true}
+          // sync={false}
           opened={false}
           show_input={true}
           on_change={props => {