sc-date-time

This document is a user guide for the sc-date-time component version 6.5.63.

1 Purpose

sc-date-time places a DateTimePicker control on a form, displaying as a text box with a calendar button. Clicking the calendar button will open a calendar pop-up allowing the user to select the date and time and have it display in the text box. If needed, the selected date and time can be edited either manually within the text box or by clicking the calendar button to select a different date and time from the calendar pop-up.

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" values.

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 above "date" and "time" values, all sc-date-time values would display like:

!

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')

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 above "date" and "time" values, all sc-date-time values would display like:

The sc-date-time definition provides fields for setting the properties of a sc-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

2.2 Required Customizable Fields

2.3 Optional Customizable Fields

3 Typical 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",
    "name": "typicalDefnScDateTime",
    "label": "Typical Defn sc-date-time"
}

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.

    "allowInput": false,
    "defaultNow": "New",
    "disableSave":true,
    "displayFormat": "D d-m-y",
    "enabled":false,
    "fullWidth":true,
    "mandatory": true,
    "noCalendar": true,
    "visible":false,

4 Examples

Example 1

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

{
    "componentName": "sc-date-time",
    "name": "typicalDefnScDateTime",
    "label": "Typical Defn sc-date-time"
}

Resulting field on the form:

Clicking the calendar button will open the calendar pop-up allowing the user to select a date and time value.

Resulting field on the form after clicking the calendar button

• The calendar pop-up opens at the date with the current day circled. Buttons provide the ability display the calendar at a different month and year.

• To select the current date and time, click the "Now" button. This closes the calendar pop-up and displays the current date and time in the sc-date-time text box.

• To clear the sc-date-time field, click the "Clear" button.

• To select a specific date and time, display the pop-up calendar at the required month and year and select the required day e.g. 4 Nov 2021. The selected day is highlighted and the calendar will show time editable fields initialized at the current time. Select the required time e.g. 9:35 PM:
  
  

  
  
  Click the "Done" button. This closes the calendar pop-up and displays the selected date and time in the sc-date-time text box.

Resulting field on the form after selecting the required date and time and closing the calendar pop-up

Resulting field in the document and database:

"typicalDefnScDateTime": "2021-11-04T10:35:00.000Z"

Note: The date and time is saved in the document and database in ISO Date format.