Overview

AntdDatePicker (Github address) is a Mendix widget for selecting time ranges, and implements most of the interface of RangePicker in Ant Design.
View the features of this widget on the online demo.

Features

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

Documentation

AntdDatePicker (Github address) is a Mendix widget for selecting time ranges, and implements most of the interface of RangePicker in Ant Design.
View features of this project on online demo.

Featrues

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. 2.
3. Support adding common shortcut buttons to select time period with one click.
4. support time period selection accurate to hours, minutes and seconds.
5. Support customizing 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

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 2 DateTime attributes, one for the start time, another for the end time.
   
2. Add the Antd Date Range Picker widget to the DataView above. It can be found in the Toolbox on the right side of Mendix Studio Pro.
    
3. 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 Start time and End time as two properties of an entity. Thess two properties are used to set and read the start and end time 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.
      
4. 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.

• Picker type. Support values: date, week, month, quarter, year. If you set it as quarter，you picker will display like this:
   
• Format. The format of DateTime value shown on the input frame. e.g. YYYY/MM/DD HH:mm:ss.
• Start time. The start time value. You need to set a attribute of a entity.
• End time. The end time value. You need to set a attribute of a entity.
• On value Change. Will be triggered when eithter start value or end value is changed.
• Show time. Whether show time picker on the picker pannel. If yes, you'd better add "HH:mm:ss" to the format property to show the time part. It looks like this:
   
• Plannel placement. On which place is the picker pannel placed to the input frame. support values like: Bottom Left, Bottom Right, Top Left, Top Right.

Advanced

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

• Main.
  • Allow start time empty.
  • Allow end time empty.
  • Auto focus. Whether auto get focus when shown.
  • Input readonly. Set the input as readonly.So that, when on mobile device, the virtual keyboard will not be open.
• Locale.
  • Locale. Set the display language. Currently only support zh_CN and en_US.
• Picker Open State.
  • Picker open. An attribute to control the open status of the picker.
  • On open change. Will be triggered when the picker pannel is opened or closed.
• Picker Value. ( not support any more)
  • Default start time. The default start time value on the picker pannel.
  • Default end time. The default end time value on the picker pannel.
• Disable Date.
  • Disable mode. Disable some dates, so that some invalid dates can not be choosen by user.
    • 'Off' means no date will be disabled.
    • 'Positive' means the dates you set below are the only available dates.
    • 'Negative' means that all the dates excepet for the dates you set below are available.
  • Disable datasource.
  • Disable attribute.

Customize View

Properties to customize the view of the widget.

• Common.
  • size. Input frame size. Support value: Small, Middle, Large.
  • Start placeholder.
  • End 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.
  • Datasource of shortcuts. You can use this to dsiplay some shortcut buttons on the picker pannel to reduce the time to choose a right date.
  • Attribute of label. Label will be shown on the shortcut button.
  • Start date. When user click the shortcut button, the corresponding start date will be selected.
  • End date. When user click the shortcut button, the corresponding end date 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.