Question

我必须为我的项目使用bootstrap-datepicker.js，但它对掩码不起作用。

问题1： 如果您在字段中进行选项卡，它将使用今天的日期自动填充日期字段。理想情况下，它根本不会填充它。

问题2： 一旦填充了日期字段，就很难将其删除。

first name: <input type="text">
birthdate:  <input type="text" class="date">
city:       <input type="text">

JS：

$(function() {
    $(".date").mask("99/99/9999");
    $('.date').datepicker({
        format: 'mm/dd/yyyy'
    });
});

这个问题都源于这样一个事实，即在焦点期间使用示例格式字符（“_ _ / _ _ / _ _ _ _”）填充掩码，并且当焦点离开时，datepicker正在尝试解析示例字符面具之前有机会删除它们。 datepicker无法将这些特殊字符解析为日期，因此它选择今天的日期。

我认为如果我能找到一种方法来在bootstrap-datepicker尝试解析它们之前删除示例字符，我的问题就会得到解决。

我会提供一个jsfiddler示例，但我无法弄清楚如何在他们的网站上添加bootstrap-datepicker.js和jquery.maskedinput.js。

感谢您的帮助。

Answer 1

我偶然发现了这个选项：

$('.date').datepicker({
        format: 'mm/dd/yyyy',
        forceParse: false
    });

默认强制解析为true。 darn bootstrap。问题已解决。

Answer 2

迟到的答案，但是在解构两个插件处理的事件序列之后，这是唯一一个对我有用的（截至此日期）。

var $date = $('.date');

$date.datepicker({
    format: 'mm/dd/yyyy'
});
$date.mask("99/99/9999");
$date.on('keyup', function(){
    if ($date.val() == '__/__/____'){
        // this only happens when a key is released and no valid value is in the field. Eg. when tabbing into the field, we'll make sure the datepicker plugin does not get '__/__/____' as a date value
        $date.val('');
    }
});

长解释

原来，datepicker插件调用keyup上的更新函数，在这种情况下是释放TAB键时触发的keyup事件。此更新函数调用DPGlobal.parseDate（）函数，其大致行为如下：

DPGlobal.parseDate(''); // returns new Date(); aka. now
DPGlobal.parseDate('10/10/1983'); // returns a Date instance that points to 10/10/1983
DPGlobal.parseDate('__/__/____'); // is generated by the maskedinput plugin and is interpreted as an ilegal date, so the datepicker goes back to the origin of unix time, 1970

通过更改datepicker lib上的parseDate函数可以很容易地解决这个问题，但如果你想保持代码的可维护性，这是一个很大的问题。然后我们以一种黑客的方式拦截犯规值并在掩盖输入交给日期选择器之前纠正它。

希望它有所帮助！

Answer 3

尝试将其他类名称用于datepicker并混合使用html

      $(function() {
        $(".date").mask("99/99/9999");
        $('.date2').datepicker({
             format: 'mm/dd/yyyy'
         });
      });

      birthdate:  <input type="text" class="date date2">

bootstrap-datepicker.js和jquery.maskedinput.js不好玩

3 个答案: