feat(date-time-picker-web): implement onChange handling in DatePickerController

Author: samuelreichert

packages/pluggableWidgets/date-time-picker-web/src/components/DateTimePickerContainer.tsx

@@ -15,8 +15,6 @@ export function DateTimePickerContainer(props: DateTimePickerContainerProps) {
     const label = props.showLabel && props.label?.status === "available" ? props.label.value : null;
     const portalId = `datepicker_` + Math.random();
 
-    console.info("Rendering DateTimePicker", label, pickerProps);
-
     // still have to add validation for max and min time and validation message
     console.info("unused props", {
         name: props.name,

packages/pluggableWidgets/date-time-picker-web/src/helpers/DatePickerController.ts

@@ -24,15 +24,15 @@ export class DatePickerController {
     private _timer = -1;
     private _defaultState: Array<Date | undefined>;
     private _type: "date" | "time" | "datetime" | "range";
+    private _onChange?: ActionValue<"none">;
     expanded = false;
     pickerRef = createRef<DatePicker>();
 
     constructor(params: Params) {
         this._dates = this.getDefaults(params);
         this._defaultState = this.getDefaults(params);
         this._type = params.type;
-
-        // implement onChange action
+        this._onChange = params.onChange;
 
         makeObservable(this, {
             pickerState: computed,
@@ -63,9 +63,13 @@ export class DatePickerController {
             const [start, end] = value as [Date | null, Date | null];
             this._dates[0] = start ?? undefined;
             this._dates[1] = end ?? undefined;
+
+            this._onChange?.canExecute && !this._onChange.isExecuting && this._onChange.execute();
             return;
         } else {
             this._dates[0] = value as Date;
+
+            this._onChange?.canExecute && !this._onChange.isExecuting && this._onChange.execute();
             return;
         }
     };