Insites Docs Web Components V1Data EntryDate Picker

Date Picker

Last updated on August 02, 2024.

Element: <ins-datepicker>

Defines a date picker field.

Complete Example

Code Snippet

<ins-datepicker
  label="Birthday"
  name="birthday"
  icon="icon-clock"
  placeholder="Select a valid date"
  format="YYYY.MM.DD"
  min-date="2010.01.01"
  max-date="2020.01.01">
</ins-datepicker>
Default State

Code Snippet

<ins-datepicker></ins-datepicker>
Error State

Code Snippet

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

Code Snippet

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

Code Snippet

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

Code Snippet

<ins-datepicker id="directDateEl"></ins-datepicker>
<script>
  var label = "Set Date";
  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

Code Snippet

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

 

Attributes

 

FIELD ATTRIBUTE TYPE DEFAULT OPTIONS DESCRIPTION
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
onDateChange label, selected_dates, value 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.