flatpickr/master

by kuyabiye

HTML

<link rel="stylesheet" href="https://gitcdn.xyz/repo/picnicss/picnic/master/picnic.min.css">
<script src="https://npmcdn.com/flatpickr/dist/flatpickr.js"></script>
<link rel="stylesheet" href="https://npmcdn.com/flatpickr/dist/flatpickr.css">
<article>
  <input type="text" placeholder="Select Date.." class=date>
</article>

CSS

article {
  padding: 16px;
  width: 50%
}

JavaScript

const fp = flatpickr(".date", {
	mode: "range",
  enableTime: true,
  onChange(dates) {  
  	switch (fp.selectedDates.length) {
    	case 1:
      	fp.selectedDates[0].setHours(0, 0, 0, 0);
        fp.setDate(fp.selectedDates)
        break;
      case 2:
      	fp.selectedDates[1].setHours(23, 59, 0, 0);
        fp.setDate(fp.selectedDates)
        break;       
    }
    console.log(fp.selectedDates)
  }
});