Flatpickr placeholder

by Sova

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<div>
  <input id="input" placeholder="placeholder">
</div>

CSS

.flatpickr-mobile:before  {
  content: attr(placeholder);
  color: gray;
}
.flatpickr-mobile:focus[value]:not([value=""]):before {
  display: none;
}

input[type="hidden"][value]:not([value=""]) + .flatpickr-mobile:before {
  display: none; 
}

JavaScript

console.log(flatpickr)
flatpickr("#input");