javascript - 对于使用 Inputmask 插件屏蔽的 texbox，第一次无法在月份字段中键入 01

Question

我有一个文本框，它附有一个 Datepicker 用于选择日期，同时我必须为从键盘手动输入日期做好准备。我已经使用来自 Github 的插件 inputmask js 实现了该功能。但是，当页面首次加载并且我尝试将月份值输入为 1 月的“01”时，应用于文本框的屏蔽显示“10”。解决方法是我可以输入“11”，然后将第一个数字更改为 0，但我希望避免这种情况。我希望我能让你们理解这个问题在此先感谢，我已经将问题浓缩成一个简单的代码如下。

PS：我不希望占位符文本改变，如下面的答案所述。它应该是“00/00/0000”，但允许用户键入 01。

var maskConfig = {
        leapday: "29-02-",
        separator: "/",
        showMaskOnHover: false,
        showMaskOnFocus: false,
        placeholder: "00/00/0000"
    }

    $('#datepicker1').inputmask('mm/dd/yyyy', maskConfig);
    
    $('#datepicker1').datepicker({
        dateFormat: "mm/dd/yy",
        changeMonth: true,
        changeYear: true,
        
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/jquery.inputmask.bundle.min.js"></script>

<input type="text" id="datepicker1"/>

标签： javascriptjqueryjquery-ui-datepickermaskingjquery-inputmask

Answer 1

更改此行

placeholder: "00/00/0000"

至：

placeholder: "01/00/0000"

var maskConfig = {
        leapday: "29-02-",
        separator: "/",
        showMaskOnHover: true,
        showMaskOnFocus: true,
        placeholder: "01/00/0000"
    }

    $('#datepicker1').inputmask('mm/dd/yyyy', maskConfig);
    
    $('#datepicker1').datepicker({
        dateFormat: "mm/dd/yy",
        changeMonth: false,
        changeYear: false,
        
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/jquery.inputmask.bundle.min.js"></script>

<input type="text" id="datepicker1"/>