如何使用引导日期选择器自动格式化日期

Question

how to make the datepicker auto format date after typing. eg. type 02122018, date input will show 02/Dec/2018 upon enter or tab.

The following bootstrap datepicker sandbox will default to today's date with the format i wanted. But not the date i keyed. https://uxsolutions.github.io/bootstrap-datepicker/?#sandbox

Answer 1

You don't really need Bootstrap datepicker for this. You could have your input allow a delay on keyup, then look at the input and assess whether or not it is ready to be converted (aka, enough digits) and then use a certain means to interpret the format and display the converted result.

Look into momentjs for details.

Your input

<input id="dateInput" type="text">

Delay function

var delay = (function(){
    var timer = 0;
    return function(callback, ms){
        clearTimeout (timer);
        timer = setTimeout(callback, ms);
    };
})();

Usage thereof

jQuery(document).ready(function($) {
    $('#dateInput').keyup(function() {
        const dateString = $(this).val();
        delay(function(){
            // Use momentjs to format, for example:
            moment(dateString, "DDMMYYYY").format("MMM Do YY");
        }, 1000 );
    });
});

Good luck!