HTML5 DateTime Picker

Content Type: Widget
Categories: User Interface


When you want to use the HTML5 DateTime Picker on your pages. Use input types as "date", "datetime-local", "month" and "time". Also including the "min", "max", "step" options are available. Use a String or DateTime attribute as datasource. Set "min" and/or "max" with a DateTime attribute, or as a plain string. When using "month" or "time", only those specific parts (resp. yyyy-MM and HH:mm) are being changed. When there was no date, it will use the current date.



Use the HTML5 date time picker on your pages. Use input types like date, datetime-local, month and time. Use HTML5 options like min, max and step. The widgets expects a DateTime attribute as a data source.

The min and/or max options can be a DateTime attribute or just plain text. When using an attribute, only the specific parts for that input type are being changed.

For more information about the used input types and their options, see:

Typical usage scenario

When you want to have the functionality of the HTML5 date time picker, you can now use this widget. Using input types like date, datetime-local, month and time will get you the HTML5 input.

Use a String or DateTime attribute as the datasource. When using a String attribute, it will just return the output of the HTML5 input. Make sure you have the correct format for the specific input types.

When using a DateTime attribute only the specific date time parts of the input type will be changed. When there is no date (yet), the current datetime will be used.

Features and limitations

Use the HTML5 date time picker in your Mendix pages. Please beware of the working of the HTML5 date time picker. It doesn't render the same in every browser, the language/formatting used is depending on the browser settings, not the language setting in Mendix.




Just download the widget to your project and use it!


The configuration should be self explanatory.

Known bugs


Frequently Asked Questions

Q: Why use this widget and not the default date time picker?

A: You don't have to! But this widget makes it possible to use the HTML5 features.


Version: 1.0.0
Framework Version: 9.18.0
Release Notes: Initial upload in Marketplace.