Multi Date Picker Sample

Content Type: Sample
Categories: Utility

Overview

Sample app to use the multi date picker.

 

Play around the app for different features such as range,time pluging, only year and only month etc... 

Documentation

Demo urlhttps://multi-datepicker-react-sandbox.mxapps.io/login.html?profile=Responsive

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/issue

Releases

Version: 1.0.0
Framework Version: 9.12.4
Release Notes: **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)