웹

div contenteditable=true에 데이트피커 넣기

뚜벅초 2016. 9. 5. 21:01

div에 $("div").datepicker()를 하게 되면, div안에 datepicker가 생성된다.

<input type="text">나 <input type="date">를 사용하지 않고 div로 datepicker를 쓰려면 다음과 같이 쓰면 사용 할 수 있다...


예시이미지



.jsp

1
2
<div id="stdt" title="시작일" class="inputDate" onclick="fnDivToInputDatepicker(this)" contenteditable="true" style="float:left;width:40%"></div>
<input type="text" class="onlyWritePage" style="width:100%;float:left;Height:0.1%;max-Height:0.1%;display: none;"/> 
cs



.javascript

1
2
3
4
5
6
7
8
9
function fnDivToInputDatepicker(e){
    var data = $(e);
    var datepi = data["0"].nextElementSibling;
    $(datepi).datepicker();
    $(datepi).datepicker('option',{
        onClose: function(dateText, inst){$(data).html(dateText);}
    });
    $(datepi).datepicker("show");
}
cs


*nextElementSibling은 input을 가르키게 된다. 그러므로 input의 위치는 div바로 다음에 두어야 한다.

저작자표시 비영리 변경금지 (새창열림)