datepicker가 활성화되면 입력 및 레이블에 클래스를 추가 하시겠습니까?

Question

사용자가 입력을 시작할 때 레이블이 표시되는 스타일 입력 (양식의 체크 아웃 페이지에서 영감을 얻은 정렬)을 사용하여 양식을 만들려고합니다. jQuery UI의 datepicker 위젯을 추가하기 전까지는 모든 것이 완벽하게 작동하는 것 같습니다.

가 여기 내 양식에 입력하기 전에 어떻게 표시되는지를 보여줍니다 :

그리고 이것은 그것이 내가 뭔가를 입력 할 때 모습입니다 :

당신이 볼 수 있듯이, 사용자가 datepicker 위젯에서 생일을 선택한 후 "생일"이라는 레이블이 표시됩니다. 그러나 사용자가 날짜에 키를 입력하지 않으면 아무 것도 나타나지 않습니다 ... 코드와 관련하여 어떤 제안을하면됩니까?

// input 
$('input[type="text"], input[type="password"]').on('keyup blur', function(){ 
    tmpval = $(this).val(); 
    if(tmpval == '') { 
     $(this).removeClass('active') 
     .siblings('label').removeClass('active'); 
    } else { 
     $(this).addClass('active') 
     .siblings('label').addClass('active'); 
    } 
}); 
// date picker 
$('.datepicker').datepicker({ 
    changeMonth: true, 
    changeYear: true, 
    yearRange: "-100:+0" 
}); 

그리고 여기 내 HTML의 일부 :

여기 내 jQuery의

<li> 
    <label class="label" for="first_name">First name</label> 
    <input type="text" id="first_name" placeholder="First name" /> 
</li> 
<li> 
    <label class="label" for="last_name">Last name</label> 
    <input type="text" id="last_name" placeholder="Last name" /> 
</li> 
<li> 
    <label class="label" for="birthday">Birthday</label> 
    <input type="text" id="birthday" class="datepicker" placeholder="Birthday" /> 
</li> 

어떤 도움을 주시면 감사하겠습니다! 감사!

은 (또한 영어가 모국어가 아니기 때문에 내 말 중 하나가 이해가되지 않을 경우 사과.)

Answer 1

를 글쎄, 당신은 비 때문에 (시 사용자가 날짜를 선택 라벨을 노출 코드를 실행해야합니다 . keyup 및 blur 해고되지 않는 이벤트 당신은 onSelect 콜백을 사용하여이 작업을 수행 할 수와 같은

뭔가 :.

// input 
$('input[type="text"], input[type="password"]').on('keyup blur', function() { 
    handleLabel($(this)); 
}); 
// date picker 
$('.datepicker').datepicker({ 
    changeMonth: true, 
    changeYear: true, 
    yearRange: "-100:+0", 
    onSelect: function() { 
    // Keep in mind that maybe the $(this) now reference to something else so you need to serach for the relvent Node 
    handleLabel($(this)); 
    } 
}); 

function handleLabel(elm) { 
    tmpval = elm.val(); 
    if (tmpval == '') { 
    elm.removeClass('active') 
     .siblings('label').removeClass('active'); 
    } else { 
    elm.addClass('active') 
     .siblings('label').addClass('active'); 
    } 
} 

당신이 작업 조각을 만들 경우 (또는 바이올린 또는 무언가) 나는 그것을 고칠 수있는 방법을 보여줄 수 있습니다.

Answer 2

jquery datepicker의 select 이벤트에 클래스를 설정해야합니다. 당신을 도울 필요가 있어요.

// input 
function setclass() 
{ 
    tmpval = $(this).val(); 
    if(tmpval == '') 
    { 
    $(this).removeClass('active') 
    .siblings('label').removeClass('active'); 
    } 
    else 
    { 
    $(this).addClass('active') 
    .siblings('label').addClass('active'); 
    } 
} 
$('input[type="text"], input[type="password"]').on('keyup blur', function() 
{ 
    setclass(); 
}); 

$('.datepicker').datepicker({ 
changeMonth: true, 
changeYear: true, 
yearRange: "-100:+0", 
onSelect: function(dateText) 
    { 
    setclass() 
    } 
});