[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,80 @@
+import { hidePropertiesIn, Properties } from "@mendix/pluggable-widgets-tools";
+import {
+    container,
+    ContainerProps,
+    dropzone,
+    structurePreviewPalette,
+    StructurePreviewProps
+} from "@mendix/widget-plugin-platform/preview/structure-preview-api";
+import { DateTimePickerPreviewProps } from "../typings/DateTimePickerProps";
+
+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.showLabel === false) {
+        hidePropertiesIn(defaultProperties, values, ["label"]);
+    }
+
+    if (values.editable !== "conditionally") {
+        hidePropertiesIn(defaultProperties, values, ["editabilityCondition"]);
+    }
+
+    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 {
+        type: "Container",
+        children: [
+            {
+                type: "RowLayout",
+                columnSize: "grow",
+                borders: true,
+                borderWidth: 1,
+                borderRadius: 2,
+                backgroundColor: readOnly ? palette.background.containerDisabled : palette.background.container,
+                children: [
+                    {
+                        type: "Container",
+                        grow: 1,
+                        padding: 4,
+                        children: structurePreviewChildren
+                    },
+                    container({ grow: 0, padding: 4 })()
+                ]
+            },
+            ...dropdownPreviewChildren
+        ]
+    };
+}

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

@@ -0,0 +1,44 @@
+import { ReactElement } from "react";
+import { DateTimePickerPreviewProps } from "../typings/DateTimePickerProps";
+import "./ui/DateTimePicker.scss";
+
+export function preview(props: DateTimePickerPreviewProps): ReactElement {
+    const label = props.showLabel ? props.label : null;
+    const portalId = `datepicker_` + Math.random();
+
+    return (
+        <div className="widget-datetimepicker">
+            {label ? (
+                <div className="widget-datetimepicker-label-wrapper">
+                    <div id={portalId} />
+
+                    <label className="widget-datetimepicker-label" id="datepicker-label">
+                        {label}
+                    </label>
+                </div>
+            ) : (
+                <span className="sr-only" id="datepicker-label">
+                    Date picker
+                </span>
+            )}
+
+            <div className="widget-datetimepicker-wrapper">
+                <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>
+        </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} />;
+}