Insites Docs Web Components V1Data EntryTime Picker

Time Picker

Last updated on August 02, 2024.

Element: <ins-timepicker>

Defines a timepicker dropdown field. Time selection has a fix `30mins` interval.

Complete Example

Code Snippet

<!-- 24hrs time format -->
<ins-timepicker
  icon="icon-clock"
  label="Sample"
  name="sample"
  format="H:i"
  placeholder="23:30">
</ins-timepicker>
Default State

Code Snippet

<ins-timepicker></ins-timepicker>
Error State

Code Snippet

<ins-timepicker label="Time" has-error error-message="This is a required field"></ins-timepicker>
Disabled State

Code Snippet

<ins-timepicker label="Disabled Field" disabled></ins-timepicker>
Read-Only State

Code Snippet

<ins-timepicker label="Read-only Field" readonly></ins-timepicker>
Default Value Set

Code Snippet

<ins-timepicker id="directSetValue"></ins-timepicker>
<script>
  var directSetValue = document.getElementById('directSetValue');
  directSetValue.addEventListener('didLoad', function(e){
    directSetValue.icon = "icon-clock";
    directSetValue.label = "Direct Set Time";
    directSetValue.placeholder = "Select time";
    directSetValue.value = "12:30 AM";
  });
</script>
Events

Code Snippet

<ins-timepicker id="eventField"></ins-timepicker>
<script>
  var field = document.getElementById('eventField');
      field.addEventListener('valueChange', event => {
        console.log("Time field event", event.detail);
        alert("check console logs for event data");
      });
</script>

 

Time Format

 
h 12 hour without leading 0. hh 12 hour with leading 0.
H 24 hour without leading 0. HH 24 hour with leading 0.
m minutes without leading 0. mm minutes with leading 0.
s seconds without leading 0. ss seconds with leading 0.
p AM or PM

 

Attributes

 

FIELD ATTRIBUTE TYPE DEFAULT OPTIONS DESCRIPTION
label string "" any Defines the field label
name string "" any Defines the field name
format string "h:i A" Defines time format to use
placeholder string "h:i A" any Defines the field placeholder
required boolean false true, false Specifies that the input field must be filled out before submitting the form
disabled boolean false true, false Disables input field
readonly boolean false true, false Specifies that the input field is read-only
error-message string "" any Defines the error message when input element is wrong
has-error boolean false true, false Specifies validation or mandatory input for the input field
value any "" any Defines the field image value

 

Events

 

EVENT OBJECT DESCRIPTION
valueChange value, hasError, errorMessage Emits field value & error details on value change

 

Have a suggestion for this page?

Didn't quite find what you are looking for or have feedback on how we can make the content better then we would love to hear from you. Please provide us feedback and we will get back to you shortly.