Component library

Date and Time component

Last updated 2 November 2026

Defines a date-time picker field. test

Live demo

<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"
  tooltip="This is a sample tooltip content. It also support html content.">
</ins-date-time>

Attributes

Filters

The Date and Time component can be used with a filter (demonstrated in the example below). Please visit the documentation on Filters to learn more.

FIELD ATTRIBUTE	TYPE	DEFAULT	OPTIONS	DESCRIPTION
mode	string	If not defined both date and time picker will be rendered	datepicker, timepicker	Render only datepicker or timepicker
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	""	today,	Defines the field minimum date allowed
max-date	string	""		Defines the field maximum date allowed
value	string	""		Defines the field value
tooltip	string	""	-	Displays a tooltip beside the label. Supports HTML Content
html-description	boolean	false	true, false	Enables HTML tags in the description
description	string	""	any	Defines the description value

Events

EVENT	OBJECT	DESCRIPTION
insInput	label, selected_dates, date_string	Emits field value on change
insValueChange	value	Emits value on change

Examples

Description Example

<ins-date-time 
  label="Description Example" 
  html-description
  description="This is a <strong>Description</strong> <i>Example</i>">
</ins-date-time>

Default State

<ins-date-time></ins-date-time>

Date Picker Mode

<ins-date-time 
  label="Date Picker Mode" 
  mode="datepicker">
</ins-date-time>

Date and Time Picker Mode

<ins-date-time 
  label="Date and Time Picker Mode" 
  mode="Timepicker">
</ins-date-time>

Error State

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

Disabled State

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

Ready-Only State

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

Direct Value Set

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

Events

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