diff --git a/packages/client/src/components/app/DateRangePicker.svelte b/packages/client/src/components/app/DateRangePicker.svelte
new file mode 100644
index 0000000000..8131f3bd89
--- /dev/null
+++ b/packages/client/src/components/app/DateRangePicker.svelte
@@ -0,0 +1,76 @@
+<script>
+  import { Select } from "@budibase/bbui"
+  import { getContext, onDestroy } from "svelte"
+  import dayjs from "dayjs"
+  import utc from "dayjs/plugin/utc"
+
+  dayjs.extend(utc)
+
+  export let dataProvider
+  export let field
+  export let defaultValue
+
+  const component = getContext("component")
+  const { styleable, ActionTypes, getAction } = getContext("sdk")
+  const options = [
+    "Last 1 day",
+    "Last 7 days",
+    "Last 30 days",
+    "Last 3 months",
+    "Last 6 months",
+    "Last 1 year",
+  ]
+  let value = options.includes(defaultValue) ? defaultValue : "Last 30 days"
+
+  $: dataProviderId = dataProvider?.id
+  $: addExtension = getAction(
+    dataProviderId,
+    ActionTypes.AddDataProviderQueryExtension
+  )
+  $: removeExtension = getAction(
+    dataProviderId,
+    ActionTypes.RemoveDataProviderQueryExtension
+  )
+  $: queryExtension = getQueryExtension(field, value)
+  $: addExtension?.($component.id, queryExtension)
+
+  const getQueryExtension = (field, value) => {
+    if (!field || !value) {
+      return null
+    }
+    let low = dayjs.utc().subtract(1, "year")
+    let high = dayjs.utc().add(1, "day")
+    if (value === "Last 1 day") {
+      low = dayjs.utc().subtract(1, "day")
+    } else if (value === "Last 7 days") {
+      low = dayjs.utc().subtract(7, "days")
+    } else if (value === "Last 30 days") {
+      low = dayjs.utc().subtract(30, "days")
+    } else if (value === "Last 3 months") {
+      low = dayjs.utc().subtract(3, "months")
+    } else if (value === "Last 6 months") {
+      low = dayjs.utc().subtract(6, "months")
+    }
+    return {
+      range: {
+        [field]: {
+          low: low.format(),
+          high: high.format(),
+        },
+      },
+    }
+  }
+
+  onDestroy(() => {
+    removeExtension?.($component.id)
+  })
+</script>
+
+<div use:styleable={$component.styles}>
+  <Select
+    placeholder={null}
+    {options}
+    {value}
+    on:change={e => (value = e.detail)}
+  />
+</div>
diff --git a/packages/client/src/components/app/index.js b/packages/client/src/components/app/index.js
index 1c5722eb40..e23e19704c 100644
--- a/packages/client/src/components/app/index.js
+++ b/packages/client/src/components/app/index.js
@@ -29,6 +29,7 @@ export { default as image } from "./Image.svelte"
 export { default as embed } from "./Embed.svelte"
 export { default as icon } from "./Icon.svelte"
 export { default as backgroundimage } from "./BackgroundImage.svelte"
+export { default as daterangepicker } from "./DateRangePicker.svelte"
 export { default as cardstat } from "./CardStat.svelte"
 export { default as spectrumcard } from "./SpectrumCard.svelte"
 export { default as tag } from "./Tag.svelte"