diff --git a/packages/grafana-ui/src/components/DateTimePickers/DateTimePicker/DateTimePicker.test.tsx b/packages/grafana-ui/src/components/DateTimePickers/DateTimePicker/DateTimePicker.test.tsx
index 68cfe803ac5..821ee4088a1 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/DateTimePicker/DateTimePicker.test.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/DateTimePicker/DateTimePicker.test.tsx
@@ -1,4 +1,4 @@
-import { fireEvent, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 
@@ -27,17 +27,29 @@ describe('Date time picker', () => {
 
   it('input should have a value', () => {
     renderDatetimePicker();
-
     expect(screen.queryByDisplayValue('2021-05-05 12:00:00')).toBeInTheDocument();
   });
 
-  it('should update date onblur', () => {
-    renderDatetimePicker();
+  it('should update date onblur', async () => {
+    const onChangeInput = jest.fn();
+    render(<DateTimePicker date={dateTime('2021-05-05 12:00:00')} onChange={onChangeInput} />);
     const dateTimeInput = screen.getByTestId('date-time-input');
-    fireEvent.change(dateTimeInput, { target: { value: '2021-07-31 12:30:30' } });
-    fireEvent.blur(dateTimeInput);
-
+    await userEvent.clear(dateTimeInput);
+    await userEvent.type(dateTimeInput, '2021-07-31 12:30:30');
     expect(dateTimeInput).toHaveDisplayValue('2021-07-31 12:30:30');
+    await userEvent.click(document.body);
+    expect(onChangeInput).toHaveBeenCalled();
+  });
+
+  it('should not update onblur if invalid date', async () => {
+    const onChangeInput = jest.fn();
+    render(<DateTimePicker date={dateTime('2021-05-05 12:00:00')} onChange={onChangeInput} />);
+    const dateTimeInput = screen.getByTestId('date-time-input');
+    await userEvent.clear(dateTimeInput);
+    await userEvent.type(dateTimeInput, '2021:05:05 12-00-00');
+    expect(dateTimeInput).toHaveDisplayValue('2021:05:05 12-00-00');
+    await userEvent.click(document.body);
+    expect(onChangeInput).not.toHaveBeenCalled();
   });
 
   it('should be able to select values in TimeOfDayPicker without blurring the element', async () => {
diff --git a/packages/grafana-ui/src/components/DateTimePickers/DateTimePicker/DateTimePicker.tsx b/packages/grafana-ui/src/components/DateTimePickers/DateTimePicker/DateTimePicker.tsx
index 0371341e09e..ea1562627c5 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/DateTimePicker/DateTimePicker.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/DateTimePicker/DateTimePicker.tsx
@@ -183,7 +183,7 @@ type InputState = {
 };
 
 const DateTimeInput = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ date, label, onChange, isFullscreen, onOpen, showSeconds = true }, ref) => {
+  ({ date, label, onChange, onOpen, showSeconds = true }, ref) => {
     const format = showSeconds ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm';
     const [internalDate, setInternalDate] = useState<InputState>(() => {
       return { value: date ? dateTimeFormat(date) : dateTimeFormat(dateTime()), invalid: false };
@@ -207,10 +207,11 @@ const DateTimeInput = React.forwardRef<HTMLInputElement, InputProps>(
     }, []);
 
     const onBlur = useCallback(() => {
-      if (isDateTime(internalDate.value)) {
-        onChange(dateTime(internalDate.value));
+      if (!internalDate.invalid) {
+        const date = dateTime(internalDate.value);
+        onChange(date);
       }
-    }, [internalDate.value, onChange]);
+    }, [internalDate, onChange]);
 
     const icon = <Button aria-label="Time picker" icon="calendar-alt" variant="secondary" onClick={onOpen} />;
     return (