Is there a built-in way for Flatpickr to automatically add a delimiter when a user is manually typing a date in to the input field?
You can do it using jQuery masking function for this.
Example:
$(document).ready(function() {
const flatpickr_time = $('#flatpickr_time').flatpickr({
allowInput: true,
dateFormat: 'd/m/Y'
});
$('#flatpickr_time').mask("99/99/9999");
$('#flatpickr_time').change(function() {
if ($(this).val().substring(0, 2) > 12 || $(this).val().substring(0, 2) == "00") {
console.log("Wrong month format");
return false;
}
if ($(this).val().substring(3, 5) > 31 || $(this).val().substring(0, 2) == "00") {
console.log("Wrong date format");
return false;
}
});
});<link href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.11/flatpickr.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.11/flatpickr.min.js"></script>
<input id="flatpickr_time" style="width:200px;">