diff --git a/.playground/pages/composant/date/date.vue b/.playground/pages/composant/date/date.vue
new file mode 100644
index 0000000..382d982
--- /dev/null
+++ b/.playground/pages/composant/date/date.vue
@@ -0,0 +1,53 @@
+<template>
+  <div class="max-w-md space-y-6">
+    <h1 class="text-2xl font-bold">MalioDate</h1>
+
+    <MalioDate
+      v-model="value"
+      label="Date de naissance"
+      hint="Clique pour ouvrir le calendrier"
+    />
+
+    <div class="rounded border p-3 text-sm">
+      <p>Valeur (ISO) : <code>{{ value ?? 'null' }}</code></p>
+    </div>
+
+    <div class="flex gap-2">
+      <button
+        type="button"
+        class="rounded bg-m-primary px-3 py-1.5 text-white"
+        @click="value = '2026-12-25'"
+      >
+        Forcer le 25/12/2026
+      </button>
+      <button
+        type="button"
+        class="rounded border px-3 py-1.5"
+        @click="value = null"
+      >
+        Réinitialiser
+      </button>
+    </div>
+
+    <MalioDate
+      v-model="bounded"
+      label="Date bornée"
+      :min="todayIso"
+      :max="maxIso"
+      hint="Entre aujourd'hui et +30 jours"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+
+const pad = (n: number) => String(n).padStart(2, '0')
+const toIso = (d: Date) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
+const now = new Date()
+const todayIso = toIso(now)
+const maxIso = toIso(new Date(now.getTime() + 30 * 86400000))
+
+const value = ref<string | null>(null)
+const bounded = ref<string | null>(null)
+</script>
diff --git a/app/components/malio/date/Date.test.ts b/app/components/malio/date/Date.test.ts
new file mode 100644
index 0000000..9616b32
--- /dev/null
+++ b/app/components/malio/date/Date.test.ts
@@ -0,0 +1,198 @@
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
+import {mount} from '@vue/test-utils'
+import type {DefineComponent} from 'vue'
+import Date_ from './Date.vue'
+
+type DateProps = {
+  id?: string
+  name?: string
+  label?: string
+  modelValue?: string | null
+  placeholder?: string
+  required?: boolean
+  disabled?: boolean
+  readonly?: boolean
+  hint?: string
+  error?: string
+  success?: string
+  min?: string
+  max?: string
+  clearable?: boolean
+  inputClass?: string
+  labelClass?: string
+  groupClass?: string
+}
+
+const DateForTest = Date_ as DefineComponent<DateProps>
+const mountDate = (props: DateProps = {}) => mount(DateForTest, {props, attachTo: document.body})
+
+describe('MalioDate', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+    vi.setSystemTime(new Date(2026, 4, 19)) // 19 mai 2026
+  })
+  afterEach(() => vi.useRealTimers())
+
+  describe('rendu', () => {
+    it('renders the label and the calendar icon', () => {
+      const wrapper = mountDate({label: 'Date de naissance'})
+      expect(wrapper.get('label').text()).toBe('Date de naissance')
+      expect(wrapper.find('[data-test="calendar-icon"]').exists()).toBe(true)
+    })
+
+    it('displays the formatted value in the field', () => {
+      const wrapper = mountDate({modelValue: '2026-05-19'})
+      const input = wrapper.get('[data-test="date-input"]').element as HTMLInputElement
+      expect(input.value).toBe('19/05/2026')
+    })
+
+    it('does not show the popover initially', () => {
+      const wrapper = mountDate()
+      expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
+    })
+  })
+
+  describe('popover', () => {
+    it('opens on field click', async () => {
+      const wrapper = mountDate()
+      await wrapper.get('[data-test="date-input"]').trigger('click')
+      expect(wrapper.find('[data-test="popover"]').exists()).toBe(true)
+    })
+
+    it('opens on the current month when there is no value', async () => {
+      const wrapper = mountDate()
+      await wrapper.get('[data-test="date-input"]').trigger('click')
+      expect(wrapper.get('[data-test="header-toggle"]').text()).toContain('Mai 2026')
+    })
+
+    it('opens on the value month when a value is set', async () => {
+      const wrapper = mountDate({modelValue: '2025-12-25'})
+      await wrapper.get('[data-test="date-input"]').trigger('click')
+      expect(wrapper.get('[data-test="header-toggle"]').text()).toContain('Décembre 2025')
+    })
+
+    it('closes on outside mousedown', async () => {
+      const wrapper = mountDate()
+      await wrapper.get('[data-test="date-input"]').trigger('click')
+      document.body.dispatchEvent(new MouseEvent('mousedown', {bubbles: true}))
+      await wrapper.vm.$nextTick()
+      expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
+    })
+  })
+
+  describe('navigation jours', () => {
+    it('goes to the next month on the right chevron', async () => {
+      const wrapper = mountDate()
+      await wrapper.get('[data-test="date-input"]').trigger('click')
+      await wrapper.get('[data-test="header-next"]').trigger('click')
+      expect(wrapper.get('[data-test="header-toggle"]').text()).toContain('Juin 2026')
+    })
+
+    it('rolls December to January and bumps the year', async () => {
+      const wrapper = mountDate({modelValue: '2026-12-15'})
+      await wrapper.get('[data-test="date-input"]').trigger('click')
+      await wrapper.get('[data-test="header-next"]').trigger('click')
+      expect(wrapper.get('[data-test="header-toggle"]').text()).toContain('Janvier 2027')
+    })
+  })
+
+  describe('sélection', () => {
+    it('emits the ISO date and closes on day click', async () => {
+      const wrapper = mountDate()
+      await wrapper.get('[data-test="date-input"]').trigger('click')
+      await wrapper.get('[data-test="day"][data-iso="2026-05-19"]').trigger('click')
+      expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-05-19'])
+      expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
+    })
+  })
+
+  describe('bornes min/max', () => {
+    it('disables days outside the range', async () => {
+      const wrapper = mountDate({min: '2026-05-10', max: '2026-05-20'})
+      await wrapper.get('[data-test="date-input"]').trigger('click')
+      const outside = wrapper.get('[data-test="day"][data-iso="2026-05-05"]')
+      expect((outside.element as HTMLButtonElement).disabled).toBe(true)
+      await outside.trigger('click')
+      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    })
+  })
+
+  describe('vue mois', () => {
+    it('switches to month view on header toggle', async () => {
+      const wrapper = mountDate()
+      await wrapper.get('[data-test="date-input"]').trigger('click')
+      await wrapper.get('[data-test="header-toggle"]').trigger('click')
+      expect(wrapper.find('[data-test="month-picker"]').exists()).toBe(true)
+    })
+
+    it('navigates the year with chevrons in month view', async () => {
+      const wrapper = mountDate()
+      await wrapper.get('[data-test="date-input"]').trigger('click')
+      await wrapper.get('[data-test="header-toggle"]').trigger('click')
+      await wrapper.get('[data-test="header-next"]').trigger('click')
+      expect(wrapper.get('[data-test="header-toggle"]').text()).toContain('2027')
+    })
+
+    it('returns to day view on month click', async () => {
+      const wrapper = mountDate()
+      await wrapper.get('[data-test="date-input"]').trigger('click')
+      await wrapper.get('[data-test="header-toggle"]').trigger('click')
+      await wrapper.get('[data-test="month"][data-month="0"]').trigger('click')
+      expect(wrapper.find('[data-test="month-picker"]').exists()).toBe(false)
+      expect(wrapper.get('[data-test="header-toggle"]').text()).toContain('Janvier 2026')
+      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    })
+  })
+
+  describe('effacement', () => {
+    it('shows the clear button when there is a value', () => {
+      const wrapper = mountDate({modelValue: '2026-05-19'})
+      expect(wrapper.find('[data-test="clear"]').exists()).toBe(true)
+    })
+
+    it('hides the clear button when empty', () => {
+      const wrapper = mountDate()
+      expect(wrapper.find('[data-test="clear"]').exists()).toBe(false)
+    })
+
+    it('emits null and does not open the popover on clear', async () => {
+      const wrapper = mountDate({modelValue: '2026-05-19'})
+      await wrapper.get('[data-test="clear"]').trigger('click')
+      expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([null])
+      expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
+    })
+  })
+
+  describe('états', () => {
+    it('does not open when disabled', async () => {
+      const wrapper = mountDate({disabled: true})
+      await wrapper.get('[data-test="date-input"]').trigger('click')
+      expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
+    })
+
+    it('does not open when readonly', async () => {
+      const wrapper = mountDate({readonly: true, modelValue: '2026-05-19'})
+      await wrapper.get('[data-test="date-input"]').trigger('click')
+      expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
+    })
+  })
+
+  describe('accessibilité', () => {
+    it('sets aria-invalid and describedby on error', () => {
+      const wrapper = mountDate({error: 'Date requise'})
+      const input = wrapper.get('[data-test="date-input"]')
+      expect(input.attributes('aria-invalid')).toBe('true')
+      expect(input.attributes('aria-describedby')).toBeTruthy()
+      expect(wrapper.text()).toContain('Date requise')
+    })
+  })
+
+  describe('synchronisation externe', () => {
+    it('updates the displayed value when modelValue changes', async () => {
+      const wrapper = mountDate({modelValue: '2026-05-19'})
+      await wrapper.setProps({modelValue: '2026-12-25'})
+      const input = wrapper.get('[data-test="date-input"]').element as HTMLInputElement
+      expect(input.value).toBe('25/12/2026')
+    })
+  })
+})
diff --git a/app/components/malio/date/Date.vue b/app/components/malio/date/Date.vue
new file mode 100644
index 0000000..ae80a9f
--- /dev/null
+++ b/app/components/malio/date/Date.vue
@@ -0,0 +1,300 @@
+<template>
+  <div>
+    <div
+      ref="root"
+      :class="mergedGroupClass"
+    >
+      <input
+        :id="inputId"
+        :name="name"
+        data-test="date-input"
+        readonly
+        autocomplete="off"
+        :class="mergedInputClass"
+        :required="required"
+        :disabled="disabled"
+        :value="displayValue"
+        :aria-invalid="!!error"
+        :aria-describedby="describedBy"
+        :aria-expanded="isOpen"
+        aria-haspopup="dialog"
+        v-bind="attrs"
+        placeholder="_"
+        type="text"
+        @click="onFieldClick"
+      >
+
+      <label
+        v-if="label"
+        :for="inputId"
+        :class="mergedLabelClass"
+      >
+        {{ label }}
+      </label>
+
+      <div class="absolute right-3 top-1/2 flex -translate-y-1/2 items-center gap-1">
+        <button
+          v-if="showClear"
+          type="button"
+          data-test="clear"
+          class="text-m-muted hover:text-black"
+          aria-label="Effacer la date"
+          @click.stop="onClear"
+        >
+          <Icon
+            icon="mdi:close"
+            :width="16"
+            :height="16"
+          />
+        </button>
+        <Icon
+          data-test="calendar-icon"
+          icon="mdi:calendar-outline"
+          :width="20"
+          :height="20"
+          :class="iconStateClass"
+        />
+      </div>
+
+      <div
+        v-if="isOpen"
+        data-test="popover"
+        role="dialog"
+        class="absolute left-0 top-[calc(100%-4px)] z-20 min-w-[320px] rounded-b-md border border-t-0 bg-white"
+        :class="popoverBorderClass"
+      >
+        <CalendarHeader
+          :view-mode="viewMode"
+          :current-month="currentMonth"
+          :current-year="currentYear"
+          @prev="onPrev"
+          @next="onNext"
+          @toggle-view="toggleView"
+        />
+        <MonthGrid
+          v-if="viewMode === 'days'"
+          :month="currentMonth"
+          :year="currentYear"
+          :selected-date="modelValue ?? null"
+          :min="min"
+          :max="max"
+          @select="onSelectDay"
+        />
+        <MonthPicker
+          v-else
+          :selected-month="currentMonth"
+          @select="onSelectMonth"
+        />
+      </div>
+    </div>
+
+    <p
+      v-if="hint || hasError || hasSuccess"
+      :id="`${inputId}-describedby`"
+      :class="[
+        hasError ? 'text-m-danger' : hasSuccess ? 'text-m-success' : 'text-m-muted',
+        'mt-1 ml-[2px] text-xs',
+      ]"
+    >
+      {{ error || success || hint }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed, ref, useAttrs, useId, watch} from 'vue'
+import {Icon} from '@iconify/vue'
+import {twMerge} from 'tailwind-merge'
+import CalendarHeader from './internal/CalendarHeader.vue'
+import MonthGrid from './internal/MonthGrid.vue'
+import MonthPicker from './internal/MonthPicker.vue'
+import {useCalendarPopover} from './composables/useCalendarPopover'
+import {formatIsoToDisplay, isValidIso} from './composables/dateFormat'
+
+defineOptions({name: 'MalioDate', inheritAttrs: false})
+
+const props = withDefaults(
+  defineProps<{
+    id?: string
+    name?: string
+    label?: string
+    modelValue?: string | null
+    placeholder?: string
+    required?: boolean
+    disabled?: boolean
+    readonly?: boolean
+    hint?: string
+    error?: string
+    success?: string
+    min?: string
+    max?: string
+    clearable?: boolean
+    inputClass?: string
+    labelClass?: string
+    groupClass?: string
+  }>(),
+  {
+    id: '',
+    name: '',
+    label: '',
+    modelValue: undefined,
+    placeholder: 'JJ/MM/AAAA',
+    required: false,
+    disabled: false,
+    readonly: false,
+    hint: '',
+    error: '',
+    success: '',
+    min: undefined,
+    max: undefined,
+    clearable: true,
+    inputClass: '',
+    labelClass: '',
+    groupClass: '',
+  },
+)
+
+const emit = defineEmits<{(e: 'update:modelValue', value: string | null): void}>()
+
+const attrs = useAttrs()
+const generatedId = useId()
+const root = ref<HTMLElement | null>(null)
+
+const {isOpen, viewMode, open, close, toggleView} = useCalendarPopover(root)
+
+const today = new Date()
+const currentMonth = ref(today.getMonth())
+const currentYear = ref(today.getFullYear())
+
+const inputId = computed(() => props.id?.toString() || `malio-date-${generatedId}`)
+const hasError = computed(() => !!props.error)
+const hasSuccess = computed(() => !!props.success && !hasError.value)
+const displayValue = computed(() => formatIsoToDisplay(props.modelValue ?? null))
+const isFilled = computed(() => displayValue.value.length > 0)
+
+const showClear = computed(() =>
+  props.clearable && isFilled.value && !props.disabled && !props.readonly,
+)
+
+const describedBy = computed(() =>
+  (props.hint || hasError.value || hasSuccess.value) ? `${inputId.value}-describedby` : undefined,
+)
+
+const syncViewToValue = () => {
+  const iso = props.modelValue
+  if (iso && isValidIso(iso)) {
+    currentMonth.value = Number(iso.slice(5, 7)) - 1
+    currentYear.value = Number(iso.slice(0, 4))
+  } else {
+    const now = new Date()
+    currentMonth.value = now.getMonth()
+    currentYear.value = now.getFullYear()
+  }
+}
+
+watch(() => props.modelValue, (val) => {
+  if (val && !isValidIso(val) && import.meta.dev) {
+    console.warn(`[MalioDate] modelValue invalide ignoré : "${val}"`)
+  }
+  if (isOpen.value) syncViewToValue()
+})
+
+const onFieldClick = () => {
+  if (props.disabled || props.readonly) return
+  if (isOpen.value) {
+    close()
+    return
+  }
+  syncViewToValue()
+  open()
+}
+
+const onClear = () => emit('update:modelValue', null)
+
+const onSelectDay = (iso: string) => {
+  emit('update:modelValue', iso)
+  close()
+}
+
+const onSelectMonth = (month: number) => {
+  currentMonth.value = month
+  toggleView()
+}
+
+const onPrev = () => {
+  if (viewMode.value === 'months') {
+    currentYear.value -= 1
+    return
+  }
+  if (currentMonth.value === 0) {
+    currentMonth.value = 11
+    currentYear.value -= 1
+  } else {
+    currentMonth.value -= 1
+  }
+}
+
+const onNext = () => {
+  if (viewMode.value === 'months') {
+    currentYear.value += 1
+    return
+  }
+  if (currentMonth.value === 11) {
+    currentMonth.value = 0
+    currentYear.value += 1
+  } else {
+    currentMonth.value += 1
+  }
+}
+
+const mergedGroupClass = computed(() =>
+  twMerge('relative flex h-12 w-full items-center', props.groupClass),
+)
+
+const mergedInputClass = computed(() =>
+  twMerge(
+    'floating-input peer min-h-[40px] w-full cursor-pointer rounded-md border bg-white py-1 pl-3 pr-10 text-lg outline-none placeholder:text-transparent',
+    isFilled.value ? 'border-black' : 'border-m-muted',
+    props.disabled ? 'cursor-not-allowed text-black/60 border-m-muted' : '',
+    hasError.value
+      ? 'border-m-danger'
+      : hasSuccess.value
+        ? 'border-m-success'
+        : 'focus:border-m-primary',
+    isOpen.value ? '!rounded-b-none !border-b-0 border-m-primary' : '',
+    props.inputClass,
+  ),
+)
+
+const mergedLabelClass = computed(() =>
+  twMerge(
+    'floating-label absolute left-3 top-2 mt-[5px] inline-block origin-left font-medium text-sm transition-transform duration-150',
+    (isFilled.value || isOpen.value) ? '-translate-y-[1.25rem] scale-90' : '',
+    hasError.value
+      ? 'text-m-danger'
+      : hasSuccess.value
+        ? 'text-m-success'
+        : 'peer-placeholder-shown:text-m-muted text-black',
+    props.labelClass,
+  ),
+)
+
+const iconStateClass = computed(() => {
+  if (hasError.value) return 'text-m-danger'
+  if (hasSuccess.value) return 'text-m-success'
+  if (isOpen.value) return 'text-m-primary'
+  if (isFilled.value) return 'text-black'
+  return 'text-m-muted'
+})
+
+const popoverBorderClass = computed(() =>
+  hasError.value ? 'border-m-danger' : hasSuccess.value ? 'border-m-success' : 'border-m-primary',
+)
+</script>
+
+<style scoped>
+.floating-label {
+  background: white;
+  padding: 0 0.25rem;
+}
+</style>
diff --git a/app/components/malio/date/internal/CalendarHeader.vue b/app/components/malio/date/internal/CalendarHeader.vue
new file mode 100644
index 0000000..03d7920
--- /dev/null
+++ b/app/components/malio/date/internal/CalendarHeader.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="flex h-12 items-center justify-between border-b border-m-primary/20 px-2">
+    <button
+      type="button"
+      data-test="header-prev"
+      class="rounded p-2 hover:bg-m-primary/10"
+      :aria-label="viewMode === 'days' ? 'Mois précédent' : 'Année précédente'"
+      @click="emit('prev')"
+    >
+      <Icon
+        icon="mdi:chevron-left"
+        :width="20"
+        :height="20"
+      />
+    </button>
+
+    <button
+      type="button"
+      data-test="header-toggle"
+      class="flex items-center gap-1 rounded px-2 py-1 text-base font-medium hover:bg-m-primary/10"
+      @click="emit('toggle-view')"
+    >
+      {{ label }}
+      <Icon
+        icon="mdi:chevron-down"
+        :width="16"
+        :height="16"
+      />
+    </button>
+
+    <button
+      type="button"
+      data-test="header-next"
+      class="rounded p-2 hover:bg-m-primary/10"
+      :aria-label="viewMode === 'days' ? 'Mois suivant' : 'Année suivante'"
+      @click="emit('next')"
+    >
+      <Icon
+        icon="mdi:chevron-right"
+        :width="20"
+        :height="20"
+      />
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed} from 'vue'
+import {Icon} from '@iconify/vue'
+
+defineOptions({name: 'MalioDateCalendarHeader'})
+
+const props = defineProps<{
+  viewMode: 'days' | 'months'
+  currentMonth: number
+  currentYear: number
+}>()
+
+const emit = defineEmits<{
+  (e: 'prev' | 'next' | 'toggle-view'): void
+}>()
+
+const monthsLong = ['janvier', 'février', 'mars', 'avril', 'mai', 'juin',
+  'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre']
+
+const label = computed(() => {
+  const name = monthsLong[props.currentMonth]
+  return `${name.charAt(0).toUpperCase()}${name.slice(1)} ${props.currentYear}`
+})
+</script>
diff --git a/app/components/malio/date/internal/MonthGrid.vue b/app/components/malio/date/internal/MonthGrid.vue
new file mode 100644
index 0000000..6bdab10
--- /dev/null
+++ b/app/components/malio/date/internal/MonthGrid.vue
@@ -0,0 +1,93 @@
+<template>
+  <div data-test="month-grid">
+    <div class="grid grid-cols-8">
+      <div class="flex h-8 items-center justify-center text-xs font-medium uppercase text-m-muted">
+        Sem
+      </div>
+      <div
+        v-for="d in dayLabels"
+        :key="d"
+        class="flex h-8 items-center justify-center text-xs font-medium uppercase text-m-muted"
+      >
+        {{ d }}
+      </div>
+
+      <template
+        v-for="week in weeks"
+        :key="week.days[0].isoDate"
+      >
+        <div
+          data-test="week-number"
+          class="flex h-10 items-center justify-center bg-m-primary/10 text-sm text-m-primary/70"
+        >
+          {{ week.weekNumber }}
+        </div>
+        <button
+          v-for="cell in week.days"
+          :key="cell.isoDate"
+          type="button"
+          data-test="day"
+          :data-iso="cell.isoDate"
+          :disabled="!inRange(cell.isoDate)"
+          :aria-label="ariaLabel(cell)"
+          :aria-disabled="!inRange(cell.isoDate)"
+          class="flex h-10 w-10 items-center justify-center text-sm transition-colors duration-100"
+          :class="cellClass(cell)"
+          @click="onSelect(cell.isoDate)"
+        >
+          {{ cell.day }}
+        </button>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {toRef} from 'vue'
+import {useMonthMatrix, type DayCell} from '../composables/useMonthMatrix'
+import {isDateInRange} from '../composables/dateFormat'
+
+defineOptions({name: 'MalioDateMonthGrid'})
+
+const props = withDefaults(
+  defineProps<{
+    month: number
+    year: number
+    selectedDate?: string | null
+    min?: string
+    max?: string
+  }>(),
+  {selectedDate: null, min: undefined, max: undefined},
+)
+
+const emit = defineEmits<{(e: 'select', iso: string): void}>()
+
+const dayLabels = ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim']
+const monthsLong = ['janvier', 'février', 'mars', 'avril', 'mai', 'juin',
+  'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre']
+
+const {weeks} = useMonthMatrix(toRef(props, 'month'), toRef(props, 'year'))
+
+const inRange = (iso: string) => isDateInRange(iso, props.min, props.max)
+
+const ariaLabel = (cell: DayCell) => {
+  const [, m, d] = cell.isoDate.split('-')
+  return `${Number(d)} ${monthsLong[Number(m) - 1]} ${cell.isoDate.slice(0, 4)}`
+}
+
+const cellClass = (cell: DayCell) => {
+  const selected = props.selectedDate === cell.isoDate
+  if (!inRange(cell.isoDate)) return 'text-m-muted/30 cursor-not-allowed'
+  if (selected) return 'bg-m-primary text-white font-medium rounded-full'
+  const parts = ['cursor-pointer hover:bg-m-primary/10 rounded-full']
+  if (cell.isToday) parts.push('border border-m-primary text-m-primary font-semibold')
+  else if (cell.isCurrentMonth) parts.push('text-black')
+  else parts.push('text-m-muted/50')
+  return parts.join(' ')
+}
+
+const onSelect = (iso: string) => {
+  if (!inRange(iso)) return
+  emit('select', iso)
+}
+</script>
diff --git a/app/components/malio/date/internal/MonthPicker.vue b/app/components/malio/date/internal/MonthPicker.vue
new file mode 100644
index 0000000..ec67dd6
--- /dev/null
+++ b/app/components/malio/date/internal/MonthPicker.vue
@@ -0,0 +1,32 @@
+<template>
+  <div
+    data-test="month-picker"
+    class="grid grid-cols-4 gap-2 p-3"
+  >
+    <button
+      v-for="(name, index) in monthsShort"
+      :key="name"
+      type="button"
+      data-test="month"
+      :data-month="index"
+      class="rounded py-3 text-sm transition-colors duration-100"
+      :class="index === selectedMonth
+        ? 'bg-m-primary text-white'
+        : 'text-black hover:bg-m-primary/10'"
+      @click="emit('select', index)"
+    >
+      {{ name }}
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({name: 'MalioDateMonthPicker'})
+
+defineProps<{selectedMonth?: number}>()
+
+const emit = defineEmits<{(e: 'select', month: number): void}>()
+
+const monthsShort = ['Janv', 'Févr', 'Mars', 'Avr', 'Mai', 'Juin',
+  'Juil', 'Août', 'Sept', 'Oct', 'Nov', 'Déc']
+</script>
diff --git a/app/story/date/datePicker.story.vue b/app/story/date/datePicker.story.vue
new file mode 100644
index 0000000..5c6248f
--- /dev/null
+++ b/app/story/date/datePicker.story.vue
@@ -0,0 +1,94 @@
+<template>
+  <Story title="Date/Date">
+    <div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Simple</h2>
+        <MalioDate
+          v-model="simpleValue"
+          label="Date de naissance"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Valeur initiale</h2>
+        <MalioDate
+          v-model="initialValue"
+          label="Date du jour"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Avec min/max</h2>
+        <MalioDate
+          v-model="boundedValue"
+          label="Date du rendez-vous"
+          :min="todayIso"
+          :max="maxIso"
+          hint="Entre aujourd'hui et +30 jours"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Non effaçable</h2>
+        <MalioDate
+          v-model="initialValue"
+          label="Date verrouillée"
+          :clearable="false"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
+        <MalioDate
+          v-model="initialValue"
+          label="Désactivé"
+          disabled
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Lecture seule</h2>
+        <MalioDate
+          v-model="initialValue"
+          label="Lecture seule"
+          readonly
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Erreur</h2>
+        <MalioDate
+          v-model="errorValue"
+          label="Date limite"
+          error="Date invalide"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Succès</h2>
+        <MalioDate
+          v-model="initialValue"
+          label="Date confirmée"
+          success="Enregistrée"
+        />
+      </div>
+    </div>
+  </Story>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+import MalioDate from '../../components/malio/date/Date.vue'
+
+const pad = (n: number) => String(n).padStart(2, '0')
+const toIso = (d: Date) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
+
+const now = new Date()
+const todayIso = toIso(now)
+const maxIso = toIso(new Date(now.getTime() + 30 * 86400000))
+
+const simpleValue = ref<string | null>(null)
+const initialValue = ref<string | null>(todayIso)
+const boundedValue = ref<string | null>(null)
+const errorValue = ref<string | null>(null)
+</script>