ionic-team · averyjohnston · Jul 27, 2022 · Jul 13, 2022 · Jul 14, 2022 · Jul 19, 2022
diff --git a/docs/api/datetime.md b/docs/api/datetime.md
@@ -34,6 +34,8 @@ import ShowingConfirmationButtons from '@site/static/usage/datetime/buttons/show
 import CustomizingButtons from '@site/static/usage/datetime/buttons/customizing-buttons/index.md';
 import CustomizingButtonTexts from '@site/static/usage/datetime/buttons/customizing-button-texts/index.md';
 
+import MultipleDateSelection from '@site/static/usage/datetime/multiple/index.md';
+
 import Theming from '@site/static/usage/datetime/theming/index.md';
 
 <head>
@@ -237,6 +239,16 @@ import Wheel from '@site/static/usage/datetime/presentation/wheel/index.md';
 
 <Wheel />
 
+## Multiple Date Selection
+
+If the `multiple` property is set to `true`, multiple dates can be selected from the calendar picker. Clicking a selected date will deselect it.
+
+:::note
+This property is only supported when using `presentation="date"` and `preferWheel="false"`.
+:::
+
+<MultipleDateSelection />
+
 ## Titles
 
 By default, `ion-datetime` does not show any header or title associated with the component. Developers can use the `showDefaultTitle` property to show the default title/header configuration. They can also use the `title` slot to customize what is rendered in the header.

diff --git a/static/usage/datetime/multiple/angular.md b/static/usage/datetime/multiple/angular.md
@@ -0,0 +1,7 @@
+```html
+<ion-datetime
+  presentation="date"
+  [multiple]="true"
+  [value]="['2022-06-03', '2022-06-13', '2022-06-29']"
+></ion-datetime>
+```
diff --git a/static/usage/datetime/multiple/demo.html b/static/usage/datetime/multiple/demo.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Datetime</title>
+    <link rel="stylesheet" href="../../common.css" />
+    <script src="../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+    <style>
+      ion-datetime {
+        width: 350px;
+      }
+    </style>
+  </head>
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-datetime presentation="date" multiple="true"></ion-datetime>
+        </div>
+      </ion-content>
+    </ion-app>
+
+    <script>
+      const datetime = document.querySelector('ion-datetime');
+      datetime.value = ['2022-06-03', '2022-06-13', '2022-06-29'];
+    </script>
+  </body>
+</html>
diff --git a/static/usage/datetime/multiple/index.md b/static/usage/datetime/multiple/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground size="medium" code={{ javascript, react, vue, angular }} src="usage/datetime/multiple/demo.html" />
diff --git a/static/usage/datetime/multiple/javascript.md b/static/usage/datetime/multiple/javascript.md
@@ -0,0 +1,8 @@
+```html
+<ion-datetime presentation="date" multiple="true"></ion-datetime>
+
+<script>
+  const datetime = document.querySelector('ion-datetime');
+  datetime.value = ['2022-06-03', '2022-06-13', '2022-06-29'];
+</script>
+```
diff --git a/static/usage/datetime/multiple/react.md b/static/usage/datetime/multiple/react.md
@@ -0,0 +1,20 @@
+```tsx
+import React, { useRef, useEffect } from 'react';
+import { IonDatetime } from '@ionic/react';
+
+function Example() {
+  const datetime = useRef<null | HTMLIonDatetimeElement>(null);
+
+  useEffect(() => {
+    if(!datetime.current) return;
+    datetime.current.value = ['2022-06-03', '2022-06-13', '2022-06-29'];
+  }, []);
+
+  return <IonDatetime
+    ref={datetime}
+    presentation="date"
+    multiple={true}
+  ></IonDatetime>;
+}
+export default Example;
+```
diff --git a/static/usage/datetime/multiple/vue.md b/static/usage/datetime/multiple/vue.md
@@ -0,0 +1,18 @@
+```html
+<template>
+  <ion-datetime
+    presentation="date"
+    :multiple="true"
+    :value="['2022-06-03', '2022-06-13', '2022-06-29']"
+  ></ion-datetime>
+</template>
+
+<script lang="ts">
+  import { IonDatetime } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonDatetime },
+  });
+</script>
+```