React Date Time Picker

Content Type: Widget
Categories: Data


Datepicker, timepicker and datetime picker based on Widget to select a date and/or time. Ability to set a minimum and maximum date that the user can select and show weeknumbers.



DateTimePicker, datepicker or timepicker based on


  • Use as Datetimepicker.
  • Use as Datepicker.
  • Use as Timepicker.
  • Disable days in the past.
  • Disable dates before and/or after another date.
  • Change language settings to change default formatting.
  • Let the user type the datetime.
  • Show weeknumbers
  • Choose an initial datetime view
  • Display as text only



  • Default mendix behavior for labeling, visibility and editability.
  • Read-only style: How to show the widget when disabled: as control or as text, in line with mendix styling
  • DateTime: Attribute to use.
  • Placeholder: Text to show when dateTime is empty (e.g. the format)
  • Valid date: Boolean property controlled by the widget when input changes. Set to false if the date entered is not a valid date and to true otherwise. Value is only changed when the value in the datepicker changes, therefore initialize the value in mendix. If you use this property, make sure the users have got write access to this attribute.


  • OnChange action: Action to be called when dateTime is changed.
  • Close on select: Whether or not to close the datetimepicker when a date is selected.
  • Disable days in past: Whether or not to disable all days in the past.
  • Minimal Date: Attribute used to disable all days before this date
  • Maximal date: Attribute used to disable all days after this date
  • Initial View Date: Choose an initial datetime to default open on

DateTime Options

  • Locale: Change language according to (e.g en (english) or nl(dutch))
  • Picker: Whether to use the widget as datetimepicker, datepicker or timepicker
  • dateFormat: If default format of locale does not suffice, you can enter the format in here. See for available formats.
  • Show Week Numbers: Whether or not to show weeknumbers in the datepicker
  • timeFormat: Same as dateformat
  • Integers to change min, max and step of hours, minutes and seconds. Note that maximal minute and maximal second are 59, since 60 will be 0.


Version: 1.8.0
Framework Version: 10.6.0
Release Notes: Updated to mendix 10
Version: 1.7.0
Framework Version: 9.24.0
Release Notes: Fixed position when on right side of screen and doesn't fit in the space available Minor updates/improvements
Version: 1.6.0
Framework Version: 9.24.0
Release Notes: Added TabIndex Fixeded position if focused initially Upgraded widget
Version: 1.5.1
Framework Version: 9.6.0
Release Notes: Initial date moved to expression. Initial date only used when date not filled. Datepicker is not reset when invalid date is entered. Fixed locale when used in combination with initial view. IMPORTANT: Initial date has been renamed and moved to expression, reselect your date again if this property was used
Version: 1.4.2
Framework Version: 9.6.0
Release Notes: Fixed localed to be able to use other languages
Version: 1.4.1
Framework Version: 9.6.0
Release Notes: Show datepicker on top of input field if it doesn't fit
Version: 1.4.0
Framework Version: 9.6.0
Release Notes: Updated widget to Mendix 9. Fixed position of the dateTimePicker such that it is always directly under the input field and moves along when scrolling. Added className reactDateTimePicker for styling purposes.
Version: 1.3.0
Framework Version: 8.18.0
Release Notes: Added Initial view date
Version: 1.2.1
Framework Version: 8.18.0
Release Notes: Minor update read only styling to be ready for atlas 3
Version: 1.2.0
Framework Version: 8.18.0
Release Notes: Updated dependencies to be ready for mendix 9 and added read-only style property