usdatepicker()

The usdatepicker() function is a framework-independent function. It creates a third-party date-time picker as an accompaniment to an input element. This date picker makes it easy to pick a date value, a time value, or a date-time value for the input element:

The date picker is created in a framework-independent fashion. It automatically uses the current framework's styling classes. The HTML needed for displaying the date picker is generated. This HTML may also be destroyed, if necessary.

Returns the HTML input element for which the datepicker is displayed.

Syntax
 

.usdatepicker( command )
.usdatepicker( options )

command  ::= { "show" | "hide" | "destroy" }

options  ::= {
  format: moment-js-io-format,
  formatDate: moment-js-date-format,
  formatTime: moment-js-time-format,
  timepicker: time-picker,
  yearStart: integer,
  yearEnd: integer,
  value: moment-js-io-format,
  todayButton: today-button,
  lang: lang,
  onClose: close-function
}

time-picker       :=  { true | false }
today-button      :=  { true | false }
lang              :=  { "en" | "nl" | ... }

You must call .usdatepicker() with either a command keyword or an options struct.

Command is a string keyword that alters the state of the date picker:

• "show": displays the date picker,
• "hide": hides the date picker,
• "destroy": hides the datepicker and disbands all of its HTML structures and all events assigned.

The options struct can be used to define various properties of the date picker.

format may be set to a moment-js-io-format which is a string value determining the output date format of the date picker. You can easily obtain a valid moment-js-io-format value by deriving it from the corresponding USoft IO format that you require. To do this, press F12 in your browser. On the browser console, call this function:

$.udb.data.date.momentjsFormat(usoft-io-format, datepart-only)

where datepart-only is boolean that strips the time part of the IO format (if any). The default of datepart-only is 'false'. For example:

>  $.udb.data.date.momentjsFormat("DD-MM-YYYY HH24:MI")

>  "DD-MM-YYYY HH:mm"

When a time value or date-time value is set or changed through the date picker, seconds are either ignored or just kept as they are.

Use formatDate instead of format if only date parts are to be used.

Use formatTime instead of format if only time parts are to be used.

timepicker may be set to a time-picker boolean that determines whether a time picker must be provided in addition to the date picker, or not. The default is true, meaning that a time picker is provided by default.

yearStart and yearEnd may be set in order to restrict the range of years from which the user can choose. A good year range is 1900-2099. These 2 properties must be set to integers.

value may be set to a string value determining the starting value of the datepicker. Use the IO format that you supplied for format, formatDate, or formatTime.

todayButton may be set to a today-button boolean that determines whether or not the datepicker must supply a button that enables the user to jump to today's date and time. The default is true, which means that such a button is supplied by default.

lang may be set to an explicit language code that USoft is to use to display the date picker with. If you do not set lang, by default, the current language (stored in the variable window.language) is used. You can set lang to any valid language code available in your application. By default, "en" and "nl" are available.

onClose may be set to a function that is to execute immediately after the date picker is closed. This can be used for example to validate the last selected value, or to pass this value to the input textbox, or both.

Example

$("input.hasDatePicker").usdatepicker({
    format: "DD-MM-YYYY HH:mm:ss",
    formatDate: "DD-MM-YYYY",
    formatTime: "HH:mm",
    timepicker: true,
    yearStart: 1900,
    yearEnd: 2099,
    value: "21-09-2021 15:44:23",
    todayButton: false,
    lang: window.language.toLowerCase()
});

$("input.hasDatePicker").usdatepicker('show');