Multi Date Picker Sample
Overview
Multi Date Picker - Sample is a ready-made module that shows the Multi Date Picker widget working in Mendix Studio Pro 10.24.17. Import it, give your user roles the module role MultiDatePicker.User, and add the page MultiDatePicker.Home_Web to the navigation. You get a playground with the picker at the top, the stored value under Date Selected, and a field for every widget setting below it.
Change a setting and the picker changes at once. You can try:
- single dates, multiple dates, ranges and several ranges
- two months side by side
- whole weeks, months, years, and dates with a time
- the plugins: Date Panel, Time Picker, Date Picker Header, weekend highlighting and the toolbar
Date Selected shows exactly the text your own attribute would get in each mode.
Use it to evaluate the widget before adding it to your app, to learn which settings produce which behaviour, or as a starting point for your own pages. The module includes the Multi Date Picker widget 1.2.0, which works in the Mendix 10 React client, so you don't need to download the widget separately.
Documentation
Typical usage scenario
Multi Date Picker - Sample is the ready-made example module for the Multi Date Picker widget. It contains:
- a playground page with the picker at the top
- the stored value shown under Date Selected
- a field for every widget setting below it
Change a setting and the picker changes at once, so you can try every mode on live data without building a page yourself.
Problems it solves:
- Screenshots don't show how 45 settings work together; the playground lets you switch them live.
- New users don't know which attributes to create or what text the value attribute gets. The entity and the Date Selected text show both.
- Checking a widget upgrade in your own pages is slow; the sample gives a clean reference page.
Where it helps:
- Evaluating the widget before using it in an app
- Training and demos: show multiple dates, ranges, weeks, months and time on one screen
- Copying the entity and widget configuration into your own module
Features and limitations
Features:
- Playground page MultiDatePicker.Home_Web with the picker, the stored value and one field per widget setting
- Non-persistable entity MultiDatePicker: DateValue plus 44 setting attributes with starting values (Date Panel on, Format DD/MM/YYYY, separator &)
- Data source microflow DS_DatePicker
- Module role MultiDatePicker.User
- Includes Multi Date Picker widget 1.2.0 (React client support and the Current Date fix)
Things to try on the page:
- Multiple = Yes: pick several days
- Multiple and Range = Yes: pick several ranges, for example 02/09/2026 & 05/09/2026~15/09/2026 & 18/09/2026
- Range = Yes, No. of months = 2: pick a range across two months
- Week Picker and Range = Yes: one click selects a whole week
- Time Picker Plugin = Yes, Format = DD/MM/YYYY HH:mm: pick a date and a time
- Current Date Year = 2027, Month = 3: the calendar opens on March 2027
Limitations:
- The selected dates are stored as a String; convert them in a microflow to use real dates.
- The entity is non-persistable, so the playground starts fresh every time the page opens.
Dependencies
- Mendix Studio Pro 10.24.17 or a later 10.24 version
Installation
1. Download MultiDatePicker.mpk from the Marketplace or from the GitHub release Sample-V1.2.0.
2. In Studio Pro, choose App > Import module package and select the file. Press F4 if the widget doesn't appear in the Toolbox yet.
3. Open App > Security > User roles and give the roles that should use the page the module role MultiDatePicker.User.
4. Add the page MultiDatePicker.Home_Web to the navigation.
5. Run the app and open the page.
Configuration
The playground doesn't need any configuration. To use the widget in your own page:
1. Copy the attributes you need from the MultiDatePicker entity to your entity, or keep it as a helper entity.
2. Copy the widget from Home_Web, or drag Multidate Picker from the Toolbox, and select the attributes.
3. Set fixed values (for example Format) in your data source microflow, as DS_DatePicker does.
4. Remove the settings fields; users normally only see the picker.
Known bugs
No known bugs.
Report issues at https://github.com/bharathidas/MultiDatePicker/issues
Frequently Asked Questions
Is this the widget itself?
No. The package is a sample module that includes the widget. If you only need the widget, download Multi Date Picker from its own Marketplace listing.
Why do the Current Date fields show 0?
0 means "not set", so the calendar opens on today. Enter a year and month, for example 2027 and 3, to open on March 2027.
What changed from version 1.1.0?
Version 1.1.0 was a complete Mendix 9 app. Version 1.2.0 is a module package for Studio Pro 10.24.17 that you import into your own app, and it includes widget 1.2.0.
Releases
**Multi Date Picker**
Multi Date Picker is a flexible and highly customizable date picker component. It enables users to select multiple dates or date ranges, offering a wide array of customization options.
[https://www.npmjs.com/package/react-multi-date-picker](https://www.npmjs.com/package/react-multi-date-picker)
**Features**
• **Value**: The value of the date passed into the component.
• **Placeholder**: Placeholder.
• **Disabled**: disabled.
• **Ready Only**: read-only.
• **Input Class**: Input Class for styling.
• **Editable**: Input of manual date.
**Display and Format**
• **Format**: format of the date.
• **Date Separator**: default is ','.
• **Display Full Year**: Display Full Year
• **Highlight Today**: Highlight Today
**Date Selection**
• **Min Date**: Min date for selection
• **Max Date**: Max date for selection
• **On Open Pick New Date**: On open pick new date.
**Multiple Dates and Range Selection**
• **Multiple**: Set to true when range is true.
• **Range**: Range selection
• **Range Hover**: Highlight the range when hovering the dates
• **Multiple Range Separator**: Multiple Range Separator.
**Month and Year Picker**
• **Only Month Picker**: Only Month Picker
• **Only Year Picker**: Only Year Picker
• **No. of Months**: No. of Months
• **Disable Year Picker**: Disable Year Picker
• **Disable Month Picker**: Disable Month Picker
• **Months**: Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sept,Oct,Nov,Dec.
**Week and Day Picker**
• **Week Picker**: Week Picker
• **Disable Day Picker**: Disable Day Picker
• **Week days**: sun,mon,tue,wed,thur,fri,sat
• **Week Start Day Index**: change the start day of the week.For example, if you want the start day of the week to be Monday, you should set the weekStartDayIndex value to 1.The value of weekStartDayIndex must be a number between 0 and 6.
• **Show Other Days**: Show Other Days
• **Display Week Numbers**: Display Week Numbers
• **week Number**: week Number Header Name
• **Sort**: Sort the selected dates
**Current Date**
• **Year**: on opening muti date picker which Year needs to be displayed.
• **Month**: on opening muti date picker which Month needs to be displayed
• **Day**: on opening muti date picker which Day needs to be displayed.
**Header**
• **Header Month Year Separator**: Header Month Year Separator
• **Hide Year From Header**: Hide Year From Header
• **Hide Month From Header**: Hide Month From Header
• **Hide Week Days From Header**: Hide Week Days From Header.
**Plugin**
• **Date Panel**: display Date Panel.
• **Time Picker**: display Time Picker.
• **Date Picker Header**: display Date Picker Header.
• **highlight Week End**: highlight Week End
• **highlight Week End Array**: Which week (Array) needs to be highlighted
• **Tool bar**: display Tool bar.
**Demo URL:**
[https://multi-datepicker-react-sandbox.mxapps.io/login.html?profile=Responsive](https://multi-datepicker-react-sandbox.mxapps.io/login.html?profile=Responsive)
**Credentials:**
demo_administrator
Le1ZiYG5LFtv
**Dependencies**:
• Mendix modeler 9.12.4.
**Issues, suggestions and feature requests**
[https://github.com/bharathidas/MultiDatePicker/issues](https://github.com/bharathidas/MultiDatePicker/issues)