docs(datetime): add range selection playgrounds

docs/api/datetime.mdx

@@ -41,11 +41,14 @@ import ShowAdjacentDays from '@site/static/usage/v10/datetime/show-adjacent-days
 
 import MultipleDateSelection from '@site/static/usage/v10/datetime/multiple/index.mdx';
 
+import Range from '@site/static/usage/v10/datetime/range/index.mdx';
+
 import GlobalTheming from '@site/static/usage/v10/datetime/styling/global-theming/index.mdx';
 import CalendarHeaderStyling from '@site/static/usage/v10/datetime/styling/calendar-header/index.mdx';
 import CalendarDaysStyling from '@site/static/usage/v10/datetime/styling/calendar-days/index.mdx';
 import DatetimeHeaderStyling from '@site/static/usage/v10/datetime/styling/datetime-header/index.mdx';
 import WheelStyling from '@site/static/usage/v10/datetime/styling/wheel-styling/index.mdx';
+import RangeStyling from '@site/static/usage/v10/datetime/styling/range/index.mdx';
 
 <head>
   <title>ion-datetime: Ionic API Input for Datetime Format Picker</title>
@@ -279,7 +282,7 @@ This property is only supported when using `presentation="date"` and `preferWhee
 
 ## Multiple Date Selection {/* #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.
+If the `selectionMode` property is set to `"multiple"`, multiple dates can be selected from the calendar picker. Clicking a selected date will deselect it. The `multiple` property is deprecated in favor of `selectionMode="multiple"`.
 
 :::note
 
@@ -289,6 +292,20 @@ This property is only supported when using `presentation="date"` and `preferWhee
 
 <MultipleDateSelection />
 
+## Range Selection {/* #range-selection */}
+
+If the `selectionMode` property is set to `"range"`, a range of dates can be selected from the calendar picker. Clicking a date sets the start of the range, and clicking a later date sets the end. If the second click falls before the start, a new range begins from that date. Once both dates are set, clicking a date on or after the start moves the end of the range. The `value` is an array of ISO 8601 strings representing the range: `[start, end]` for a complete range or `[start]` for a partial one. The `value` and `ionChange` event only update once both dates are picked. When `showDefaultButtons` is enabled, the confirm button stays disabled until the range is complete. A range can't include a disabled date, so clicking a date past one starts a new range instead.
+
+The `startDateLabel` and `endDateLabel` properties customize the placeholder text in the header when `showDefaultTitle` is enabled, and the labels screen readers announce on the start and end days. Set them to translate these labels.
+
+:::note
+
+This property is only supported when using `presentation="date"` and `preferWheel="false"`.
+
+:::
+
+<Range />
+
 ## Titles {/* #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.
@@ -409,6 +426,12 @@ The wheels used in `ion-datetime` can be styled through a combination of shadow
 
 <WheelStyling />
 
+### Range Selection {/* #range-selection-styling */}
+
+The range selection in a grid-style `ion-datetime` is made up of the start and end days and the track that connects them. It can be styled through a combination of shadow parts and CSS variables.
+
+<RangeStyling />
+
 ## Time Zones {/* #time-zones */}
 
 Ionic's `ion-datetime` follows the [datetime-local](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local) behavior of not manipulating or setting the time zone inside of a datetime control. In other words, a time value of "07:00" will not be adjusted according to different time zones.

static/usage/v10/datetime/multiple/angular/example_component_html.md

@@ -1,3 +1,7 @@
 ```html
-<ion-datetime presentation="date" [multiple]="true" [value]="['2022-06-03', '2022-06-13', '2022-06-29']"></ion-datetime>
+<ion-datetime
+  presentation="date"
+  selection-mode="multiple"
+  [value]="['2022-06-03', '2022-06-13', '2022-06-29']"
+></ion-datetime>
 ```

static/usage/v10/datetime/multiple/demo.html

@@ -19,7 +19,7 @@
     <ion-app>
       <ion-content>
         <div class="container">
-          <ion-datetime presentation="date" multiple="true"></ion-datetime>
+          <ion-datetime presentation="date" selection-mode="multiple"></ion-datetime>
         </div>
       </ion-content>
     </ion-app>

static/usage/v10/datetime/multiple/javascript.md

@@ -1,5 +1,5 @@
 ```html
-<ion-datetime presentation="date" multiple="true"></ion-datetime>
+<ion-datetime presentation="date" selection-mode="multiple"></ion-datetime>
 
 <script>
   const datetime = document.querySelector('ion-datetime');

static/usage/v10/datetime/multiple/react.md

@@ -10,7 +10,7 @@ function Example() {
     datetime.current.value = ['2022-06-03', '2022-06-13', '2022-06-29'];
   }, []);
 
-  return <IonDatetime ref={datetime} presentation="date" multiple={true}></IonDatetime>;
+  return <IonDatetime ref={datetime} presentation="date" selectionMode="multiple"></IonDatetime>;
 }
 export default Example;
 ```

static/usage/v10/datetime/multiple/vue.md

@@ -1,6 +1,10 @@
 ```html
 <template>
-  <ion-datetime presentation="date" :multiple="true" :value="['2022-06-03', '2022-06-13', '2022-06-29']"></ion-datetime>
+  <ion-datetime
+    presentation="date"
+    selection-mode="multiple"
+    :value="['2022-06-03', '2022-06-13', '2022-06-29']"
+  ></ion-datetime>
 </template>
 
 <script setup lang="ts">

static/usage/v10/datetime/range/angular/example_component_html.md

@@ -0,0 +1,3 @@
+```html
+<ion-datetime presentation="date" selection-mode="range"></ion-datetime>
+```

static/usage/v10/datetime/range/angular/example_component_ts.md

@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['./example.component.css'],
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```

static/usage/v10/datetime/range/demo.html

@@ -0,0 +1,22 @@
+<!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@9/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@9/css/ionic.bundle.css" />
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-datetime presentation="date" selection-mode="range"></ion-datetime>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>

static/usage/v10/datetime/range/index.mdx

@@ -0,0 +1,25 @@
+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_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="10"
+  size="medium"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v10/datetime/range/demo.html"
+/>

static/usage/v10/datetime/range/javascript.md

@@ -0,0 +1,3 @@
+```html
+<ion-datetime presentation="date" selection-mode="range"></ion-datetime>
+```

static/usage/v10/datetime/range/react.md

@@ -0,0 +1,13 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonDatetime presentation="date" selectionMode="range" />
+    </>
+  );
+}
+export default Example;
+```

static/usage/v10/datetime/range/vue.md

@@ -0,0 +1,9 @@
+```vue
+<template>
+  <ion-datetime presentation="date" selection-mode="range"></ion-datetime>
+</template>
+
+<script setup lang="ts">
+import { IonDatetime } from '@ionic/vue';
+</script>
+```

static/usage/v10/datetime/styling/range/angular/example_component_css.md

@@ -0,0 +1,10 @@
+```css
+ion-datetime {
+  --range-background: rgb(235, 68, 90, 0.1);
+}
+
+ion-datetime::part(range-start),
+ion-datetime::part(range-end) {
+  background: rgb(235, 68, 90);
+}
+```

static/usage/v10/datetime/styling/range/angular/example_component_html.md

@@ -0,0 +1,3 @@
+```html
+<ion-datetime presentation="date" selection-mode="range"></ion-datetime>
+```

static/usage/v10/datetime/styling/range/angular/example_component_ts.md

@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonDatetime } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['./example.component.css'],
+  imports: [IonDatetime],
+})
+export class ExampleComponent {}
+```

static/usage/v10/datetime/styling/range/demo.html

@@ -0,0 +1,33 @@
+<!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@9/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@9/css/ionic.bundle.css" />
+
+    <style>
+      ion-datetime {
+        --range-background: rgb(235, 68, 90, 0.1);
+      }
+
+      ion-datetime::part(range-start),
+      ion-datetime::part(range-end) {
+        background: rgb(235, 68, 90);
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-datetime presentation="date" selection-mode="range"></ion-datetime>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>

static/usage/v10/datetime/styling/range/index.mdx

@@ -0,0 +1,35 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="10"
+  size="medium"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v10/datetime/styling/range/demo.html"
+/>

static/usage/v10/datetime/styling/range/javascript.md

@@ -0,0 +1,14 @@
+```html
+<ion-datetime presentation="date" selection-mode="range"></ion-datetime>
+
+<style>
+  ion-datetime {
+    --range-background: rgb(235, 68, 90, 0.1);
+  }
+
+  ion-datetime::part(range-start),
+  ion-datetime::part(range-end) {
+    background: rgb(235, 68, 90);
+  }
+</style>
+```

static/usage/v10/datetime/styling/range/react/main_css.md

@@ -0,0 +1,10 @@
+```css
+ion-datetime {
+  --range-background: rgb(235, 68, 90, 0.1);
+}
+
+ion-datetime::part(range-start),
+ion-datetime::part(range-end) {
+  background: rgb(235, 68, 90);
+}
+```

static/usage/v10/datetime/styling/range/react/main_tsx.md

@@ -0,0 +1,15 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <>
+      <IonDatetime presentation="date" selectionMode="range" />
+    </>
+  );
+}
+export default Example;
+```

static/usage/v10/datetime/styling/range/vue.md

@@ -0,0 +1,20 @@
+```vue
+<template>
+  <ion-datetime presentation="date" selection-mode="range"></ion-datetime>
+</template>
+
+<script setup lang="ts">
+import { IonDatetime } from '@ionic/vue';
+</script>
+
+<style scoped>
+ion-datetime {
+  --range-background: rgb(235, 68, 90, 0.1);
+}
+
+ion-datetime::part(range-start),
+ion-datetime::part(range-end) {
+  background: rgb(235, 68, 90);
+}
+</style>
+```