Skip to content

sc-date-time

sc-date-time-field-Example-1-Image-3

 

1 Purpose

sc-date-time places a date time field on a form, allowing the user to enter or select a date time value.

The system wide display format for sc-date-time values is defined in the Environment Configuration document by the "clientConfiguration", "dateFormat" field's "date and "time" entries.

Example:

If the Environment Configuration document has the "clientConfiguration", "dateFormat" field defined as:

        "dateFormat": {
            "date": "dd/MM/yyyy",
            "general": "dd/MM/yyyy hh:mm a",
            "shortMonth": "dd/MMM/yyyy hh:mm a",
            "time": "hh:mm a"
        }

Then using the "date" and "time" entries, all sc-date-time values would display like:

sc-date-time-display-format-1

Example:

If the Environment Configuration document has the "clientConfiguration", "dateFormat" field defined as:

        "dateFormat": {
            "date": "EEEE, MMMM d, y",
            "general": "dd/MM/yyyy hh:mm a",
            "shortMonth": "dd/MMM/yyyy hh:mm a",
            "time": "HH:mm a"
        },

Then using the "date" and "time" entries, all sc-date-time values would display like:

sc-date-time-display-format-2

Below is the full list of elements that can be used to build "date" and "time" display format strings:

  • 'yyyy': 4 digit representation of year (e.g. AD 1 => 0001, AD 2010 => 2010)
  • 'yy': 2 digit representation of year, padded (00-99). (e.g. AD 2001 => 01, AD 2010 => 10)
  • 'y': 1 digit representation of year, e.g. (AD 1 => 1, AD 199 => 199)
  • 'MMMM': Month in year (January-December)
  • 'MMM': Month in year (Jan-Dec)
  • 'MM': Month in year, padded (01-12)
  • 'M': Month in year (1-12)
  • 'LLLL': Stand-alone month in year (January-December)
  • 'dd': Day in month, padded (01-31)
  • 'd': Day in month (1-31)
  • 'EEEE': Day in Week, (Sunday-Saturday)
  • 'EEE': Day in Week, (Sun-Sat)
  • 'HH': Hour in day, padded (00-23)
  • 'H': Hour in day (0-23)
  • 'hh': Hour in AM/PM, padded (01-12)
  • 'h': Hour in AM/PM, (1-12)
  • 'mm': Minute in hour, padded (00-59)
  • 'm': Minute in hour (0-59)
  • 'ss': Second in minute, padded (00-59)
  • 's': Second in minute (0-59)
  • 'sss': Millisecond in second, padded (000-999)
  • 'a': AM/PM marker
  • 'Z': 4 digit (+sign) representation of the timezone offset (-1200-+1200)
  • 'ww': Week of year, padded (00-53). Week 01 is the week with the first Thursday of the year
  • 'w': Week of year (0-53). Week 1 is the week with the first Thursday of the year
  • 'G', 'GG', 'GGG': The abbreviated form of the era string (e.g. 'AD')
  • 'GGGG': The long form of the era string (e.g. 'Anno Domini')

The sc-date-time definition provides fields for setting the properties of a date time field and is fully described below.

 

2 Definition

sc-date-time is defined by a set of name/value pair fields consisting of:

  • Required system fields
  • Required customizable fields
  • Optional customizable fields

Note:

  1. Default values for fields described in the tables below are shown in bold text.

2.1 Required System Fields

Field Valid Values Description
componentName sc-date-time The component name.
Example: "componentName": "sc-date-time"

2.2 Required Customizable Fields

Field Valid Values Description
name Any value written in camel case. Defines the name of the date time field in the document and database.
Example: "name": "testScUrl"

2.3 Optional Customizable Fields

Field Valid Values Description
defaultNow New Set the date time field value to the date & time the document was invoked.
Example: "defaultNow": "New"
Save Set the date time field value to the date & time the document was last saved.
Example: "defaultNow": "Save"
Defaults to no value.
disableSave true Entering a value in the date time field does not trigger the Save icon to flash.
Exiting the form without saving the entered value does not trigger a warning message to display.
Example: "disableSave": true
false Default value. Entering a value in the date time field does trigger the Save icon to flash.
Exiting the form without saving the entered value does trigger a warning message to display.
enabled false The date time field is greyed out.
A Stop icon appears on mouseover.
A value cannot be entered in the date time field.
Example: "enabled": false
true Default value. A value can be entered in the date time field.
fullWidth true The date time field displays full width on the form.
Example: "fullWidth": true
false Default value. The date time field does not display full width on the form.
label Any value Defines the name of the date time field on the form i.e. the field label.
Example: "label": "Test sc-date-time"
"name" field value Defaults to the value defined for the 'name' field, with the first letter displayed in upper case and any upper case letters displayed in lower case prefixed with an underscore.
Example: "Test_sc_text_box" is the default value if the "name" field value was "testScDateTime".
mandatory true The date time field displays as mandatory (i.e. label in red text with an asterisk).
Saving without a value, a message prompts the user to enter a value for the date time field.
Example: "mandatory": true
false Default value. The field displays as optional (i.e. label in black text).
visible false The date time field is not visible on the form.
Example: "visible": false
true Default value. The date time field is visible on the form.

 

3 Typical sc-date-time Definition

Below is a typical sc-date-time definition, defined with its required fields plus any optional field whose value is typically other than its default value.

{
    "componentName": "sc-date-time",
    "label": "Test sc-date-time",
    "name": "testScDateTime"
}

One or more of the optional fields shown below can be included in the above definition should a value other than their default value be required.

    "mandatory": true,
    "defaultNow": "New",
    "disableSave":true,
    "enabled":false,
    "fullWidth":true,
    "visible":false,

 

4 Examples

Example 1

sc-date-time defined with the typically needed fields.

{
    "componentName": "sc-date-time",
    "label": "Test sc-date-time",
    "name": "testScDateTime"
}

Resulting field on the form:

sc-date-time-field-Example-1-Image-1

A date time value can be entered directly or selected by clicking the calendar button

Resulting field on the form after clicking calendar button

sc-date-time-field-Example-1-Image-2

To use calendar control:

  • Click a date returns the date with a time of 12:00 AM.
  • Click "NOW" returns current date and time.
  • Click "CLEAR" clears the date time field.
  • Click "TIME" to select the time.

Resulting field on the form after selecting or entering a date time value

sc-date-time-field-Example-1-Image-3

Resulting field in the document and database:

"testScdateTime": "2018-07-25T01:07:27.690Z""