Overview

AntdDatePicker (Github) is a powerful Mendix pluggable widget used to pick date and time. It brings the DatePicker widget from Ant Design into Mendix and implements almost all the features of the original widget.

Features

1. Support multiple time unit choices, including: date, week, month, quarter, year.
2. Support custom date display format, such as: yyyy-DD-mm, dddd-DD-mm hh:MM:ss
3. Support adding cutomized shortcut buttons to select time period with one click.
4. support time selection accurate to hours, minutes and seconds.
5. Support setting non-selectable dates.
6. Support multiple languages.
7. Support Mendix's Validation Feedback feature.

Documentation

AntdDatePicker (Github) is a powerful Mendix pluggable widget used to pick date and time. It brings the DatePicker widget from Ant Design into Mendix and implements almost all the features of the original widget.

Features

1. Support multiple time unit choices, including: date, week, month, quarter, year.
2. Support custom date display format, such as: yyyy-DD-mm, dddd-DD-mm hh:MM:ss
3. Support adding cutomized shortcut buttons to select time period with one click.
4. support time selection accurate to hours, minutes and seconds.
5. Support setting non-selectable dates.
6. Support multiple languages.
7. Support Mendix's Validation Feedback feature.

Quick Use

1. Add this widget to the Mendix Project

1. Download the mpk file from here.
2. Copy the mpk file to your Mendix Project directory {YourMendixProjectFolder}/widgets/.
3. Open your Mendix Project with Mendix Studio Pro and click on the menu Menu > App > Synchronize App Directory.

2. Set properties of the widget

1. Select any page, add a DataView to the page, and set the Datasource for the DataView. The Datasource should be an Entity that having at least 1 DateTime attribute.
2. 
3. 
4. Add the Antd Date Picker widget to the DataView above. It can be found in the Toolbox on the right side of Mendix Studio Pro.
5.  
6. Set the necessary properties for the widget, including Picker Type, Start time, End time, On value change :

• Set Picker type. Select the default Date type.
• Set Date value as an DateTime attribute of the Datasource entity. This property is used to set and read the date value of the widget.
• Set On value change to Nanoflow and choose create a new Nanoflow.
•  
• Read and print the Start time and End time properties in this Nanoflow.
•  

1. Run.

Demo project

1. You can access the online demo from here to show the features of this widget.
2. You can also download the demo project from here to run it on your own PC.

Datail of properties

General

Properties to control the most important behaviors or display of the widget. You will definitely use most of these properties when you add this widget into a page.

Click to show the detail

Advanced

Properties to control the behavior of the widget, which is not must for normal using.

Click to show the detail

Customize View

Properties to customize the view of the widget.

Click to show the detail

• Common.
• size. Input frame size. Support value: Small, Middle, Large.
• Placeholder.
• Allow clear. Whether show clear button.
• Bordered. Whether show border out of the input frame.
• Class of popup. CSS class of the popup DOM element.
• Shortcuts.
• Show today button. Whether to show 'Today' button on panel.
• Show now button. Whether to show 'Now' button on panel when show time is set as true.
• Datasource of shortcuts. You can use this to dsiplay some shortcut buttons on the picker pannel to let user choose common dates by one click.
• Attribute of label. Label will be shown on the shortcut button.
• Value Attribute. When user click the shortcut button, the corresponding datetime will be selected.
• Custom Pannel Footer
• Show custom footer. Whether show additional widgets on the footer of the picker pannel.
• Custom pannel footer. Put additional widgets on the footer of the picker pannel.