Insites Docs Web Components V1Data EntryDate and Time

Date and Time

Last updated on August 02, 2024.

Element: <ins-date-time>

Date and Time Picker

Complete Example

Code Snippet

<ins-date-time
  label="Meeting Schedule"
  name="meeting-schedule"
  no-meridiem
  placeholder="Select a valid date and time"
  format="YYYY.MM.DD"
  min-date="2010.01.01"
  max-date="2020.01.01">
</ins-date-time>
Default State

Code Snippet

<ins-date-time></ins-date-time>
Error State

Code Snippet

<ins-date-time label="Date" has-error error-message="This is a required field"></ins-date-time>
Disabled State

Code Snippet

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

Code Snippet

<ins-date-time label="Read-only Field" readonly></ins-date-time>
Direct Value Set

Code Snippet

<ins-date-time id="directSetImage"></ins-date-time>
<script>
  var label = "Set Date Time";
  var minDate = "01-01-2001";
  var dateFormat = "MM-DD-YYYY";
  var today = new Date();
  var now = today.getMonth() + 1 + '-' + today.getDate() + '-' + today.getFullYear();
  var dateField = document.getElementById('directDateEl');
  dateField.addEventListener('didLoad', function (e){
    dateField.label = label;
    dateField.minDate = minDate;
    dateField.format = dateFormat;
    dateField.value = now;
  });
</script>
Event State

Code Snippet

<ins-date-time label="Set Date Time" placeholder="Select date time" id="eventDateEl"></ins-date-time>
<script>
  var field = document.getElementById('eventDateEl');
      field.addEventListener('onpick', event => {
        var event = event.detail;
        console.log("DateTime event", event);
        alert("Check console log for event data");
      });
</script>

 

Attributes

 

FIELD ATTRIBUTE TYPE DEFAULT OPTIONS DESCRIPTION
no-meridiem boolean false true, false Make 24hrs time format
icon string "" icon-close-1, icon-utilities, icon-lock-1 ... Defines icon of input field
disabled boolean false true, false Disables the field
readonly boolean false true, false Make the field readonly
has-error boolean false true, false Defines if the field is invalid / error
error-message string "" any Message shown when field has error
label string "" any Label shown above the field
name string "" any Defines the field name
placeholder string "h:i A" any Defines the field placeholder
format string "" YYYY-MM-DD, DD.MM.YYYY, MM/DD/YYYY, ... Date format to be used by the datepicker
min-date string "" Defines the field minimum date allowed
max-date string "" Defines the field maximum date allowed
value string "" Defines the field value

 

Events

 

EVENT OBJECT DESCRIPTION
onpick label, selected_dates, date_string Emits field value on 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.