[WC-3164]: Date Time Picker

packages/pluggableWidgets/date-time-picker-web/.eslintrc.js

@@ -0,0 +1,5 @@
+const base = require("@mendix/pluggable-widgets-tools/configs/eslint.ts.base.json");
+
+module.exports = {
+    ...base
+};

packages/pluggableWidgets/date-time-picker-web/.gitattributes

@@ -0,0 +1,21 @@
+# Set the default behavior, in case people don't have core.autocrlf set.
+* text=auto
+
+# Explicitly declare text files you want to always be normalized and converted
+# to native line endings on checkout.
+*.ts text eol=lf
+*.tsx text eol=lf
+*.js text eol=lf
+*.jsx text eol=lf
+*.css text eol=lf
+*.scss text eol=lf
+*.json text eol=lf
+*.xml text eol=lf
+*.md text eol=lf
+*.gitattributes eol=lf
+*.gitignore eol=lf
+
+# Denote all files that are truly binary and should not be modified.
+*.png binary
+*.jpg binary
+*.gif binary

packages/pluggableWidgets/date-time-picker-web/.gitignore

@@ -0,0 +1,20 @@
+tests/testProject/
+.DS_Store
+.idea
+.vscode
+dist
+node_modules
+.env
+*.log
+*.bak
+*.launch
+mxproject
+coverage
+
+**/results
+mendixProject
+**/e2e/diffs
+**/screenshot
+**/screenshot-results
+**/tests/testProject
+**/artifacts

packages/pluggableWidgets/date-time-picker-web/.prettierignore

@@ -0,0 +1 @@
+tests/testProject/

packages/pluggableWidgets/date-time-picker-web/.prettierrc.js

@@ -0,0 +1 @@
+module.exports = require("@mendix/prettier-config-web-widgets");

packages/pluggableWidgets/date-time-picker-web/LICENSE

@@ -0,0 +1,15 @@
+The Apache License v2.0
+
+Copyright © Mendix Technology BV 2022. All rights reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

packages/pluggableWidgets/date-time-picker-web/README.md

@@ -0,0 +1,4 @@
+<!-- TODO: Update marketplace URL -->
+
+Please see [Date Time Picker](https://docs.mendix.com/appstore/widgets/combobox) in the Mendix documentation for
+details.

packages/pluggableWidgets/date-time-picker-web/package.json

@@ -0,0 +1,61 @@
+{
+    "name": "@mendix/date-time-picker-web",
+    "widgetName": "DateTimePicker",
+    "version": "1.0.0",
+    "description": "Date, time and range picker widget",
+    "copyright": "© Mendix Technology BV 2025. All rights reserved.",
+    "license": "Apache-2.0",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/mendix/web-widgets.git"
+    },
+    "config": {
+        "developmentPort": 3000,
+        "mendixHost": "http://localhost:8080"
+    },
+    "mxpackage": {
+        "name": "DateTimePicker",
+        "type": "widget",
+        "mpkName": "com.mendix.widget.web.DateTimePicker.mpk"
+    },
+    "packagePath": "com.mendix.widget.web",
+    "marketplace": {
+        "minimumMXVersion": "10.24.0",
+        "appNumber": 999999,
+        "appName": "Date Time Picker",
+        "reactReady": true
+    },
+    "testProject": {
+        "githubUrl": "https://github.com/mendix/testProjects",
+        "branchName": "date-time-picker-web"
+    },
+    "scripts": {
+        "prebuild": "rui-create-translation",
+        "build": "pluggable-widgets-tools build:web",
+        "create-gh-release": "rui-create-gh-release",
+        "create-translation": "rui-create-translation",
+        "dev": "pluggable-widgets-tools start:web",
+        "format": "prettier --ignore-path ./node_modules/@mendix/prettier-config-web-widgets/global-prettierignore --write .",
+        "lint": "pluggable-widgets-tools lint",
+        "lint:fix": "pluggable-widgets-tools lint:fix",
+        "publish-marketplace": "rui-publish-marketplace",
+        "prerelease": "npm run lint",
+        "release": "pluggable-widgets-tools release:web",
+        "start": "pluggable-widgets-tools start:server",
+        "test": "pluggable-widgets-tools test:unit:web:enzyme-free",
+        "update-changelog": "rui-update-changelog-widget",
+        "verify": "rui-verify-package-format"
+    },
+    "dependencies": {
+        "classnames": "^2.5.1",
+        "react-datepicker": "^8.9.0"
+    },
+    "devDependencies": {
+        "@mendix/automation-utils": "workspace:*",
+        "@mendix/eslint-config-web-widgets": "workspace:*",
+        "@mendix/pluggable-widgets-tools": "*",
+        "@mendix/prettier-config-web-widgets": "workspace:*",
+        "@mendix/rollup-web-widgets": "workspace:*",
+        "@mendix/widget-plugin-test-utils": "workspace:*"
+    }
+}

packages/pluggableWidgets/date-time-picker-web/rollup.config.mjs

@@ -0,0 +1,5 @@
+import copyFiles from "@mendix/rollup-web-widgets/copyFiles.mjs";
+
+export default args => {
+    return copyFiles(args);
+};

packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.editorConfig.ts

@@ -0,0 +1,81 @@
+import { hidePropertiesIn, Properties } from "@mendix/pluggable-widgets-tools";
+import {
+    container,
+    ContainerProps,
+    rowLayout,
+    structurePreviewPalette,
+    StructurePreviewProps,
+    svgImage
+} from "@mendix/widget-plugin-platform/preview/structure-preview-api";
+import { DateTimePickerPreviewProps } from "../typings/DateTimePickerProps";
+import IconSVG from "./assets/close.svg";
+const IconSVGDark = IconSVG.replace('fill="#000000"', 'fill="#FFFFFF"');
+
+export function getProperties(values: DateTimePickerPreviewProps, defaultProperties: Properties): Properties {
+    if (values.type !== "date" && values.type !== "range") {
+        hidePropertiesIn(defaultProperties, values, ["dateFormat"]);
+    }
+
+    if (values.type !== "time") {
+        hidePropertiesIn(defaultProperties, values, ["timeFormat"]);
+    }
+
+    if (values.type !== "datetime") {
+        hidePropertiesIn(defaultProperties, values, ["dateTimeFormat"]);
+    }
+
+    if (values.type !== "range") {
+        hidePropertiesIn(defaultProperties, values, ["endDateAttribute"]);
+    }
+
+    if (values.validationType !== "custom") {
+        hidePropertiesIn(defaultProperties, values, ["customValidation"]);
+    }
+
+    return defaultProperties;
+}
+
+export function getPreview(values: DateTimePickerPreviewProps, isDarkMode: boolean): StructurePreviewProps {
+    const palette = structurePreviewPalette[isDarkMode ? "dark" : "light"];
+    const structurePreviewChildren: StructurePreviewProps[] = [];
+    // let dropdownPreviewChildren: StructurePreviewProps[] = [];
+    let readOnly = values.readOnly;
+
+    if (structurePreviewChildren.length === 0) {
+        structurePreviewChildren.push({
+            type: "Text",
+            content: values.dateAttribute ? `[${values.dateAttribute}]` : "[Date time picker]",
+            fontColor: palette.text.data
+        });
+    }
+
+    return container()(
+        rowLayout({
+            columnSize: "grow",
+            borders: true,
+            borderWidth: 1,
+            borderRadius: 2,
+            backgroundColor: readOnly ? palette.background.containerDisabled : palette.background.container
+        })(
+            container({
+                grow: 1,
+                padding: 4
+            })(...structurePreviewChildren),
+            getIconPreview(isDarkMode)
+        )
+    );
+}
+
+function getIconPreview(isDarkMode: boolean): ContainerProps {
+    return container({
+        grow: 0,
+        padding: 4
+    })(
+        ...[
+            container({ padding: 1 })(),
+            svgImage({ width: 16, height: 16 })(
+                decodeURIComponent((isDarkMode ? IconSVGDark : IconSVG).replace("data:image/svg+xml,", ""))
+            )
+        ]
+    );
+}

packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.editorPreview.tsx

@@ -0,0 +1,25 @@
+import { ReactElement } from "react";
+import { DateTimePickerPreviewProps } from "../typings/DateTimePickerProps";
+import "./ui/DateTimePicker.scss";
+
+export function preview(props: DateTimePickerPreviewProps): ReactElement {
+    return (
+        <div className="widget-datetimepicker">
+            <div className="react-datepicker-wrapper">
+                <div className="react-datepicker__input-container">
+                    <input
+                        className="widget-datetimepicker-input react-datepicker-ignore-onclickoutside"
+                        placeholder={props.placeholder ?? ""}
+                        readOnly
+                        type="text"
+                        value={props.dateAttribute ? `[${props.dateAttribute}]` : "[Date time picker]"}
+                    />
+                </div>
+            </div>
+
+            <button aria-label="Show calendar" className="widget-datetimepicker-input-button" type="button">
+                <span className="mx-icon-filled mx-icon-calendar" />
+            </button>
+        </div>
+    );
+}

packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.tsx

@@ -0,0 +1,10 @@
+import { ReactElement } from "react";
+import { DateTimePickerContainerProps } from "../typings/DateTimePickerProps";
+import { DateTimePickerContainer } from "./components/DateTimePickerContainer";
+
+import "react-datepicker/dist/react-datepicker.css";
+import "./ui/DateTimePicker.scss";
+
+export function DateTimePicker(props: DateTimePickerContainerProps): ReactElement {
+    return <DateTimePickerContainer {...props} />;
+}

packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.xml

@@ -0,0 +1,108 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<widget id="com.mendix.widget.web.datetimepicker.DateTimePicker" pluginWidget="true" offlineCapable="true" xmlns="http://www.mendix.com/widget/1.0/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.mendix.com/widget/1.0/ ../node_modules/mendix/custom_widget.xsd">
+    <name>Date Time Picker</name>
+    <description />
+    <studioProCategory>Input elements</studioProCategory>
+    <studioCategory>Display</studioCategory>
+    <helpUrl>https://docs.mendix.com/appstore/widgets/datetimepicker</helpUrl>
+    <properties>
+        <propertyGroup caption="General">
+            <propertyGroup caption="General">
+                <property key="type" type="enumeration" defaultValue="date">
+                    <caption>Picker type</caption>
+                    <description />
+                    <enumerationValues>
+                        <enumerationValue key="date">Date</enumerationValue>
+                        <enumerationValue key="time">Time</enumerationValue>
+                        <enumerationValue key="range">Range</enumerationValue>
+                        <enumerationValue key="datetime">Date and Time</enumerationValue>
+                    </enumerationValues>
+                </property>
+                <property key="dateFormat" type="string" required="false" defaultValue="MM/dd/yyyy">
+                    <caption>Date format</caption>
+                    <description />
+                </property>
+                <property key="timeFormat" type="string" required="false" defaultValue="hh:mm a">
+                    <caption>Time format</caption>
+                    <description />
+                </property>
+                <property key="dateTimeFormat" type="string" required="false" defaultValue="MM/dd/yyyy hh:mm a">
+                    <caption>Date time format</caption>
+                    <description />
+                </property>
+                <property key="placeholder" type="expression" required="false">
+                    <caption>Placeholder</caption>
+                    <description />
+                    <returnType type="String" />
+                </property>
+            </propertyGroup>
+            <propertyGroup caption="Data source">
+                <property key="dateAttribute" type="attribute">
+                    <caption>Value</caption>
+                    <description />
+                    <attributeTypes>
+                        <attributeType name="DateTime" />
+                    </attributeTypes>
+                </property>
+
+                <property key="endDateAttribute" type="attribute" required="false">
+                    <caption>End value</caption>
+                    <description />
+                    <attributeTypes>
+                        <attributeType name="DateTime" />
+                    </attributeTypes>
+                </property>
+            </propertyGroup>
+            <propertyGroup caption="Label">
+                <systemProperty key="Label" />
+            </propertyGroup>
+            <propertyGroup caption="Editability">
+                <systemProperty key="Editability" />
+            </propertyGroup>
+            <propertyGroup caption="Conditional visibility">
+                <systemProperty key="Visibility" />
+            </propertyGroup>
+            <propertyGroup caption="Validation">
+                <property key="validationType" type="enumeration" defaultValue="none">
+                    <caption>Validation</caption>
+                    <description />
+                    <enumerationValues>
+                        <enumerationValue key="none">None</enumerationValue>
+                        <enumerationValue key="required">Required</enumerationValue>
+                        <enumerationValue key="custom">Custom</enumerationValue>
+                    </enumerationValues>
+                </property>
+                <property key="customValidation" type="expression" required="false">
+                    <caption>Custom condition</caption>
+                    <description />
+                    <returnType type="Boolean" />
+                </property>
+                <property key="validationMessage" type="expression" required="false">
+                    <caption>Message</caption>
+                    <description />
+                    <returnType type="String" />
+                </property>
+            </propertyGroup>
+            <propertyGroup caption="Accessibility">
+                <property key="ariaRequired" type="boolean" defaultValue="true">
+                    <caption>Aria required</caption>
+                    <description>Used by assistive technologies to indicate that a field is required.</description>
+                </property>
+            </propertyGroup>
+        </propertyGroup>
+        <propertyGroup caption="Events">
+            <property key="onChange" type="action" required="false">
+                <caption>On change</caption>
+                <description />
+            </property>
+            <property key="onEnter" type="action" required="false">
+                <caption>On enter</caption>
+                <description />
+            </property>
+            <property key="onLeave" type="action" required="false">
+                <caption>On leave</caption>
+                <description />
+            </property>
+        </propertyGroup>
+    </properties>
+</widget>