Date and Time

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

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

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

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

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

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

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

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

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