diff --git a/package-lock.json b/package-lock.json
index f5c51a6..79c202a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "sos-mediterranee-dashboard",
       "version": "0.1.0",
       "dependencies": {
+        "@vuepic/vue-datepicker": "^3.2.1",
         "core-js": "^3.6.5",
         "d3-array": "^2.12.1",
         "d3-brush": "^2.1.0",
@@ -3360,6 +3361,32 @@
       "integrity": "sha512-Iu8Tbg3f+emIIMmI2ycSI8QcEuAUgPTgHwesDU1eKMLE4YC/c/sFbGc70QgMq31ijRftV0R7vCm9co6rldCeOA==",
       "dev": true
     },
+    "node_modules/@vuepic/vue-datepicker": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-3.2.1.tgz",
+      "integrity": "sha512-+YP+Kvc9ZpMELftN4B243/ajgaIb6JVIR5CRoxZGIZX0cFe2tNhLYc8Cl40m12CHGlz44wbmQJGJuW9xtP05XA==",
+      "dependencies": {
+        "date-fns": "^2.28.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "vue": ">=3.2.0"
+      }
+    },
+    "node_modules/@vuepic/vue-datepicker/node_modules/date-fns": {
+      "version": "2.28.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.28.0.tgz",
+      "integrity": "sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==",
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
@@ -17427,6 +17454,21 @@
       "integrity": "sha512-Iu8Tbg3f+emIIMmI2ycSI8QcEuAUgPTgHwesDU1eKMLE4YC/c/sFbGc70QgMq31ijRftV0R7vCm9co6rldCeOA==",
       "dev": true
     },
+    "@vuepic/vue-datepicker": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-3.2.1.tgz",
+      "integrity": "sha512-+YP+Kvc9ZpMELftN4B243/ajgaIb6JVIR5CRoxZGIZX0cFe2tNhLYc8Cl40m12CHGlz44wbmQJGJuW9xtP05XA==",
+      "requires": {
+        "date-fns": "^2.28.0"
+      },
+      "dependencies": {
+        "date-fns": {
+          "version": "2.28.0",
+          "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.28.0.tgz",
+          "integrity": "sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw=="
+        }
+      }
+    },
     "@webassemblyjs/ast": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
diff --git a/package.json b/package.json
index f9b8f8d..b6a87fe 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@vuepic/vue-datepicker": "^3.2.1",
     "core-js": "^3.6.5",
     "d3-array": "^2.12.1",
     "d3-brush": "^2.1.0",
diff --git a/src/Store.ts b/src/Store.ts
index a6deca7..2bc66ed 100644
--- a/src/Store.ts
+++ b/src/Store.ts
@@ -82,6 +82,11 @@ export const store = {
     this.state.histogramSlider.updateHistogram(this.allData.map(d => d.date.getTime()), this)
   },
 
+  updateHistogramSliderFromTo (): void {
+    this.state.histogramSlider.updateSlider(this.state.minDate.valueOf(), this.state.maxDate.valueOf())
+    this.updateHistogramSlider()
+  },
+
   updateStats (): void {
     updateStats(this.state)
   }
diff --git a/src/classes/HistogramSlider.ts b/src/classes/HistogramSlider.ts
index 9ee7f10..7cb0266 100644
--- a/src/classes/HistogramSlider.ts
+++ b/src/classes/HistogramSlider.ts
@@ -140,4 +140,11 @@ export class HistogramSlider {
       this.transitionDuration + 10
     )
   }
+
+  updateSlider(from: number, to: number): void {
+    this.ionRangeSlider.options.from = from
+    this.ionRangeSlider.options.to = to
+    this.ionRangeSlider.updateResult()
+    this.ionRangeSlider.update(this.ionRangeSlider.options)
+  }
 }
diff --git a/src/components/Date.vue b/src/components/Date.vue
new file mode 100644
index 0000000..4fb3ca3
--- /dev/null
+++ b/src/components/Date.vue
@@ -0,0 +1,78 @@
+<template>
+  <div v-if="visible">
+    <div class="z-100 fixed top-0 left-0 w-screen h-screen bg-black bg-opacity-50"></div>
+    <div id="popUpDate"
+      class="z-100 fixed top-0 left-0 w-screen h-screen flex items-center justify-center transform transition-transform duration-300">
+      <div class="bg-white rounded-3xl p-6">
+        <div class="flex justify-between mb-5">
+          <h1 class="font-bold text-secondary">Filter date</h1>
+          <button id="dateCloseButton" type="button" class="focus:outline-none text-grayClose" @click="toggleVisible">X</button>
+        </div>
+        <Datepicker v-model="date" @update:modelValue="handleDate" inline autoApply/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { store } from "@/Store"
+import Datepicker from "@vuepic/vue-datepicker"
+import { defineComponent } from "vue"
+import "@vuepic/vue-datepicker/dist/main.css"
+
+export default defineComponent({
+  components: {
+    Datepicker
+  },
+  name: "Date",
+
+  props: {
+    visible: Boolean,
+    toggleVisible: Function,
+    isMinDate: Boolean
+  },
+  data (): { date: Date, isVisible: boolean } {
+    if (this.isMinDate) {
+      return { date: store.state.minDate, isVisible: false }
+    } else {
+      return { date: store.state.maxDate, isVisible: false }
+    }
+  },
+  methods: {
+    handleDate (modelData: Date): void {
+      if (this.isMinDate) {
+        store.state.minDate = modelData
+      } else {
+        store.state.maxDate = modelData
+      }
+      store.filterData(store.state.minDate, store.state.maxDate)
+      store.updateHistogramSliderFromTo()
+    }
+  }
+})
+
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h1 {
+  font-size: x-large;
+}
+
+p, span {
+  color: var(--text-color);
+}
+
+.text-3xs {
+  font-size: 0.5rem;
+  line-height: 0.5rem;
+}
+
+.vertical-separator {
+  border-right: 1px solid;
+}
+
+button {
+  left: 100%;
+}
+</style>
diff --git a/src/components/HistogramSlider.vue b/src/components/HistogramSlider.vue
index fab5ed1..72b22b2 100644
--- a/src/components/HistogramSlider.vue
+++ b/src/components/HistogramSlider.vue
@@ -1,10 +1,16 @@
 <template>
-  <div :style="style" class="h-16 mx-auto md:h-32 md:absolute md:bottom-5 md:bg-white md:opacity-80 md:p-6 md:rounded-2xl">
-    <svg :id="'vue-histogram'" class="hidden md:block md:w-full"/>
-    <div class="slider-wrapper">
-      <input type="text" :id="'histogram-slider'" :name="'histogram-slider'" value=""/>
+  <div :style="style" class="h-16 mx-auto flex md:h-32 md:absolute md:bottom-5 md:bg-white md:opacity-80 md:p-6 md:rounded-2xl">
+    <span class="hidden md:block icon icon-calendar text-4xl text-right color-secondary cursor-pointer" @click="toggleMinDateVisibility"/>
+    <div class="w-full">
+      <svg :id="'vue-histogram'" class="hidden md:block md:w-full"/>
+      <div class="slider-wrapper">
+        <input type="text" :id="'histogram-slider'" :name="'histogram-slider'" value=""/>
+      </div>
     </div>
+    <span class="hidden md:block icon icon-calendar text-4xl text-right color-secondary cursor-pointer" @click="toggleMaxDateVisibility"/>
   </div>
+  <Date :visible="minDateVisibility" :toggleVisible="toggleMinDateVisibility" :isMinDate="true"/>
+  <Date :visible="maxDateVisibility" :toggleVisible="toggleMaxDateVisibility" :isMinDate="false" />
 </template>
 
 <script lang='ts'>
@@ -15,14 +21,20 @@ import { computed, defineComponent, onBeforeUnmount, onMounted, ref } from "vue"
 
 // eslint-disable-next-line
 import $ from "jquery"
+import Date from "./Date.vue"
 
 export default defineComponent({
+  components: {
+    Date
+  },
   setup () {
     const getWidth = () => {
       return 0.75 * window.innerWidth
     }
 
     const width = ref(getWidth())
+    const minDateVisibility = ref(false)
+    const maxDateVisibility = ref(false)
 
     const onResize = () => {
       width.value = getWidth()
@@ -30,6 +42,14 @@ export default defineComponent({
       store.updateHistogramSlider()
     }
 
+    const toggleMinDateVisibility = () => {
+      minDateVisibility.value = !minDateVisibility.value
+    }
+
+    const toggleMaxDateVisibility = () => {
+      maxDateVisibility.value = !maxDateVisibility.value
+    }
+
     const style = computed(() => {
       return `
         width: ${width.value}px;
@@ -57,7 +77,7 @@ export default defineComponent({
     })
 
     return {
-      style
+      style, minDateVisibility, toggleMinDateVisibility, maxDateVisibility, toggleMaxDateVisibility
     }
   }
 })