#2611

src/docs/partials/change-log.html

@@ -7,6 +7,7 @@ <h2>6.2.6</h2>
       <h3>Bug fixes</h3>
       <ul>
         <li>Fixed disabled/enabled dates performance issue. This also should fix the next/previous month selection #2658</li>
+        <li>Fixed view date syncing across options and not updating correctly #2611</li>
       </ul>
       <h3>New</h3>
       <ul>

src/docs/partials/functions/dates.html

@@ -40,13 +40,14 @@
   </div>
 
   <div class='row'>
-    <h2 id='viewDate'>Getting the View Date
+    <h2 id='viewDate'>View Date
       <a class='anchor-link' aria-label='Anchor' href='#viewDate'><i class='fa-solid fa-anchor'
                                                                      aria-hidden='true'></i></a>
     </h2>
     <p>
       <code>picker.viewDate</code> returns the pickers current view date.
     </p>
+    <p><code>picker.viewDate = DateTime</code> will set the view date, update the options and ask the view to refresh.</p>
   </div>
   <div class='row mb-3'>
     <h2>picker.dates</h2>
@@ -88,7 +89,7 @@ <h2 id='lastPickedIndex'>lastPickedIndex
   <div class='row'>
     <h2 id='add'>add(DateTime)
       <a class='anchor-link' aria-label='Anchor' href='#add'><i class='fa-solid fa-anchor'
-                                                                     aria-hidden='true'></i></a>
+                                                                aria-hidden='true'></i></a>
     </h2>
     <p>
       Adds a new DateTime to selected dates array. Use this function with caution. It will not

src/js/actions.ts

@@ -228,7 +228,9 @@ export default class Actions {
                 const today = new DateTime().setLocale(
                     this.optionsStore.options.localization.locale
                 );
-                this.optionsStore.viewDate = today;
+                this._eventEmitters.updateViewDate.emit(today);
+
+                //todo this this really a good idea?
                 if (this.validation.isValid(today, Unit.date))
                     this.dates.setValue(today, this.dates.lastPickedIndex);
                 break;

src/js/dates.ts

@@ -241,7 +241,7 @@ export default class Dates {
 
     if (this.validation.isValid(target)) {
       this._dates[index] = target;
-      this.optionsStore.viewDate = target.clone;
+      this._eventEmitters.updateViewDate.emit(target.clone);
 
       updateInput();
 
@@ -259,7 +259,7 @@ export default class Dates {
 
     if (this.optionsStore.options.keepInvalid) {
       this._dates[index] = target;
-      this.optionsStore.viewDate = target.clone;
+      this._eventEmitters.updateViewDate.emit(target.clone);
 
       updateInput();
 

src/js/tempus-dominus.ts

@@ -7,18 +7,18 @@ import Options from './utilities/options';
 import {
   BaseEvent,
   ChangeEvent,
-  ViewUpdateEvent,
+  ViewUpdateEvent
 } from './utilities/event-types';
 import { EventEmitters } from './utilities/event-emitter';
 import {
   serviceLocator,
-  setupServiceLocator,
+  setupServiceLocator
 } from './utilities/service-locator';
 import CalendarModes from './utilities/calendar-modes';
 import DefaultOptions from './utilities/default-options';
 import ActionTypes from './utilities/action-types';
-import {OptionsStore} from "./utilities/optionsStore";
-import {OptionConverter} from "./utilities/optionConverter";
+import { OptionsStore } from './utilities/optionsStore';
+import { OptionConverter } from './utilities/optionConverter';
 import { ErrorMessages } from './utilities/errors';
 
 /**
@@ -66,12 +66,24 @@ class TempusDominus {
     this._eventEmitters.viewUpdate.subscribe(() => {
       this._viewUpdate();
     });
+
+    this._eventEmitters.updateViewDate.subscribe(dateTime => {
+      this.viewDate = dateTime;
+    });
   }
 
   get viewDate() {
     return this.optionsStore.viewDate;
   }
 
+  set viewDate(value) {
+    this.optionsStore.viewDate = value;
+    this.optionsStore.viewDate.setLocale(
+      this.optionsStore.options.localization.locale
+    );
+    this.display._update(this.optionsStore.currentView === 'clock' ? 'clock' : 'calendar');
+  }
+
   // noinspection JSUnusedGlobalSymbols
   /**
    * Update the picker options. If `reset` is provide `options` will be merged with DefaultOptions instead.
@@ -187,7 +199,7 @@ class TempusDominus {
           this,
           eventType,
           this._subscribers[eventType].length - 1
-        ),
+        )
       });
 
       if (eventTypes.length === 1) {
@@ -206,6 +218,7 @@ class TempusDominus {
     this.display.hide();
     // this will clear the document click event listener
     this.display._dispose();
+    this._eventEmitters.destroy();
     this.optionsStore.input?.removeEventListener(
       'change',
       this._inputChangeEvent
@@ -229,7 +242,7 @@ class TempusDominus {
     let asked = loadedLocales[language];
     if (!asked) return;
     this.updateOptions({
-      localization: asked,
+      localization: asked
     });
   }
 
@@ -258,7 +271,7 @@ class TempusDominus {
       );
 
       this.optionsStore.input?.dispatchEvent(
-          new CustomEvent('change', { detail: event as any })
+        new CustomEvent('change', { detail: event as any })
       );
     }
 
@@ -298,7 +311,7 @@ class TempusDominus {
   private _viewUpdate() {
     this._triggerEvent({
       type: Namespace.events.update,
-      viewDate: this.optionsStore.viewDate.clone,
+      viewDate: this.optionsStore.viewDate.clone
     } as ViewUpdateEvent);
   }
 
@@ -372,7 +385,6 @@ class TempusDominus {
       newConfig.display.components.useTwentyfourHour = !!!newConfig.viewDate.parts()?.dayPeriod;
     }
 
-
     this.optionsStore.options = newConfig;
   }
 
@@ -461,9 +473,9 @@ class TempusDominus {
           e: {
             currentTarget: this.display.widget.querySelector(
               `.${Namespace.css.switch} div`
-            ),
+            )
           },
-          action: ActionTypes.togglePicker,
+          action: ActionTypes.togglePicker
         });
       }
     }, this.optionsStore.options.promptTimeOnDateChangeTransitionDelay);
@@ -480,7 +492,7 @@ class TempusDominus {
 
     const setViewDate = () => {
       if (this.dates.lastPicked)
-        this.optionsStore.viewDate = this.dates.lastPicked.clone;
+        this.viewDate = this.dates.lastPicked.clone;
     };
 
     const value = this.optionsStore.input.value;
@@ -510,7 +522,7 @@ class TempusDominus {
    * @private
    */
   private _toggleClickEvent = () => {
-    if ((this.optionsStore.element as any)?.disabled || this.optionsStore.input?.disabled) return
+    if ((this.optionsStore.element as any)?.disabled || this.optionsStore.input?.disabled) return;
     this.toggle();
   };
 }
@@ -548,7 +560,7 @@ const locale = (l: string) => {
  * @param plugin
  * @param option
  */
-const extend = function (plugin, option) {
+const extend = function(plugin, option) {
   if (!plugin) return tempusDominus;
   if (!plugin.installed) {
     // install plugin only once
@@ -584,4 +596,4 @@ export {
   version,
   DateTimeFormatOptions,
   Options
-}
+};

src/js/utilities/event-emitter.ts

@@ -1,4 +1,4 @@
-import { Unit } from '../datetime';
+import { DateTime, Unit } from '../datetime';
 import ActionTypes from './action-types';
 import { BaseEvent } from './event-types';
 
@@ -33,11 +33,13 @@ export class EventEmitters {
   viewUpdate = new EventEmitter();
   updateDisplay = new EventEmitter<ViewUpdateValues>();
   action = new EventEmitter<{ e: any; action?: ActionTypes }>();
+  updateViewDate = new EventEmitter<DateTime>();
 
   destroy() {
     this.triggerEvent.destroy();
     this.viewUpdate.destroy();
     this.updateDisplay.destroy();
     this.action.destroy();
+    this.updateViewDate.destroy();
   }
 }