Horizontal Date Picker

Content Type: Widget
Categories: Data

Overview

Horizontal Date Picker is a custom-build web widget used for choosing dates but draws horizontally into a vertically narrow container. It allows easy day picking using the horizontal pan gesture.

Documentation

DatePickerHorizontal

Objective:

Horizontal Date Picker is a custom-build web widget used for choosing dates but draws horizontally into a vertically narrow container. It allows easy day picking using the horizontal pan gesture.

Dependencies:

Studio pro version – 9.12.10

Configuration:

To get started with Horizontal Date Picker, a Mendix widget, first download it from the Mendix Marketplace. Then, simply drag and drop the widget onto your desired page within your Mendix project. Double-click on the widget to open its configuration, and under the General tab, choose your Attribute in the appropriate field and also provide the integer value which denotes the number of days. That’s it, now you can use it in your application.

Screenshots:

image

Note:

For Styling purpose Overwrite these classes would help you achieve your desired Styling. (date-day-item-disabled, datepicker-date-day-Item:hover, date-day-Item-selected, datepicker-button-previous, .datepicker-button-next, datepicker-month-label)

Releases

Version: 1.0.0
Framework Version: 9.12.10
Release Notes: # Horizontal Date Picker ## Objective: Horizontal Date Picker is a custom-build web widget used for choosing dates but draws horizontally into a vertically narrow container. It allows easy day picking using the horizontal pan gesture. ## Dependencies: Studio pro version – 9.12.10 ## Configuration: To get started with Horizontal Date Picker, a Mendix widget, first download it from the Mendix Marketplace. Then, simply drag and drop the widget onto your desired page within your Mendix project. Double-click on the widget to open its configuration, and under the General tab, choose your Attribute in the appropriate field and also provide the integer value which denotes the number of days. That’s it, now you can use it in your application. ## Screenshots: ![image](https://user-images.githubusercontent.com/26872174/221770773-6a1ed086-8985-4f3a-8dd3-68cc8eb3309e.png) ![image](https://user-images.githubusercontent.com/26872174/221770789-644d48a6-d195-4f38-97a2-7890df1eb741.png) ![image](https://user-images.githubusercontent.com/26872174/221770818-53067782-acc1-4727-8881-7f7e9950114c.png) ## Note: For Styling purpose Overwrite these classes would help you achieve your desired Styling. (date-day-item-disabled, datepicker-date-day-Item:hover, date-day-Item-selected, datepicker-button-previous, .datepicker-button-next, datepicker-month-label)