bootstrap-datepicker.js и jquery.maskedinput.Джей Си не притворяйся милым

Я должен использовать 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 на их сайте.

Спасибо за помощь.

3 2
javascript jquery datepicker twitter-bootstrap onblur

3 ответа:

Я натыкаюсь на этот вариант:

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

Удивительно, что force parse по умолчанию является true. черт ушко. Проблема устранена.

8

Поздний ответ, но это был единственный, который работал для меня после деконструкции последовательности событий, обрабатываемых обоими плагинами (на эту дату).

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, которая в данном случае является событием keyup, срабатывающим при отпускании клавиши TAB. Эта функция обновления вызывает 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

Это можно легко исправить с помощью изменение функции parseDate в библиотеке datepicker lib, но это большое нет-нет, если вы хотите сохранить свой код в ремонтопригодном состоянии. Мы остаемся тогда с хакерским способом перехватить фальшивое значение и исправить его, прежде чем maskedinput передаст его датепикеру.

Надеюсь, это поможет!

1

Попробуйте использовать другое имя класса для datepicker и смешивания в вашем html

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

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