본문 바로가기

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

by 뚜벅초 2016. 9. 5.

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바로 다음에 두어야 한다.

'' 카테고리의 다른 글

iText 워터마크 넣기  (0) 2016.11.24
jqGrid 캡션(제목) 선택 시 접기/펼치기  (0) 2016.09.30
jqGrid Cell Edit 벗어나기  (0) 2016.09.01
jqGrid옵션 정리, jqGrid Options 中  (0) 2016.09.01
PDF파일 보여주기->출력  (4) 2016.07.29