jQueryUI Datepicker and Timepicker

Content Type: Widget
Categories: Data

Overview

A simple alternative to the built-in Mendix datepicker, that uses the jQueryUI Datepicker and Trent Richardson's Timepicker addon (http://trentrichardson.com/examples/timepicker/). For a demo, see https://jqueryuidatetimepi.mxapps.io/ Some key-features: - select picker type (datepicker, timepicker, or datetimepicker) - set custom date/time format - set a year range and/or time range - set a custom placeholder text - select several themes, including a Mendix based theme This widget is a continuation of the jQueryUIDatepicker widget previously published in the AppStore.

Documentation

Demo urlhttps://jqueryuidatetimepi.mxapps.io/

jQueryUIDateTimePicker

A simple alternative to the built-in Mendix datepicker, that uses the jQueryUI Datepicker and Trent Richardson's Timepicker addon (http://trentrichardson.com/examples/timepicker/).

Some key-features:

  • select picker type (datepicker, timepicker, or datetimepicker)
  • set custom date/time format
  • set a year range and/or time range
  • set a custom placeholder text
  • select several themes, including a Mendix based theme

Installation

Add the widget to a dataview and select a datetime attribute the date/time should be saved to.

Configuration

General

Attribute: The DateTime attribute the data is stored in

Picker type: Set the picker type: Date picker, time picker, or Date and Time picker

Display button bar: If set to 'yes', displays 'Today' and 'Done' buttons

Display

Icon tooltip: Set a tooltip on the calendar icon

Placeholder text: Set a custom placeholder text. If left empty, the date/time format will be shown as placeholder

Label: The label to show on the form. Leave empty for no label

Label width: Width of the label. Only applicable for horizontal display

Label display: Horizontal (next to the input) or verticel (above the input)

Theme: set a theme/style for the datepicker

Date options

Custom date format: set a custom date format to be used. See jQueryUI documentation (http://api.jqueryui.com/datepicker/#utility-formatDate) for possible formats

Default date: The default date of the datapicker (attribute or string). Should be corresponding to the date format

Range: Range in years. Can be either absolute (1970:2018) or relative (-10:+10)

Time options

Time format: Set a custom time format to be used. See Time picker documentation (http://trentrichardson.com/examples/timepicker/#tp-formatting) for possible formats

Minimum/Maximum time: Set the minimum/maximum time of the timepicker. Should be corresponding to the time format

Add slider buttons: Show +/- buttons next to the slider

Behaviour

Set optional on-click microflow

Known bugs

None

Releases

Version: 2.3.1
Framework Version: 7.14.1
Release Notes: fix when user's language is not the default language
Version: 2.3.0
Framework Version: 7.14.1
Release Notes: - placeholder, tooltip & microflow progress message are now translatable strings (previous values for these attributes will be cleared) - added nanoflow as on change event - workaround for weird bug with slider buttons
Version: 1.1.0
Framework Version: 7.14.1
Release Notes: - fixed custom date format - fixed for Mx 7.14+ - default date can now be either a string or attribute
Version: 1.0.0
Framework Version: 7.5.1
Release Notes: A continuation of the jQueryUIDatepicker widget that was previously published in the AppStore. - Added support for a Timepicker, using Trent Richardson's jQuery Timepicker Addon (http://trentrichardson.com/examples/timepicker/) - Several improvements by Marcus Groen (thanks!) - Added several themes, including a Mendix based theme - Several fixes - Several minor improvements