Date & Time component

🌐 This document is available in both English and Ukrainian. Use the language toggle in the top right corner to switch between versions.

1. Component description

DateTime component is an interface element for working with date and time.

Use DateTime component from the list of Latest components.

2. Main functions

The DateTime component supports a large number of options for interaction with the process form, which are distributed across tabs.

  • Display

  • Date

  • Time

  • Data

  • Validation

  • API

  • Conditions

  • Table

  • Label: The name of the component that appears next to it.

  • Label Position: determines the position of the name relative to the component (top, right, left, or bottom).

    • For options Left (Left-aligned), Left (Right-aligned), Right (Left-aligned), Right (Right-aligned).

      • Label Width: sets the width occupied by the Label as a percentage relative to the input.

      • Label Margin: sets the offset between Label and input in percentage.

  • Allow Manual Input: allows to the user manually enter the date.

  • Format: the date format for displaying the date and time value. The default format is yyyy-MM-dd HH:mm.Please use the formats provided at DateParser Codes

  • Placeholder: is the text that is displayed in the field when it is empty (unfilled).

  • Description: a description of the component that can help users.

  • Tooltip: The text displayed when hovering the cursor over the component.

  • Tab Index: An HTML attribute that allows you to control keyboard navigation through the input fields. For details, refer to HTML documentation — for example, here: tabindex.

  • Hidden: An attribute for fields that are hidden from the users but are still part of the form and are submitted along with the form. Don’t forget to clear the Clear when hidden option; otherwise, any value of this component will be empty.

  • Disabled: A setting that disables editing.

  • Enable Date Input: allows entering date for this field.

  • Use calendar to set minDate: allows using a calendar to set the minimum date.

  • Use calendar to set maxDate: allows using a calendar to set the maximum date.

  • Custom Disabled Dates: Allows disabling specific dates or dates by range using functions. More details Custom disabled dates

  • Disable weekends: allows disabling weekends.

  • Disable weekdays: allows disabling weekdays.

  • Enable Time Input: allows entering time for this field.

  • Default Value: values by default.

  • Clear value when hidden: allows to configure the clearing of the component value when the component becomes hidden on the page.

  • Custom default value: allows to set your own, custom default value for the component. This function uses JS insert. More about JS insets.

    • JavaScript: set your own value by using javascript

    • JSONLogic: set your own value by using JSONLogic.

  • Calculated value: allows to calculate the value of a component based on other data or conditions. Unlike Custom default value, the value of the field will be calculated every time any changes occur on the form - the user enters data, it is completed by http requests. This function uses JS insert. More about JS inserts.

    • JavaScript: adjust your own value with javascript help.

    • JSONLogic: adjust your own value with help of JSONLogic.

  • Allow manual override of calculated value: allows users to manually override the calculated value of the component.

  • Validate On: specifies when this component should activate validation on the client (Change or Blur options).

  • Required: the field is required to be filled in before sending the form.

  • Custom error message: a special error message displayed when data fails validation.

  • Custom validation: custom validation, which allows you to create validation checks specific to your needs. This function uses JS insert. More about JS insert.

  • Property Name: the name of the field in the data structure that will be sent when the form data is submitted. It is also the name of the field in the data structure with which the form is prefilled. The current value of this field can be checked in the data structure displayed on the Query tab in the form design interface.

  • Advanced Conditions: Here, you can configure advanced conditions for the component. For example, these conditions determine when a component becomes visible based on other components or their values.

    This function uses JS plugins. For details, see Variables in JavaScript insertions.

  • Simple: Performs the same tasks as Advanced Conditions but allows you to specify conditions in a simpler format.

  • Table View: determines whether to display the element in the table and in the EditGrid.

  • Table column width: allows to customize the column width in the table that is displayed when using the component in EditGrid.

  • Sort As Number: determines whether to sort the value as a string or as a number when using the EditGrid component.

3. Data format

Submission
String
// Format: YYYY-MM-DD | YYYY-MM-DDTHH:mm:ss.sss
// Example: '2021-02-16'
Do not use the moment object and Date as the date value, you should always send the String format to the server, as shown in the example. For moment, always call the format() function which returns a formatted date of String type.

4. Use cases

These functions use JS insert. Learn more.

4.1. Custom disabled dates

Disable all weekends for selection.

date.getDay() === 0 || date.getDay() === 6

Disable dates after today (including today). We use moment.js library here to parse, check, process, and format dates. For more methods, see momentjs docs.

moment(date).isSameOrAfter(moment(), 'day')

4.2. Custom validation

You should assign the valid variable to true, or to an error message (the error text can be provided in the condition or in the Custom Error Message field), if the check fails.

In order to perform any operations with dates, such as comparisons, you need to first convert the input field value to a Date object.

// in this case, the error text will be taken from the Custom Error Message field.
valid = new Date(input) > new Date(data.datetimeLatest)
// In this case, if valid is false, the user will see the error message.
valid = new Date(input) > new Date(data.datetimeLatest) ? 'error message'

4.3. Custom default value

Set tomorrow’s date as the default value.

value = moment().add(1,'days').format();