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">
</ins-date-time>

<ins-date-time></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>