2014-12-16 37 views
11

domyślnym zmiana wejściowego mam datepickerJquery zmiana datepicker spust wydarzenie i wydarzenie

<input type='text' class='inp'> 
<script> 
    $('.inp').datepicker(); 

    $(".inp").on("change",function(){ 
    console.log('inp changed'); 
    }); 
</script> 

Kiedy pierwsza zmiana „.inp” ręcznie wpisać tam wartość, a następnie natychmiast klikam na datepicker jest otwarty kalendarz. Dostaję dwa detektory zdarzeń "zmiany". Najpierw od ręcznej zmiany, a następnie od zmiany danych. Jak mogę tego uniknąć?

+0

Unrelated: Twój tag zamykający jest źle, to powinien być ''. –

Odpowiedz

11

Ustaw wejście readOnly, to pomoże Ci zmienić wartość pola przez tylko ikona.

<input type='text' class='inp' readOnly /> 

następnie użyć onSelect uzyskać wybraną datę, jak następuje:

$(function() { 
    $(".inp").datepicker({ 
     onSelect: function(dateText, inst) { 
      // alert(dateText); 
     } 
    }); 
}); 
+0

ustawienie atrybutu "readOnly" może wyłączyć sprawdzanie poprawności (jeśli jest) dla tego pola. Moim zdaniem najlepszym rozwiązaniem jest ustawienie attr 'onkeydown =" false "' –

6

Spróbuj użyć funkcji onSelect jak:

$(function() { 
    $(".datepicker").datepicker({ 
     onSelect: function() { 
     //your code here 
    }}); 

ten zostanie zwolniony, kiedy wybrać datę z kalendarza nie kiedy pisania.

0

Jeśli używasz bootstrap datepicker można wykonać następujące czynności:

$('.datepicker').datepicker() 
    .on('changeDate', function(e){ 
     # `e` here contains the extra attributes 
}); 

Aby uzyskać więcej informacji zobacz: Bootstrap Datepicker events

0

Dzięki! Wszyscy, ale nie mogłem zrobić pola tylko do odczytu, to jest wymaganie. Musiałem więc samemu przeprowadzić reasearch. Więc zamieszczam moje ostateczne rozwiązanie. Usunąłem wiązanie przez 150 ms, a następnie ponownie związałem. I made a jquery plugin for this

function myfunc(that){ 
     $(that).one('change', function(){ 
       var that = this; 
       setTimeout(function(){myfunc(that);}, 150); 
       //some logic 
      } 
     ) 
} 

myfunc(".inp"); 
-1

jeśli używasz wyboru daty jQuery nie ma potrzeby ognia zdarzenia kalendarza. można wywołać zdarzenie w polu tekstowym "zsynchronizowane"

+0

jeśli używasz textbox w kalendarzu, to powinieneś używać powyższego podejścia. –

2

Możesz mieć onSelect wywołać zdarzenie zmiany w polu tekstowym. W ten sposób edycja daty w polu tekstowym lub w selektorze daty zachowuje się tak samo.

$('.inp').datepicker({ 
    onSelect: function() { 
    return $(this).trigger('change'); 
    } 
); 

$(".inp").on("change",function(){ 
    console.log('inp changed'); 
} 
0

Dziękuję wszystkim, to co kiedyś choć

function myfunction(x,x2){ 
    var date1 = new Date(x); 
    var MyDateString; 
    MyDateString = date1.getFullYear()+ '/' + ('0' + (date1.getMonth()+1)).slice(-2) + '/' + ('0' + date1.getDate()).slice(-2); 
    x2.value= MyDateString;  
} 

X, stanowiącego wartość datepicker i x2 będących przedmiotem datepicker