docs(ui5-dynamic-date-range): add custom option sample

packages/main/src/bundle.esm.ts

@@ -52,6 +52,7 @@ import DateTimePicker from "./DateTimePicker.js";
 import Dialog from "./Dialog.js";
 import DynamicDateRange from "./DynamicDateRange.js";
 import Today from "./dynamic-date-range-options/Today.js";
+import TodayFromTo from "./dynamic-date-range-options/TodayFromTo.js";
 import Yesterday from "./dynamic-date-range-options/Yesterday.js";
 import Tomorrow from "./dynamic-date-range-options/Tomorrow.js";
 import SingleDate from "./dynamic-date-range-options/SingleDate.js";

packages/main/src/dynamic-date-range-options/TodayFromTo.ts

@@ -0,0 +1,96 @@
+import DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js";
+import UI5Date from "@ui5/webcomponents-localization/dist/dates/UI5Date.js";
+import type { DynamicDateRangeValue, IDynamicDateRangeOption } from "../DynamicDateRange.js";
+import DynamicDateRange from "../DynamicDateRange.js";
+import TodayFromToTemplate from "./TodayFromToTemplate.js";
+import type { JsxTemplate } from "@ui5/webcomponents-base/dist/index.js";
+
+/**
+ * @class
+ * @constructor
+ * @public
+ */
+class TodayFromToDays implements IDynamicDateRangeOption {
+	template: JsxTemplate;
+
+	constructor() {
+		this.template = TodayFromToTemplate;
+	}
+
+	parse(value: string): DynamicDateRangeValue {
+		const match = value.match(/Today -(\d+)\/\+(\d+) days/);
+
+		if (match) {
+			const x = parseInt(match[1]);
+			const y = parseInt(match[2]);
+			return { operator: this.operator, values: [x, y] };
+		}
+
+		return { operator: this.operator, values: [0, 0] };
+	}
+
+	format(value: DynamicDateRangeValue) {
+		if (!value.values || value.values.length !== 2) {
+			value.values = [0, 0];
+		}
+
+		// Format values in a date range
+		if (value.values[0] instanceof Date) {
+			const dateValues = value.values as Array<Date>;
+			return this.getFormat().format(dateValues);
+		}
+
+		// Format values in the pattern "Today -X/+Y days"
+		const x = value.values[0];
+		const y = value.values[1] as number;
+
+		return `Today -${x}/+${y} days`;
+	}
+
+	toDates(value: DynamicDateRangeValue): Array<Date> {
+		if (!value.values || value.values.length !== 2) {
+			return [];
+		}
+		const x = value.values[0] as number;
+		const y = value.values[1] as number;
+		const today = UI5Date.getInstance();
+
+		const startDate = x ? UI5Date.getInstance(today.getFullYear(), today.getMonth(), today.getDate() - x) : UI5Date.getInstance();
+		const endDate = y ? UI5Date.getInstance(today.getFullYear(), today.getMonth(), today.getDate() + y) : UI5Date.getInstance();
+
+		startDate?.setHours(0, 0, 0, 0);
+		endDate?.setHours(23, 59, 59, 999);
+
+		return [startDate, endDate];
+	}
+
+	isValidString(value: string): boolean {
+		const pattern = this.text.replace(/[.*+?^${}()|[\]\\/-]/g, "\\$&").replace("X", "\\d+").replace("Y", "\\d+");
+		const regex = new RegExp(`^${pattern}$`, "i");
+		return regex.test(value);
+	}
+
+	get text() {
+		return "Today -X/+Y days";
+	}
+
+	get operator() {
+		return "TODAYFROMTO";
+	}
+
+	get icon() {
+		return "check-availability";
+	}
+
+	getFormat(): DateFormat {
+		return DateFormat.getDateInstance({
+			strictParsing: true,
+			interval: true,
+			intervalDelimiter: " - ",
+		});
+	}
+}
+
+DynamicDateRange.register("TODAYFROMTO", TodayFromToDays);
+
+export default TodayFromToDays;

packages/main/src/dynamic-date-range-options/TodayFromToTemplate.tsx

@@ -0,0 +1,55 @@
+import type DynamicDateRange from "../DynamicDateRange.js";
+import Label from "../Label.js";
+import StepInput from "../StepInput.js";
+
+export default function TodayFromToTemplate(this: DynamicDateRange) {
+	const currentValues = this.currentValue?.values;
+
+	const xValue = currentValues ? currentValues[0] as number : 0;
+	const yValue = currentValues ? currentValues[1] as number : 0;
+
+	const handleNumberChange = (e: CustomEvent) => {
+		const target = e.target as StepInput;
+		const input = target.id;
+		const newValue = Number(target.value);
+
+		// Get current values, defaulting to existing values or 0
+		let newXValue = xValue;
+		let newYValue = yValue;
+
+		// Update the appropriate value based on which input changed
+		if (input === "x-input") {
+			newXValue = newValue;
+		} else if (input === "y-input") {
+			newYValue = newValue;
+		}
+
+		// Update currentValue with both values
+		this.currentValue = {
+			operator: "TODAYFROMTO",
+			values: [newXValue, newYValue],
+		};
+	};
+	return (
+		<div class=".ui5-last-next-container ui5-last-next-container-padded">
+			<div class="ui5-ddr-input-container ui5-ddr-input-container-right-aligned">
+				<Label class="ui5-ddr-label">Before Today:</Label>
+				<StepInput
+					id="x-input"
+					value={xValue}
+					min={0}
+					max={9999}
+					onChange={handleNumberChange}
+				/>
+				<Label class="ui5-ddr-label">After Today:</Label>
+				<StepInput
+					id="y-input"
+					value={yValue}
+					min={0}
+					max={9999}
+					onChange={handleNumberChange}
+				/>
+			</div>
+		</div>
+	);
+}

packages/main/test/pages/DynamicDateRange.html

@@ -26,7 +26,7 @@ <h3>Basic Options</h3>
 			</p>
 			<ui5-dynamic-date-range
 				id="basic"
-				options="TODAY, TOMORROW, YESTERDAY, DATE, DATERANGE"
+				options="TODAYFROMTO, TODAY, TOMORROW, YESTERDAY, DATE, DATERANGE"
 			></ui5-dynamic-date-range>
 		</div>
 

packages/website/docs/_components_pages/main/DynamicDateRange.mdx

@@ -3,6 +3,7 @@ sidebar_class_name: newComponentBadge
 ---
 
 import Basic from "../../_samples/main/DynamicDateRange/Basic/Basic.md";
+import CustomOption from "../../_samples/main/DynamicDateRange/CustomOption/CustomOption.md";
 import DynamicDateRangeValueSample from "../../_samples/main/DynamicDateRange/DynamicDateRangeValueSample/DynamicDateRangeValueSample.md";
 
 <%COMPONENT_OVERVIEW%>
@@ -15,4 +16,7 @@ import DynamicDateRangeValueSample from "../../_samples/main/DynamicDateRange/Dy
 ## More Samples
 
 ### DynamicDateRangeValueSample
-<DynamicDateRangeValueSample />
+<DynamicDateRangeValueSample />
+
+### CustomOption
+<CustomOption />

packages/website/docs/_samples/main/DynamicDateRange/CustomOption/CustomOption.md

@@ -0,0 +1,4 @@
+import html from '!!raw-loader!./sample.html';
+import js from '!!raw-loader!./main.js';
+
+<Editor html={html} js={js} />

packages/website/docs/_samples/main/DynamicDateRange/CustomOption/TodayFromTo.ts

@@ -0,0 +1,96 @@
+import DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js";
+import UI5Date from "@ui5/webcomponents-localization/dist/dates/UI5Date.js";
+import type { DynamicDateRangeValue, IDynamicDateRangeOption } from "@ui5/webcomponents/dist/DynamicDateRange.js";
+import DynamicDateRange from "@ui5/webcomponents/dist/DynamicDateRange.js";
+import TodayFromToTemplate from "./TodayFromToTemplate.js";
+import type { JsxTemplate } from "@ui5/webcomponents-base/dist/index.js";
+
+/**
+ * @class
+ * @constructor
+ * @public
+ */
+class TodayFromToDays implements IDynamicDateRangeOption {
+	template: JsxTemplate;
+
+	constructor() {
+		this.template = TodayFromToTemplate;
+	}
+
+	parse(value: string): DynamicDateRangeValue {
+		const match = value.match(/Today -(\d+)\/\+(\d+) days/);
+
+		if (match) {
+			const x = parseInt(match[1]);
+			const y = parseInt(match[2]);
+			return { operator: this.operator, values: [x, y] };
+		}
+
+		return { operator: this.operator, values: [0, 0] };
+	}
+
+	format(value: DynamicDateRangeValue) {
+		if (!value.values || value.values.length !== 2) {
+			value.values = [0, 0];
+		}
+
+		// Format values in a date range
+		if (value.values[0] instanceof Date) {
+			const dateValues = value.values as Array<Date>;
+			return this.getFormat().format(dateValues);
+		}
+
+		// Format values in the pattern "Today -X/+Y days"
+		const x = value.values[0];
+		const y = value.values[1] as number;
+
+		return `Today -${x}/+${y} days`;
+	}
+
+	toDates(value: DynamicDateRangeValue): Array<Date> {
+		if (!value.values || value.values.length !== 2) {
+			return [];
+		}
+		const x = value.values[0] as number;
+		const y = value.values[1] as number;
+		const today = UI5Date.getInstance();
+
+		const startDate = x ? UI5Date.getInstance(today.getFullYear(), today.getMonth(), today.getDate() - x) : UI5Date.getInstance();
+		const endDate = y ? UI5Date.getInstance(today.getFullYear(), today.getMonth(), today.getDate() + y) : UI5Date.getInstance();
+
+		startDate?.setHours(0, 0, 0, 0);
+		endDate?.setHours(23, 59, 59, 999);
+
+		return [startDate, endDate];
+	}
+
+	isValidString(value: string): boolean {
+		const pattern = this.text.replace(/[.*+?^${}()|[\]\\/-]/g, "\\$&").replace("X", "\\d+").replace("Y", "\\d+");
+		const regex = new RegExp(`^${pattern}$`, "i");
+		return regex.test(value);
+	}
+
+	get text() {
+		return "Today -X/+Y days";
+	}
+
+	get operator() {
+		return "TODAYFROMTO";
+	}
+
+	get icon() {
+		return "check-availability";
+	}
+
+	getFormat(): DateFormat {
+		return DateFormat.getDateInstance({
+			strictParsing: true,
+			interval: true,
+			intervalDelimiter: " - ",
+		});
+	}
+}
+
+DynamicDateRange.register("TODAYFROMTO", TodayFromToDays);
+
+export default TodayFromToDays;

packages/website/docs/_samples/main/DynamicDateRange/CustomOption/TodayFromToTemplate.tsx

@@ -0,0 +1,55 @@
+import type DynamicDateRange from "@ui5/webcomponents/dist/DynamicDateRange.js";
+import Label from "@ui5/webcomponents/dist/Label.js";
+import StepInput from "@ui5/webcomponents/dist/StepInput.js";
+
+export default function TodayFromToTemplate(this: DynamicDateRange) {
+	const currentValues = this.currentValue?.values;
+
+	const xValue = currentValues ? currentValues[0] as number : 0;
+	const yValue = currentValues ? currentValues[1] as number : 0;
+
+	const handleNumberChange = (e: CustomEvent) => {
+		const target = e.target as StepInput;
+		const input = target.id;
+		const newValue = Number(target.value);
+
+		// Get current values, defaulting to existing values or 0
+		let newXValue = xValue;
+		let newYValue = yValue;
+
+		// Update the appropriate value based on which input changed
+		if (input === "x-input") {
+			newXValue = newValue;
+		} else if (input === "y-input") {
+			newYValue = newValue;
+		}
+
+		// Update currentValue with both values
+		this.currentValue = {
+			operator: "TODAYFROMTO",
+			values: [newXValue, newYValue],
+		};
+	};
+	return (
+		<div class=".ui5-last-next-container ui5-last-next-container-padded">
+			<div class="ui5-ddr-input-container ui5-ddr-input-container-right-aligned">
+				<Label class="ui5-ddr-label">Before Today:</Label>
+				<StepInput
+					id="x-input"
+					value={xValue}
+					min={0}
+					max={9999}
+					onChange={handleNumberChange}
+				/>
+				<Label class="ui5-ddr-label">After Today:</Label>
+				<StepInput
+					id="y-input"
+					value={yValue}
+					min={0}
+					max={9999}
+					onChange={handleNumberChange}
+				/>
+			</div>
+		</div>
+	);
+}

packages/website/docs/_samples/main/DynamicDateRange/CustomOption/main.js

@@ -0,0 +1,6 @@
+import "@ui5/webcomponents/dist/DynamicDateRange.js";
+import "@ui5/webcomponents/dist/dynamic-date-range-options/Today.js";
+import "@ui5/webcomponents/dist/dynamic-date-range-options/SingleDate.js";
+import "@ui5/webcomponents/dist/dynamic-date-range-options/DateRange.js";
+import "./TodayFromTo.js";
+import "./TodayFromToTemplate.tsx";

packages/website/docs/_samples/main/DynamicDateRange/CustomOption/sample.html

@@ -0,0 +1,22 @@
+<!-- playground-fold -->
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Dynamic Date Range Sample</title>
+</head>
+
+<body style="background-color: var(--sapBackgroundColor); height: 550px;">
+	<!-- playground-fold-end -->
+
+	<ui5-dynamic-date-range id="dynamicDateRange"
+		options="TODAY, DATE, DATERANGE, TODAYFROMTO"></ui5-dynamic-date-range>
+
+	<!-- playground-fold -->
+	<script type="module" src="main.js"></script>
+</body>
+
+</html>
+<!-- playground-fold-end -->