Multi Date Picker 1.2.0

Multi Date Picker 1.2.0

Widget version: 1.2.0 (same as this GitHub release tag)

Compatibility

• Mendix Studio Pro 10.24.17
• Built with @mendix/pluggable-widgets-tools 10.16.0
• Works in the Mendix 10 React client

Changes

• Rebuilt for Studio Pro 10.24.17.
• Fixed "require is not defined" and "t.forwardRef is not a function" errors in the React client (react-multi-date-picker is CommonJS only; the build now rewrites those references).
• Current Date: empty Year, Month or Day attributes (read as 0 by Mendix) are ignored and today's value is used. Before, the calendar opened on an invalid date such as "November, -1".
• Widget source code is now in the repository, in the multidatePicker folder.

Install / upgrade

Download mendix.MultidatePicker.mpk from this release, put it in your app's widgets folder and press F4 in Studio Pro. When upgrading, choose Update all widgets if Studio Pro reports that the widget definition has changed.

Sample module

MultiDatePicker.mpk (Studio Pro 10.24.17): a playground page, MultiDatePicker.Home_Web, with the 1.2.0 widget. Import it with App > Import module package.

Previous versions

• V1.1.0 — Mendix 9
• V1.0.0 — Mendix 9

Multi Date Picker Sample 1.2.0

Multi Date Picker Sample 1.2.0

Sample module for the Multi Date Picker widget, converted for Mendix Studio Pro 10.24.17.

Package

• MultiDatePicker.mpk — import with App → Import module package
• Includes widget mendix.MultidatePicker.mpk 1.2.0
• Module: MultiDatePicker · Page: MultiDatePicker.Home_Web · Microflow: DS_DatePicker
• Entity MultiDatePicker (non-persistable): the selected dates plus one attribute per widget setting

After import

1. Give your user roles the module role MultiDatePicker.User under App → Security → User roles
2. Add MultiDatePicker.Home_Web to the navigation
3. Run the app and open the playground: pick dates at the top, change settings below, and read the stored value under Date Selected

Changes from 1.1.0

• Converted from a complete Mendix 9 app package to a module package for Studio Pro 10.24.17
• Includes widget 1.2.0: works in the React client; empty Current Date fields (0) open the calendar on today

Notes

• Requires Atlas_Core (Atlas_Default layout)
• The widget-only package is on release V1.2.0
• For Mendix 9, use the app package on release V1.1.0

V1.1.0

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

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

Credentials:
demo_administrator
Le1ZiYG5LFtv

Dependencies:
• Mendix modeler 9.12.4.

Issues, suggestions and feature requests
https://github.com/bharathidas/MultiDatePicker/issues

MultiDatePicker

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

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

Credentials:
demo_administrator
Le1ZiYG5LFtv

Dependencies:
• Mendix modeler 9.12.4.

Issues, suggestions and feature requests
https://github.com/bharathidas/MultiDatePicker/issues