feat : page playground MalioDateTime (#MUI-33)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

.playground/pages/composant/date/datetime.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="space-y-6 p-4">
+    <h1 class="text-2xl font-bold">MalioDateTime</h1>
+
+    <div class="flex flex-wrap items-start gap-10">
+      <div class="w-[396px] space-y-3">
+        <h2 class="font-semibold">Simple</h2>
+        <MalioDateTime
+          v-model="value"
+          label="Date et heure du rendez-vous"
+          hint="Choisis un jour puis une heure"
+        />
+        <div class="rounded border p-3 text-sm">
+          <p>Valeur (ISO naïf) : <code>{{ value ?? 'null' }}</code></p>
+        </div>
+        <button
+          type="button"
+          class="rounded border px-3 py-1.5"
+          @click="value = null"
+        >
+          Réinitialiser
+        </button>
+      </div>
+
+      <div class="w-[396px] space-y-3">
+        <h2 class="font-semibold">Valeur initiale + bornes</h2>
+        <MalioDateTime
+          v-model="bounded"
+          label="Créneau"
+          :min="todayIso"
+          :max="maxIso"
+          hint="Entre aujourd'hui et +30 jours"
+        />
+        <div class="rounded border p-3 text-sm">
+          <p>Valeur (ISO naïf) : <code>{{ bounded ?? 'null' }}</code></p>
+        </div>
+      </div>
+    </div>
+  </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())}T00:00:00`
+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>('2026-05-20T14:30:00')
+</script>

.playground/playground.nav.ts

@@ -32,6 +32,7 @@ export const navSections: SidebarSection[] = [
       {label: 'Date', to: '/composant/date/date'},
       {label: 'Plage de dates', to: '/composant/date/dateRange'},
       {label: 'Semaine', to: '/composant/date/dateWeek'},
+      {label: 'Date & heure', to: '/composant/date/datetime'},
       {label: 'Heure', to: '/composant/time/time'},
     ],
   },