[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,60 @@
+{
+    "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"
+    },
+    "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,140 @@
+import { DateTimePickerPreviewProps } from "../typings/DateTimePickerProps";
+
+export type Platform = "web" | "desktop";
+
+export type Properties = PropertyGroup[];
+
+type PropertyGroup = {
+    caption: string;
+    propertyGroups?: PropertyGroup[];
+    properties?: Property[];
+};
+
+type Property = {
+    key: string;
+    caption: string;
+    description?: string;
+    objectHeaders?: string[]; // used for customizing object grids
+    objects?: ObjectProperties[];
+    properties?: Properties[];
+};
+
+type ObjectProperties = {
+    properties: PropertyGroup[];
+    captions?: string[]; // used for customizing object grids
+};
+
+export type Problem = {
+    property?: string; // key of the property, at which the problem exists
+    severity?: "error" | "warning" | "deprecation"; // default = "error"
+    message: string; // description of the problem
+    studioMessage?: string; // studio-specific message, defaults to message
+    url?: string; // link with more information about the problem
+    studioUrl?: string; // studio-specific link
+};
+
+type BaseProps = {
+    type: "Image" | "Container" | "RowLayout" | "Text" | "DropZone" | "Selectable" | "Datasource";
+    grow?: number; // optionally sets a growth factor if used in a layout (default = 1)
+};
+
+type ImageProps = BaseProps & {
+    type: "Image";
+    document?: string; // svg image
+    data?: string; // base64 image
+    property?: object; // widget image property object from Values API
+    width?: number; // sets a fixed maximum width
+    height?: number; // sets a fixed maximum height
+};
+
+type ContainerProps = BaseProps & {
+    type: "Container" | "RowLayout";
+    children: PreviewProps[]; // any other preview element
+    borders?: boolean; // sets borders around the layout to visually group its children
+    borderRadius?: number; // integer. Can be used to create rounded borders
+    backgroundColor?: string; // HTML color, formatted #RRGGBB
+    borderWidth?: number; // sets the border width
+    padding?: number; // integer. adds padding around the container
+};
+
+type RowLayoutProps = ContainerProps & {
+    type: "RowLayout";
+    columnSize?: "fixed" | "grow"; // default is fixed
+};
+
+type TextProps = BaseProps & {
+    type: "Text";
+    content: string; // text that should be shown
+    fontSize?: number; // sets the font size
+    fontColor?: string; // HTML color, formatted #RRGGBB
+    bold?: boolean;
+    italic?: boolean;
+};
+
+type DropZoneProps = BaseProps & {
+    type: "DropZone";
+    property: object; // widgets property object from Values API
+    placeholder: string; // text to be shown inside the dropzone when empty
+    showDataSourceHeader?: boolean; // true by default. Toggles whether to show a header containing information about the datasource
+};
+
+type SelectableProps = BaseProps & {
+    type: "Selectable";
+    object: object; // object property instance from the Value API
+    child: PreviewProps; // any type of preview property to visualize the object instance
+};
+
+type DatasourceProps = BaseProps & {
+    type: "Datasource";
+    property: object | null; // datasource property object from Values API
+    child?: PreviewProps; // any type of preview property component (optional)
+};
+
+export type PreviewProps =
+    | ImageProps
+    | ContainerProps
+    | RowLayoutProps
+    | TextProps
+    | DropZoneProps
+    | SelectableProps
+    | DatasourceProps;
+
+export function getProperties(
+    _values: DateTimePickerPreviewProps,
+    defaultProperties: Properties /*, target: Platform*/
+): Properties {
+    // Do the values manipulation here to control the visibility of properties in Studio and Studio Pro conditionally.
+    /* Example
+    if (values.myProperty === "custom") {
+        delete defaultProperties.properties.myOtherProperty;
+    }
+    */
+    return defaultProperties;
+}
+
+// export function check(_values: DateTimePickerPreviewProps): Problem[] {
+//     const errors: Problem[] = [];
+//     // Add errors to the above array to throw errors in Studio and Studio Pro.
+//     /* Example
+//     if (values.myProperty !== "custom") {
+//         errors.push({
+//             property: `myProperty`,
+//             message: `The value of 'myProperty' is different of 'custom'.`,
+//             url: "https://github.com/myrepo/mywidget"
+//         });
+//     }
+//     */
+//     return errors;
+// }
+
+// export function getPreview(values: DateTimePickerPreviewProps, isDarkMode: boolean, version: number[]): PreviewProps {
+//     // Customize your pluggable widget appearance for Studio Pro.
+//     return {
+//         type: "Container",
+//         children: []
+//     }
+// }
+
+// export function getCustomCaption(values: DateTimePickerPreviewProps, platform: Platform): string {
+//     return "DateTimePicker";
+// }

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

@@ -0,0 +1,37 @@
+import { ReactElement, createElement } from "react";
+
+import { parseInlineStyle } from "@mendix/pluggable-widgets-tools";
+
+import { BadgeSample, BadgeSampleProps } from "./components/BadgeSample";
+import { DateTimePickerPreviewProps } from "../typings/DateTimePickerProps";
+
+function parentInline(node?: HTMLElement | null): void {
+    // Temporary fix, the web modeler add a containing div, to render inline we need to change it.
+    if (node && node.parentElement && node.parentElement.parentElement) {
+        node.parentElement.parentElement.style.display = "inline-block";
+    }
+}
+
+function transformProps(props: DateTimePickerPreviewProps): BadgeSampleProps {
+    return {
+        type: props.datetimepickerType,
+        bootstrapStyle: props.bootstrapStyle,
+        className: props.className,
+        clickable: false,
+        style: parseInlineStyle(props.style),
+        defaultValue: props.datetimepickerValue ? props.datetimepickerValue : "",
+        value: props.valueAttribute
+    };
+}
+
+export function preview(props: DateTimePickerPreviewProps): ReactElement {
+    return (
+        <div ref={parentInline}>
+            <BadgeSample {...transformProps(props)}></BadgeSample>
+        </div>
+    );
+}
+
+export function getPreviewCss(): string {
+    return require("./ui/DateTimePicker.css");
+}

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

@@ -0,0 +1,27 @@
+import { ReactElement, createElement, useCallback } from "react";
+
+import { DateTimePickerContainerProps } from "../typings/DateTimePickerProps";
+import { BadgeSample } from "./components/BadgeSample";
+import "./ui/DateTimePicker.css";
+
+export function DateTimePicker(props: DateTimePickerContainerProps): ReactElement {
+    const { datetimepickerType, datetimepickerValue, valueAttribute, onClickAction, style, bootstrapStyle } = props;
+    const onClickHandler = useCallback(() => {
+        if (onClickAction && onClickAction.canExecute) {
+            onClickAction.execute();
+        }
+    }, [onClickAction]);
+
+    return (
+        <BadgeSample
+            type={datetimepickerType}
+            bootstrapStyle={bootstrapStyle}
+            className={props.class}
+            clickable={!!onClickAction}
+            defaultValue={datetimepickerValue ? datetimepickerValue : ""}
+            onClickAction={onClickHandler}
+            style={style}
+            value={valueAttribute ? valueAttribute.displayValue : ""}
+        />
+    );
+}