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

时间:2018-08-18 14:08:47

标签: javascript jquery datepicker

如何在键入后使datepicker自动格式化日期。 例如。键入02122018,则输入的日期将在输入或选项卡时显示02 / Dec / 2018。

以下引导日期选择器沙箱将默认为今天的日期,并具有我想要的格式。但不是我输入日期。 https://uxsolutions.github.io/bootstrap-datepicker/?#sandbox

1 个答案:

答案 0 :(得分:1)

您实际上并不需要Bootstrap datepicker。您可以让输入延迟键盘输入,然后查看输入并评估是否准备好转换(也就是足够的数字),然后使用某种方式解释格式并显示转换后的结果。

查看momentjs了解详情。

您的输入

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

延迟功能

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

用法

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 );
    });
});

祝你好运!