Flatpickr: Auto-Add Delimiter when Typing Date

Question

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?

Answer 1

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;">