0

Date Input

Description

This part allows end users to enter a date in an application or select a date from a dropdown calendar.

Use

This part allows end users of an application to enter a date manually or select a date from a selectable calendar. If the end user selects a date using the date picker, the system formats the date according to the provided part settings.

Editor Fields

Basic Tab Options

Field Name Description Type/Options Optional/Mandatory

HTML enabled
(v8+)

 When this is enabled you can put HTML formatting in the Question caption, which means the system will display HTML tags in the text in the caption editor as they would appear in a browser. The editor browser provides limited HTML editing options for text formatting. You can toggle the HTML-enabled button on and off to alternate between seeing and editing tags and displaying them as they will appear. Yes | No Optional
Question This is the text (or HTML) the system shows in front of the date input. Text | HTML       Optional
Data object This is the name of the data object that stores the selected or entered date. Data Object Mandatory
Input Display format This is the format in which the end-user should enter the date.
  • If the end-user uses the date picker the system will display the date in the the input field in the specified format.
  • If the end-user enters the date manually, they must use the specified format.
If the end-user enters a date in a format other than the specified one, the browser will display a popup warning message. 

mm = month
dd = day
yyyy = year		 Dropdown Selection Mandatory
Submit on select A check in this checkbox indicates the system should automatically submit the selected/entered date value. Yes | No Optional
Auto format date If you check this checkbox the system adds a CSS styling class called "autoformatdate" to the input page. This makes it easier for you to style date input fields.

Note: You must create a CSS stylesheet containing this style class before the system will update the appearance of the input field.		 Yes | No Optional
Min year This setting allows you to limit the dates the date picker displays to only those after the specified year. 

The input format is yyyy | -y(yy) | +y(yy) and the default year is 1900.

Examples:
  • If you enter 1950, the system will only display dates from 1950 on.
  • If you enter -100, the system will display all years 100 years prior to the current year.
  • If you enter +2, the system will display dates starting 2 years in the future from the current date and beyond.
Note: This setting is a guide for which years to display rather than a validation that the end-user entered the correct date. End-users could still enter a date prior to the configured Min year.		 Number Optional
Max year This setting allows you to limit the dates the date picker displays to only those before the specified year. 

The input format is yyyy | -y(yy) | +y(yy) and the default: is +10.

Examples:
  • If you enter 1950, the system will display only dates up to 1950.
  • If you enter -100, the system will display dates up to 100 years before the current date. 
  • If you enter +2, the system will display dates up to 2 years past the current date.
Note: This setting is a guide for which years to display rather than a validation that the end-user entered the correct date. End-users could still enter a date prior to the configured Max year.		 Number Optional
Hide calendar If you select this option the system will remove the select date/calendar icon. End-users can only enter a date manually. Checkbox Optional
First day This allows you to select the first day of the week. The default first day of the week is chosen based on the selected locale or Sunday. Options Optional
Day This allows you to set which days of the week the user can select. All days allows end-users to select all days of the week. Options Optional
Locale This allows you to set the locale; for example, NL, DE, FR. If you leave it empty the system uses default settings. If you set a locale you must also load the corresponding locale JS file, e.g. /lncore//s/jquery-ui-1.8.12/ui/i18n/jquery.ui.datepicker-nl.js. Text Optional

Validate Tab Options

Field Name Description Type/Options Optional/Mandatory
Type This allows you to have the system trigger the display of an error message based on parameters you define:
  • mandatory: This means the end-user must provide a value or the system will display an error message.
  • numeric, percentage, currency: These mean that the value the end-user enters must be a number and may contain a comma or dot as decimal character. This validation rule can be used when the data-object-type is set to text. This combination allows the user to enter decimal number and allows users to enter a different decimal point (e.g. comma).
  • time: This means the input must be a time string--hh:mm (12:14, for example) or hhmm (1214) are both allowed
  • custom: This allows the user to set a custom validation parameter. 
  • email: This means the value the end-user enters must contain an '@' symbol.
  • date: This means the input must be a date string; mm/dd/yy, for example.
 Options Optional
Condition This is only required when type=custom--when you set a custom validation parameter. It tells the system under which condition to display a validation message. Text Conditional
Message This is the message the system displays to the end-user if a validation rule is not met. The system displays the message associated with the first violated rule. Text Optional

Style Tab Options

See the Style Tab Options article for more information about these settings.

Advanced Tab Options

Field Name Description Type/Options Optional/Mandatory
Captions
(v8.1+)		 This allows you to specify different captions based on rules. The system only displays one caption, the last caption in the table the rule determines to be true. If there is no rule the system determines to be true, the system uses the 'standard' caption. For an example, see Multi-Caption Example Project. Text Optional
Events These are the JavaScript events that should be attached to the date picker. Text Optional
Disable input expression
(v7.4.6+)		 Enter a variable in the format $(...) to make the date input conditional on a value.
Otherwise, the system presents the Disable input selection in the Style tab (0 for enabled 1 for disabled)		 Text Optional

Reply

null
Login to reply

Content aside

  • 2 yrs agoLast active
  • 61Views
  • 3 Following