Calendar

<div class="form-group">
  <label class="form-label" for="input-single-calendar">Single Date Picker</label>
  <div class="calendar-wrap">
    <input type="text" id="input-single-calendar" name="input-single-calendar" class="form-field single-calendar" placeholder="mm/dd/yyyy" /> 
  </div>
</div>

const singleCalendar = document.querySelectorAll('.single-calendar');

singleCalendar.forEach((calendarItem) => {
  new AirDatepicker(calendarItem, {
    autoClose: true,
    dateFormat: 'MM/dd/yyyy',
    navTitles: {
      days: 'MMMM yyyy',
    },
    locale: {
      days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
      daysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
      daysMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
      months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
      monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
      dateFormat: 'MM/dd/yyyy',
    }
  });
});

<div class="form-group">
  <label class="form-label" for="input-range-calendar">Range Date Picker</label>
  <div class="calendar-wrap">
    <input type="text" id="input-range-calendar" name="input-range-calendar" class="form-field range-calendar" placeholder="mm/dd/yyyy - mm/dd/yyyy" /> 
  </div>
</div>

const rangeCalendar = document.querySelectorAll('.range-calendar');
  
rangeCalendar.forEach((calendarItem) => {
  new AirDatepicker(calendarItem, {
    range: true,
    buttons: ['clear', 'apply'],
    multipleDatesSeparator: ' - ',
    dateFormat: 'MM/dd/yyyy',
    navTitles: {
      days: 'MMMM yyyy',
    },
    locale: {
      days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
      daysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
      daysMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
      months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
      monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
      apply: 'Apply',
      clear: 'Clear',
      dateFormat: 'MM/dd/yyyy'
    }
  });
});

<div class="form-group">
  <label class="form-label" for="input-single-timeline-calendar">Single Timeline Date Picker</label>
  <div class="calendar-wrap">
    <input type="text" id="input-single-timeline-calendar" name="input-single-timeline-calendar" class="form-field single-timeline-calendar" placeholder="mm/dd/yyyy hh:mm" /> 
  </div>
</div>

const singleTimelineCalendar = document.querySelectorAll('.single-timeline-calendar');
  
singleTimelineCalendar.forEach((calendarItem) => {
  new AirDatepicker(calendarItem, {  
    timepicker: true,
    buttons: ['clear', 'apply'],
    dateFormat: 'MM/dd/yyyy',
    navTitles: {
      days: 'MMMM yyyy',
    },
    locale: {
      days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
      daysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
      daysMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
      months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
      monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
      apply: 'Apply',
      clear: 'Clear',
      dateFormat: 'MM/dd/yyyy',
      timeFormat: 'HH:mm',
      firstDay: 1
    }
  });
});

<div class="form-group">
  <label class="form-label" for="input-range-timeline-calendar">Range Timeline Date Picker</label>
  <div class="calendar-wrap wide-wrap">
    <input type="text" id="input-range-timeline-calendar" name="input-range-timeline-calendar" class="form-field range-timeline-calendar" placeholder="mm/dd/yyyy hh:mm" /> 
  </div>
</div>

const rangeTimelineCalendar = document.querySelector('.range-timeline-calendar');
  
new AirDatepicker(rangeTimelineCalendar, {
  range: true,
  timepicker: true,
  buttons: ['clear', 'apply'],
  multipleDatesSeparator: ' - ',
  dateFormat: 'MM/dd/yyyy',
  classes: 'calendar-wide',
  navTitles: {
    days: 'MMMM yyyy',
  },
  locale: {
    days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
    daysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
    daysMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
    months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
    monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    apply: 'Apply',
    clear: 'Clear',
    dateFormat: 'MM/dd/yyyy'
  }
});