Edit documentation Edit document
GH-Elements

Date

Date is a gh-element for working with date data. It allows you to use date and time in applications. This data is stored as a string that could be converted for user to any type of interpretation.

Functional Characteristics

This element allows you to save the date and time of any event. Due to it, items are placed in the calendar and on the task board. Thus, the user can create his own schedule using the date element.

Value Format

Date element has quite simple value format.

{
    "field_value": "1640210419989"
}

Date value is a quantity of milliseconds from 1970 year to the specified date and time.

If Date Range is true, then the value will look like two dates in milliseconds separated with colon.

{
    "field_value": "1643621340000:1645090140000"
}

These values are added to the element due to Date Picker.

Date Picker

This is an interactive window that opens when you click on the date field. It is looks like a month from standard calendar. There are field with the first letters of weekdays above it and four buttons below.

Standard date picker

If the time picker is used then the date picker is as follows:

Date picker with time picker

In addition, the date picker provides a tab for quickly selecting the month of a particular year:

Date picker list of months sorted by years

Element Options

This gh-element has not many options, but it has its own specificity.

Field Settings

In addition to standard Field Name and Name Space, date element has only two options in field settings.

Field settings of the date element

Name Description
Time Picker allows to display and update time along with date; details...
Date Range allows to use period of time as a value; details...

Time Picker

Time Picker is an addition to the Date Picker. It allows to set time in the date element.

Date Range

This is a function that allows you to set the time period in a date item, if it has a true value.

Time Format

Time format allow to select the format of time displaying. It is mostly used when the Time Picker is true. But it is still available when Time Picker is false.

Time format of the date element

Name Description
PM/AM displaying time in 12-hour time format
24 hours displaying time in 24-hour time format

Default Value Settings

This set of options allows to configure the date default value. The date element has only two such parameters.

Settings of the date default value

Name Description
Use default value shows the default value is used or not
Default value allows to update default value; appears when Use default value is on; details...

Default value

There is a limited number of possible default values:

  • Today
  • Tomorrow
  • Next 7 days
  • Next 10 days
  • Next 14 days
  • Next 30 days
  • Next Calendar Year
  • Yesterday
  • Past 7 days
  • Past 10 days
  • Past 14 days
  • Past 30 days
  • Past Calendar Year

Then the default value is Today, the element will store the date and time the item was applied. That value is in the time zone of the location where user applied an item. It will not adapts if the item is opened in other time zones.

That is, if in London the product is applied at 8 pm, in Washington it will show 3 pm.

Element Style

Despite of variety of interpretations, date element has all standard style settings. You can read more about them in Setting Overview. Also, this element has additional functions that allows to configure the format of the element value.

Style of the date element

General Settings and Date Format For Interpretation

The first block of style options contains the standard general settings and settings of date interpretation format. As was mentioned above, these settings allows you to customize the value of the date gh-element. This format can be displayed in GudHub using only the Value interpretation type.

General style settings and date format settings of the date element

Name Description
Format allows to enter the format of the date value; details...
Format options allows to select one of ready-made formats; details...

Format

The current function allows to enter your own format for the value. For example:

  • MM/dd/yyyy
  • dd-MMM-yy
  • yyyy-yyyy

This function accepts absolutely any formats. When entering your own format, Format Options must be empty. Otherwise, the format of the selected option in Format Options will be entered in the current setting field.

Format Options

The second function allows to select one of five value formats:

  • 2020/6/22 16:30:45 (Default)
  • 22.06.2020
  • 06-22-2020
  • 22.06 16:30
  • 22.06.2020 16:30

When you select one of them, the formatting function will be filled with the appropriate format.

Data Model

Since this gh-element has not a big number of options, its data model is quite simple and small.

{
    "data_model": {
        "dafault_value": "",
        "data_range": 0,
        "default_field_value": 0,
        "hour_format": "hh",
        "interpretation": [],
        "time_picker": 1,
        "today_as_default_field_value": false,
        "use_default_value": false
    }
}
Name Type Description
dafault_value string contains date default value
data_range boolean shows whether the date range is used or not
default_field_value boolean shows whether default value is used or not
hour_format string shows which time format is used
interpretation array contains all date interpretations
time_picker boolean shows whether time picker is used or not
today_as_default_field_value boolean shows whether todays date is used as a default value
use_default_value boolean shows whether the default value is used

Filtration

There are special filters for date elements:

Interpretation

This gh-element has a big variety of interpretation types. Interpretations can be slightly different, depends of Time Format, Time Picker, and Date Range values.

Interpretation types of date

Day, month, year

The first interpretation allows to display full date with an icon and time.

Day, week, month, year

This one allows to display full date, weekday, and time.

Day, month, time

Allows to display date as day and month, and time.

Default

Default date interpretation type is the same to the first one. It displays date as full date with icon and time.

Icon

Allows only the icon to be displayed and makes the date value uneditable.

Plain text

This is an interpretation type that allows date to be displayed as a full date and time.

Value

This type displays only the value of the field.