diff --git a/packages/grafana-ui/src/components/DateTimePickers/DatePicker/DatePicker.tsx b/packages/grafana-ui/src/components/DateTimePickers/DatePicker/DatePicker.tsx
index 8e2397df452..e39ce8157ce 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/DatePicker/DatePicker.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/DatePicker/DatePicker.tsx
@@ -15,6 +15,7 @@ export interface DatePickerProps {
   onClose: () => void;
   onChange: (value: Date) => void;
   value?: Date;
+  minDate?: Date;
 }
 
 /** @public */
@@ -37,7 +38,7 @@ export const DatePicker = memo<DatePickerProps>((props) => {
 
 DatePicker.displayName = 'DatePicker';
 
-const Body = memo<DatePickerProps>(({ value, onChange }) => {
+const Body = memo<DatePickerProps>(({ value, minDate, onChange }) => {
   const styles = useStyles2(getBodyStyles);
 
   return (
@@ -45,6 +46,7 @@ const Body = memo<DatePickerProps>(({ value, onChange }) => {
       className={styles.body}
       tileClassName={styles.title}
       value={value || new Date()}
+      minDate={minDate}
       nextLabel={<Icon name="angle-right" />}
       prevLabel={<Icon name="angle-left" />}
       onChange={(ev: Date | Date[]) => {
@@ -68,6 +70,10 @@ export const getStyles = (theme: GrafanaTheme2) => {
       background-color: ${theme.colors.background.primary};
       border: 1px solid ${theme.colors.border.weak};
       border-radius: 2px 0 0 2px;
+
+      button:disabled {
+        color: ${theme.colors.text.disabled};
+      }
     `,
   };
 };
diff --git a/packages/grafana-ui/src/components/DateTimePickers/DatePickerWithInput/DatePickerWithInput.tsx b/packages/grafana-ui/src/components/DateTimePickers/DatePickerWithInput/DatePickerWithInput.tsx
index ac924d7be24..136cfedce82 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/DatePickerWithInput/DatePickerWithInput.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/DatePickerWithInput/DatePickerWithInput.tsx
@@ -12,6 +12,7 @@ export const formatDate = (date: Date | string) => dateTime(date).format('L');
 /** @public */
 export interface DatePickerWithInputProps extends Omit<InputProps, 'ref' | 'value' | 'onChange'> {
   value?: Date | string;
+  minDate?: Date;
   onChange: (value: Date | string) => void;
   /** Hide the calendar when date is selected */
   closeOnSelect?: boolean;
@@ -21,6 +22,7 @@ export interface DatePickerWithInputProps extends Omit<InputProps, 'ref' | 'valu
 /** @public */
 export const DatePickerWithInput = ({
   value,
+  minDate,
   onChange,
   closeOnSelect,
   placeholder = 'Date',
@@ -49,6 +51,7 @@ export const DatePickerWithInput = ({
       <DatePicker
         isOpen={open}
         value={value && typeof value !== 'string' ? value : dateTime().toDate()}
+        minDate={minDate}
         onChange={(ev) => {
           onChange(ev);
           if (closeOnSelect) {