DateTimePicker: Return cleared value in onChange (#88377)

* DateTimePicker: Return cleared value in onChange

* Update story

packages/grafana-sql/src/components/visual-query-builder/AwesomeQueryBuilder.tsx

@@ -80,7 +80,7 @@ export const widgets: Widgets = {
       return (
         <DateTimePicker
           onChange={(e) => {
-            props?.setValue(e.format(BasicConfig.widgets.datetime.valueFormat));
+            props?.setValue(e?.format(BasicConfig.widgets.datetime.valueFormat));
           }}
           date={dateValue}
         />

packages/grafana-ui/src/components/DateTimePickers/DateTimePicker/DateTimePicker.story.tsx

@@ -58,7 +58,9 @@ export const OnlyWorkingHoursEnabled: StoryFn<typeof DateTimePicker> = ({ label,
       showSeconds={showSeconds}
       onChange={(newValue) => {
         action('on change')(newValue);
-        setDate(newValue);
+        if (newValue) {
+          setDate(newValue);
+        }
       }}
     />
   );
@@ -81,7 +83,9 @@ export const Basic: StoryFn<typeof DateTimePicker> = ({ label, minDate, maxDate,
       clearable={clearable}
       onChange={(newValue) => {
         action('on change')(newValue);
-        setDate(newValue);
+        if (newValue) {
+          setDate(newValue);
+        }
       }}
     />
   );
@@ -101,7 +105,9 @@ export const Clearable: StoryFn<typeof DateTimePicker> = ({ label, showSeconds,
       clearable={clearable}
       onChange={(newValue) => {
         action('on change')(newValue);
-        setDate(newValue);
+        if (newValue) {
+          setDate(newValue);
+        }
       }}
     />
   );

packages/grafana-ui/src/components/DateTimePickers/DateTimePicker/DateTimePicker.tsx

@@ -35,7 +35,7 @@ export interface Props {
   /** Input date for the component */
   date?: DateTime;
   /** Callback for returning the selected date */
-  onChange: (date: DateTime) => void;
+  onChange: (date?: DateTime) => void;
   /** label for the input field */
   label?: ReactNode;
   /** Set the latest selectable date */
@@ -200,15 +200,10 @@ interface DateTimeCalendarProps {
   disabledSeconds?: () => number[];
 }
 
-interface InputProps {
-  label?: ReactNode;
-  date?: DateTime;
+type InputProps = Pick<Props, 'onChange' | 'label' | 'date' | 'showSeconds' | 'clearable'> & {
   isFullscreen: boolean;
-  onChange: (date: DateTime) => void;
   onOpen: (event: FormEvent<HTMLElement>) => void;
-  showSeconds?: boolean;
-  clearable?: boolean;
-}
+};
 
 type InputState = {
   value: string;
@@ -249,7 +244,8 @@ const DateTimeInput = React.forwardRef<HTMLInputElement, InputProps>(
 
     const clearInternalDate = useCallback(() => {
       setInternalDate({ value: '', invalid: false });
-    }, []);
+      onChange();
+    }, [onChange]);
 
     const icon = <Button aria-label="Time picker" icon="calendar-alt" variant="secondary" onClick={onOpen} />;
     return (