2013-10-10 3 views
2

Мне нужно использовать bootstrap-datepicker.js для моего проекта, но он плохо работает с маской.bootstrap-datepicker.js и jquery.maskedinput.js не играют хорошо

Задача 1: Это вы, набирая поля, автоматически заполняете поле даты сегодняшней датой. В идеале он не будет заполнять его вообще.

Задача 2: Сложно удалить поле даты после его заполнения.

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

ЯШ:

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

Проблема в том, все исходит из того, что маска Наполнение поле с символами пример формата ("_ _/_ _/_ _ _ _") во время фокусировки и когда фокус покинет datepicker, он пытается проанализировать символы примера, перед тем как удалить маску, есть возможность их удалить. datepicker не может разобрать эти специальные символы в дату, поэтому он выбирает сегодняшнюю дату.

Я думаю, что если я смогу найти способ удалить примерные символы, прежде чем bootstrap-datepicker попытается проанализировать их, моя проблема будет исправлена.

Я бы предоставил пример jsfiddler, но я не могу понять, как добавить bootstrap-datepicker.js и jquery.maskedinput.js на свой сайт.

Благодарим за помощь. Использование

ответ

8

I спотыкается через эту опцию:

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

Удивительно, что сила разбора истинно по умолчанию. черт бутстреп. Проблема исправлена.

-1

Try другое имя класса для DatePicker и смешивать в вашем HTML

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

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

Просто попробовал это. Все еще проблема. – RayLoveless

+0

Просмотрите этот http://forum.jquery.com/topic/datepicker-input-mask, возможно, может помочь или написать ваш html-код на сообщение – vljc2004

+0

Спасибо за ваши ответы.Это выглядит как jquery datepicker, а не bootstrap. – RayLoveless

1

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

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

Long Объяснение

Оказывается, что 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 передаст его игроку datepicker.

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

Смежные вопросы