Current Version: 2.1.6

Note:

Any Coral CSS classes and attributes not explicitly mentioned in the public documentation are private and subject to change. Their direct use is not recommended and at high risk of breaking after subsequent updates of CoralUI library. For technical details of how to use Coral safely, please refer to the CoralUI Architecture.

Github: @coralui/coralui-component-clock

Clock depicts a time selector.

Forms

Vertical Layout

Label

Required

Invalid

Show Markup

<form class="coral-Form coral-Form--vertical u-columnMedium">
  <section class="coral-Form-fieldset">
  <div class="coral-Form-fieldwrapper">
    <label id="label-vertical-0" class="coral-Form-fieldlabel">Label</label>
    <coral-clock class="coral-Form-field" name="name" labelledby="label-vertical-0"></coral-clock>
  </div>
  <div class="coral-Form-fieldwrapper">
    <label id="label-vertical-1" class="coral-Form-fieldlabel">Required</label>
    <coral-clock class="coral-Form-field" name="name" labelledby="label-vertical-1" required></coral-clock>
    <coral-icon class="coral-Form-fieldinfo" icon="infoCircle" size="S" id="coral-Form-Vertical-Clock-fieldinfo"></coral-icon>
    <coral-tooltip variant="info" placement="right" target="#coral-Form-Vertical-Clock-fieldinfo">Required Information</coral-tooltip>
  </div>
  <div class="coral-Form-fieldwrapper">
    <label id="label-vertical-2" class="coral-Form-fieldlabel">Invalid</label>
    <coral-clock class="coral-Form-field" name="name" labelledby="label-vertical-2" invalid></coral-clock>
    <coral-icon class="coral-Form-fielderror" icon="infoCircle" size="S" id="coral-Form-Vertical-Clock-fielderror"></coral-icon>
    <coral-tooltip variant="error" placement="right" target="#coral-Form-Vertical-Clock-fielderror">Error Message</coral-tooltip>
  </div>
  </section>
</form>

Aligned Layout

Label

Required

Invalid

Show Markup

<form class="coral-Form coral-Form--aligned u-columnLarge">
  <section class="coral-Form-fieldset">
  <div class="coral-Form-fieldwrapper">
    <label id="label-aligned-0" class="coral-Form-fieldlabel">Label</label>
    <coral-clock class="coral-Form-field" name="name" labelledby="label-aligned-0"></coral-clock>
  </div>
  <div class="coral-Form-fieldwrapper">
    <label id="label-aligned-1" class="coral-Form-fieldlabel">Required</label>
    <coral-clock class="coral-Form-field" name="name" labelledby="label-aligned-1" required></coral-clock>
    <coral-icon class="coral-Form-fieldinfo" icon="infoCircle" size="S" id="coral-Form-Aligned-Clock-fieldinfo"></coral-icon>
    <coral-tooltip variant="info" placement="right" target="#coral-Form-Aligned-Clock-fieldinfo">Required Information</coral-tooltip>
  </div>
  <div class="coral-Form-fieldwrapper">
    <label id="label-aligned-2" class="coral-Form-fieldlabel">Invalid</label>
    <coral-clock class="coral-Form-field" name="name" labelledby="label-aligned-2" invalid></coral-clock>
    <coral-icon class="coral-Form-fielderror" icon="infoCircle" size="S" id="coral-Form-Aligned-Clock-fielderror"></coral-icon>
    <coral-tooltip variant="error" placement="right" target="#coral-Form-Aligned-Clock-fielderror">Error Message</coral-tooltip>
  </div>
  </section>
</form>

JavaScript Examples

The following examples demonstrate usage of the JavaScript API's for Coral.Clock.

The following JavaScript manually initializes the component on page initialization and adds it to the DOM.

<script>
$(document).ready(function() {
  var clock = new Coral.Clock();
  clock.id = 'myClock';
  clock.value = '18:30';
  document.getElementById('constructorExample').appendChild(clock);
})
</script>
<coral-clock class="coral3-Clock" role="group" id="myClock">
<input type="hidden" name="" handle="input" value="18:30">
<time handle="valueAsText" id="coral-id-1" hidden="">18:30</time>
<input is="coral-textfield" class="coral3-Textfield coral3-Clock-hour" type="number" min="0" max="23" handle="hours" aria-label="Hours">
<span class=" coral3-Clock-divider">:</span>
<input is="coral-textfield" class="coral3-Textfield coral3-Clock-minute" type="number" min="0" max="59" handle="minutes" aria-label="Minutes">
<coral-select class="coral3-Select coral3-Clock-period" placeholder="" __vent-id__="7" handle="period" hidden="" labelledby="coral-id-0">
<button is="coral-button" class="coral3-Button coral3-Button--secondary coral3-Button--block coral3-Select-button" size="M" variant="secondary" handle="button" type="button" block="" role="combobox" aria-expanded="false" aria-haspopup="true" id="coral-id-2" aria-controls="coral-id-3" aria-owns="coral-id-3" tabindex="-1" aria-labelledby="coral-id-0"><coral-button-label></coral-button-label>
<coral-icon class="coral3-Icon coral3-Select-openIcon" icon="chevronDown" size="XS" handle="icon"></coral-icon>
<span handle="label" class=" coral3-Select-label" role="textbox" aria-readonly="true"></span>
</button>
<coral-overlay class="coral3-Overlay coral3-Select-overlay" aria-hidden="true" handle="overlay" trapfocus="on" tabindex="0" focusonshow="on" target="#coral-id-2" role="presentation" offset="-1" alignmy="left top" alignat="left bottom" style="display: none;"><div coral-tabcapture="top" tabindex="0"></div><div coral-tabcapture="intermediate" tabindex="0"></div><div coral-tabcapture="bottom" tabindex="0"></div>
<coral-selectlist class="coral3-SelectList coral3-Select-selectList" role="listbox" id="coral-id-3" handle="list" style="max-height: 252px;"></coral-selectlist>
</coral-overlay>
<input handle="input" type="hidden" name="" value="">
<span class=" u-coral-screenReaderOnly" id="coral-id-0" hidden="">AM/PM</span>
<coral-select-item value="am"></coral-select-item>
<coral-select-item value="pm"></coral-select-item>
</coral-select>
</coral-clock>

Getting the value

The following will display the above component's value in an alert.

<script>
function displayValue() {
  var value = document.querySelector('#myClock').value;
  alert('The value is ' + value + '.');
}
</script>

Setting the value

The following will set the above component's value to 8:30.

<script>
  function setValue() {
    var clock = document.querySelector('#myClock');
    clock.valueAsDate = new Date(0, 0, 0, 8, 30);
  }
</script>

Responding to user interaction

The following example shows how to detect changes performed by the user.

<script>
  $(document).ready(function () {
    var eventLog = $('#clockLog');
    document.querySelector('#myClock').on('change', function(event) {
      var value = event.target.value;
      eventLog.log('Clock new value: ' + value);
    });
  });
</script>

Log

Coral.Clock API

Constructor

JavaScript:: new Coral.Clock() or document.createElement('coral-clock')
HTML Tag:: <coral-clock>

Extends

Static Properties

Coral.Clock.variant {String}

Enum for Clock variant values.

Properties:

Name	Type	Value	Description
DEFAULT	String	default	A default, gray Clock.
QUIET	String	quiet	A Clock with no border or background.

Instance Properties

instance.disabled {Boolean} Reflected

Whether this field is disabled or not.

Inherited From:

Coral.mixin.formField#disabled

Default Value:

false

HTML Attribute:

disabled

instance.displayFormat {String}

The format used to display the selected time to the user. If the user manually types a time, this format will be used to parse the value. See http://momentjs.com/docs/#/displaying/ for valid format string options.

Default Value:

"HH:mm"

HTML Attribute:

displayformat

instance.hidden {Boolean} Reflected

Whether this component is hidden or not.

Inherited From:

Coral.Component#hidden

Default Value:

false

HTML Attribute:

hidden

instance.invalid {Boolean} Reflected

Whether the current value of this field is invalid or not.

Inherited From:

Coral.mixin.formField#invalid

Default Value:

false

HTML Attribute:

invalid

instance.labelledBy {String}

Reference to a space delimited set of ids for the HTML elements that provide a label for the formField. Implementers should override this method to ensure that the appropriate descendant elements are labelled using the aria-labelledby attribute. This will ensure that the component is properly identified for accessibility purposes. It reflects the aria-labelledby attribute to the DOM.

Inherited From:

Coral.mixin.formField#labelledBy

Default Value:

null

HTML Attribute:

labelledby

instance.name {String} Reflected

Name used to submit the data in a form.

Inherited From:

Coral.mixin.formField#name

Default Value:

HTML Attribute:

name

instance.readOnly {Boolean} Reflected

Whether this field is readOnly or not. Indicating that the user cannot modify the value of the control. This is ignored for checkbox, radio or fileupload.

Inherited From:

Coral.mixin.formField#readOnly

Default Value:

false

HTML Attribute:

readonly

instance.required {Boolean} Reflected

Whether this field is required or not.

Inherited From:

Coral.mixin.formField#required

Default Value:

false

HTML Attribute:

required

instance.value {String}

This field's current value.

Inherited From:

Coral.mixin.formField#value

Default Value:

HTML Attribute:

value

instance.valueAsDate {Date}

The current value as a Date. If the value is "" or an invalid date, null will be returned.

Default Value:

null

instance.valueFormat {String}

The format to use on expressing the time as a string on the value attribute. The value will be sent to the server using this format. If an empty string is provided, then the default value per type will be used. See http://momentjs.com/docs/#/displaying/ for valid format string options.

Default Value:

"HH:mm"

HTML Attribute:

valueformat

instance.variant {Coral.Clock.variant}

The clock's variant.

Default Value:

Coral.Clock.variant.DEFAULT

HTML Attribute:

variant

Methods

instance.focus

sets focus to appropriate descendant

instance.get

Get the value of a property.

Parameters:

Name	Type	Description
property	String	The name of the property to fetch the value of.

Returns:

Property value. {*}

Inherited From:

Coral.Component#get

instance.hide

Hide this component.

Returns:: this, chainable {Coral.Component}

Inherited From:

Coral.Component#hide

instance.off

Remove an event listener.

Parameters:

Name	Type	Optional	Description
eventName	String	No	The event name to stop listening for.
selector	String	Yes	The selector that was used for event delegation.
func	function	No	The function that was passed to `on()`.
useCapture	Boolean	Yes	Only remove listeners with `useCapture` set to the value passed in.

Returns:

this, chainable. {Coral.Component}

Inherited From:

Coral.Component#off

instance.on

Add an event listener.

Parameters:

Name	Type	Optional	Description
eventName	String	No	The event name to listen for.
selector	String	Yes	The selector to use for event delegation.
func	function	No	The function that will be called when the event is triggered.
useCapture	Boolean	Yes	Whether or not to listen during the capturing or bubbling phase.

Returns:

this, chainable. {Coral.Component}

Inherited From:

Coral.Component#on

instance.remove

Non-destructively remove this element. It can be re-added by simply appending it to the document again. It will be garbage collected if there are no more references to it.

Inherited From:

Coral.Component#remove

instance.set

Set a single property.

Parameters:

Name	Type	Description
property	String	The name of the property to set.
value	*	The value to set the property to.
silent	Boolean	If true, events should not be triggered as a result of this set.

Returns:

this, chainable. {Coral.Component}

Inherited From:

Coral.Component#set

instance.show

Show this component.

Returns:: this, chainable {Coral.Component}

Inherited From:

Coral.Component#show

instance.trigger

Trigger an event.

Parameters:

Name	Type	Optional	Description
eventName	String	No	The event name to trigger.
props	Object	Yes	Additional properties to make available to handlers as `event.detail`.
bubbles	Boolean	Yes	Set to `false` to prevent the event from bubbling.
cancelable	Boolean	Yes	Set to `false` to prevent the event from being cancelable.

Returns: