필드를 변경할 때 검색 루틴을 호출하는 JS 코드가 있습니다. 문제는 Datepicker가 입력 필드를 업데이트 할 때 발생하는 jQuery 이벤트를 찾을 수 없다는 것입니다.
어떤 이유로 Datepicker가 필드를 업데이트 할 때 변경 이벤트가 호출되지 않습니다. 캘린더가 팝업되면 포커스를 변경하여 사용할 수 없습니다. 어떤 아이디어?
답변
datepicker ‘s onSelectevent를 사용할 수 있습니다 .
$(".date").datepicker({
onSelect: function(dateText) {
console.log("Selected date: " + dateText + "; input's current value: " + this.value);
}
});라이브 예 :
불행히도 onSelect날짜가 변경되지 않은 경우에도 날짜가 선택 될 때마다 발생합니다. 이것은 날짜 선택기의 디자인 결함입니다. onSelect변경 사항이 없더라도 항상 발생 하며 변경시 기본 입력에서 이벤트를 발생 시키지 않습니다 . (이 예제의 코드를 보면 변경 사항을 수신하고 있지만 변경되지는 않습니다.) 상황이 변경 될 때 입력에서 이벤트를 발생시켜야합니다 (일반적인 change이벤트 또는 아마도 날짜 선택기- 하나).
물론 원하는 경우 불에 change이벤트를 만들 수 있습니다 input.
$(".date").datepicker({
onSelect: function() {
$(this).change();
}
});그 의지 화재 change기본에 input어떤 핸들러는 jQuery를 통해 연결시켜 줬습니다. 그러나 다시, 그것은 항상 그것을 발사합니다. 실제 변경에서만 실행하려면 이전 값을 저장 data하고 비교해야합니다.
라이브 예 :
답변
TJ Crowder의 답변 ( https://stackoverflow.com/a/6471992/481154 )은 매우 훌륭하고 여전히 정확합니다. onSelect 함수 내에서 변경 이벤트를 트리거하는 것은 최대한 가깝습니다.
그러나 datepicker 객체 ( lastVal) 에는 값을 직접 저장하지 않고도 실제 변경에서만 변경 이벤트 를 조건부로 트리거 할 수 있는 멋진 속성 이 있습니다 .
$('#dateInput').datepicker({
onSelect: function(d,i){
if(d !== i.lastVal){
$(this).change();
}
}
});그런 다음 일반과 같이 변경 이벤트를 처리하십시오.
$('#dateInput').change(function(){
//Change code!
});답변
datepicker 객체에서 onSelect 이벤트를 찾고 있습니다 .
$('.selector').datepicker({
onSelect: function(dateText, inst) { ... }
});답변
날짜가 변경된 경우에만 이벤트를 트리거하는 솔루션이 필요했기 때문에 이것을 썼습니다.
간단한 해결책입니다. 대화 상자가 닫힐 때마다 데이터가 변경되었는지 테스트합니다. 그렇다면 맞춤 이벤트를 트리거하고 저장된 값을 재설정합니다.
$('.datetime').datepicker({
onClose: function(dateText,datePickerInstance) {
var oldValue = $(this).data('oldValue') || "";
if (dateText !== oldValue) {
$(this).data('oldValue',dateText);
$(this).trigger('dateupdated');
}
}
});이제 해당 사용자 정의 이벤트에 대한 핸들러를 연결할 수 있습니다.
$('body').on('dateupdated','.datetime', function(e) {
// do something
});답변
$('#inputfield').change(function() {
dosomething();
});답변
나는 bootstrap-datepicker를 사용하고 있으며 위의 해결책 중 어느 것도 나를 위해 일하지 않았다. 이 답변이 도움이되었습니다 ..
부트 스트랩 날짜 선택기 날짜 변경 이벤트가 수동으로 날짜를 편집하거나 날짜를 지울 때 발생하지 않습니다.
내가 적용한 내용은 다음과 같습니다.
$('.date-picker').datepicker({
endDate: new Date(),
autoclose: true,
}).on('changeDate', function(ev){
//my work here
});이것이 다른 사람들을 도울 수 있기를 바랍니다.
답변
jQueryUi 1.9에서는 추가 데이터 값과 beforeShow 및 onSelect 함수의 조합을 통해 작동하도록했습니다.
$( ".datepicker" ).datepicker({
beforeShow: function( el ){
// set the current value before showing the widget
$(this).data('previous', $(el).val() );
},
onSelect: function( newText ){
// compare the new value to the previous one
if( $(this).data('previous') != newText ){
// do whatever has to be done, e.g. log it to console
console.log( 'changed to: ' + newText );
}
}
});나를 위해 작동 🙂
