Overview

docs/marketplace/MARKETPLACE_LISTING.md

It covers MUI X + date-fns, three modes, validation, locales, styling (#2563eb), use cases, requirements, widget ID, and MIT license within the 500-word limit.

Documentation

InnoVites Date Time Picker

Mendix pluggable widget for selecting dates and times in Mendix 9+ web apps (React client). The picker UI uses MUI X Date and Time Pickers (desktop layout, analog time clock, AM/PM) and date-fns for parsing and locales. Default styling uses a generic SaaS blue palette (primary #2563eb, soft surfaces #f8fafc / #eff6ff).

Full widget documentation (installation, Studio Pro properties, formats, use cases, troubleshooting): docs/WIDGET_DOCUMENTATION.md

Features

• Three modes: date & time, date only, or time only
• MUI X desktop UI: calendar + analog Time Clock, footer with Today / Cancel / OK
• 12-hour / 24-hour: follows locale; optional custom date-fns format strings
• Locales: date-fns locales (e.g. en, nl, de, fr, es, …)
• Validation: min/max date, disable past, optional “Valid date” boolean attribute
• Time constraints: min/max hours, minutes, seconds; hour/minute/second steps
• UX: clearable field, week numbers, read-only as control or text, Studio Pro design preview

Requirements

• Node.js 16 or later
• Mendix Studio Pro 9.x with React client enabled
• npm (or compatible package manager)

Quick start (Mendix)

1. Clone or copy this repository.
2. Install dependencies:

npm install

1. Set your Mendix test app path in package.json:

"config": {
  "projectPath": "../../YourMendixApp"
}

1. Build the widget:

npm run build

1. Copy one package into your app’s widgets folder:
2. dist/1.0.0/innovites.MUIReactDateTimePicker.mpk
3. In Studio Pro, add InnoVites Date Time Picker to a page and bind the DateTime attribute.

UI prototype (no Mendix)

Run a local Vite app to try the same React UI used in the widget:

npm install
npm run prototype

Open http://localhost:5173 — three cards demonstrate datetime, date-only, and time-only modes.

Development

Project layout

src/
  MUIReactDateTimePicker.tsx       # Mendix container (class component)
  ReactDateTimePickerUI.tsx        # MUI X pickers + date-fns logic
  MuiPickerProvider.tsx            # Theme + LocalizationProvider
  muiTimeViewRenderers.ts          # Analog TimeClock view renderers
  utils/dateTimeFormat.ts          # Locale 12h/24h + format helpers
  ui/ReactDateTimePicker.css       # Widget + popover styling
  ReactDateTimePicker.editorPreview.tsx
prototype/                         # Standalone Vite demo

Third-party libraries

• @mui/x-date-pickers — picker UI (MIT / MUI licensing)
• @mui/material — theming and inputs
• date-fns — parsing, formatting, locales (MIT)
• @emotion/react — styles used by MUI (MIT)

Marketplace listing

Copy-paste text for Mendix Marketplace Publish Component: docs/marketplace/MARKETPLACE_LISTING.md

Cover image (PNG or JPG, max 1 MB, min 600×420 px): upload assets/marketplace-cover.jpg (recommended) or assets/marketplace-cover.png. See assets/README.md.

License

Copyright (c) InnoVites B.V. — MIT. See package.json and project license terms.