input 값에 따른 자동출력 관련 질문드립니다.
본문
현재 그누보드 기본달력에서 날짜를 클릭하면 input 박스에 해당날짜가 20180205 이런식으로 입력되는데
이게 날짜를 클릭하면 자동으로 입력되서 onkeyup 태그가 먹히지 않네요...
혹시 input 박스가 채워지면 요일을 자동으로 표시해 주는 방법이 없을까요?
아래 코드는 input 박스에 자동으로 value 값을 20180205 로 넣었을 때 요일이 바로 출력되지 않고
input 입력값을 인식시켜줘야 동작하더군요;;;
그냥 input 박스에 애초에 입력된 그대로 값을 인식하여 요일을 출력해 주는 방법이 궁금합니다!!!!ㅜ0ㅠ
<script>
function InputDayLabel(){
var week = new Array('일요일','월요일','화요일','수요일','목요일','금요일','토요일');
var today0 = document.getElementById("today0").value;
var yy = today0.substr(0, 4);
var mm = today0.substr(4, 2);
var dd = today0.substr(6);
var today = yy+"-"+mm+"-"+dd;
var today1 = new Date(today).getDay();
var todayLabel = week[today1];
result.innerHTML = todayLabel;
}
</script>
<p>
<input type="text" name="today0" id="today0" value="20180205" onkeyup="InputDayLabel()">
</p>
<span id="result"></span>
답변 2
<script type="text/javascript">
$(function() {
$("#today0").datepicker({
dateFormat : "yy-mm-dd",
onSelect : function(txt) {
var dt = new Date(txt);
var day = dt.getDay();
var yoil = new Array("일요일", "월요일", "화요일", "수요일", "목요일", "금요일", "토요일");
$("#result").text(yoil[day]);
}
});
});
</script>
<input type="text" name="today0" id="today0">
<span id="result"></span>
답변감사드립니다. 근데 약간 수정해서 계속 적용해도 반응이 없고 기존 스크립트랑 충돌을 하는지 반응이 없네요 ㅠ.ㅜ dateFormat 은 yymmdd 를 유지해야만 하는데 아래 코드로 해봤는데 변화가 없습니다 ㅠ.ㅠ
$("#wr_1").datepicker({
dateFormat: "yymmdd",
defaultDate: "+1w",
numberOfMonths: 1,
changeMonth: true,
showMonthAfterYear: true ,
changeYear: true,
showButtonPanel: true,
onClose: function(selectedDate) {
$("#wr_2").val(selectedDate);
}
onSelect : function(txt) {
var dt = new Date(txt);
var yy = dt.substr(0, 4);
var mm = dt.substr(4, 2);
var dd = dt.substr(6);
var dt2 = yy+"-"+mm+"-"+dd;
var day = dt2.getDay();
var yoil = new Array("일요일", "월요일", "화요일", "수요일", "목요일", "금요일", "토요일");
$("#result").text(yoil[day]);
}
}
<표시될 부분>
<input type="text" name="wr_1" value="<?php echo $write['wr_1']; ?>" readonly id="wr_1" required class="frm_input required" size="8" maxlength="8">
<span id="result"></span>
$(function() {
$("#today0").datepicker({
onSelect : function(txt) {
var dt = txt.substr(0, 4) + "-" + txt.substr(4, 2) + "-" + txt.substr(6, 2);
var edate = new Date(dt);
var day = edate.getDay();
var yoil = new Array("일요일", "월요일", "화요일", "수요일", "목요일", "금요일", "토요일");
$("#result").text(yoil[day]);
}
});
});
정말 감사드립니다! 정말 유용했습니다 ^^
onchange에서 해보시기 바랍니다.
onchang 도 달력날짜 클릭해서 자동으로 입력되는 초기입력에는 변화를 안하네요 ㅠ.ㅜ
datepicker에 onSelect이벤트를 확인해 보시는게 좋을 듯 합니다.