2016-09-30 3 views
1

안녕하세요. contenteditable 요소에 datepicker 플러그인을 사용하고 있습니다. 콘텐츠 편집기 div에서 datepicker 값을 선택하십시오. HTML :html contentditable 요소에서 datepicker를 사용하는 방법

<div class="sample"> 
    <input name="date" class="datepicker-input" /> 
    <div class="date1" contentEditable="true">test</div> 
</div> 

스크립트 :

$('.date').click(function() { 
    $(this).parent().find('.datepicker-input').focus(); 
    $(".datepicker-input").blur(function(){ 
    var valuew = $('.datepicker-input').val() ; 
    console.log(valuew); 
    $(".date1").val(valuew); 
    }); 
}); 

날짜 선택기 값이 난 날짜 선택기에 숨겨진 유형을 사용하는 div.If에 할당되지는 datepiker 달력이 표시되지 않습니다.

답변

1

$(function(){ 
 
    
 
    $('#thedate').datepicker({ 
 
     dateFormat: 'dd-mm-yy', 
 
     onSelect: function(dateText) { 
 
    \t \t $('#dateContainer').text(dateText); 
 
     console.log(dateText); 
 
     } 
 
     
 
    }); 
 
    
 
});
<link href="http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script> 
 
Shown Date : <div id="dateContainer" type="button" > currentData </div> 
 
<input id="thedate" type="text" /><br /> 
 
<input id="thesubmit" type="button" value="Submit" />

음, 다음은 편집 가능한 텍스트 상자와 jquery date picker입니다. 날짜 선택에

JS 바이올린 : - http://jsfiddle.net/vikash2402/8w8v9/1989/

JS 바이올린 날짜 선택 및 사업부와 - http://jsfiddle.net/vikash2402/8w8v9/1990/

이 당신을 도울 것입니다 희망 :)

+1

감사합니다 :) –

+0

당신은 : 환영합니다 –

+0

한 번 더 설명하면 내가 테이블 만 입력 내부에서 사용하는 경우 내부 날짜 선택기를 사용하는 테이블 내부의 입력 필드를 사용하는 방법 도와주세요 알고있는 경우 필드가 테이블 안으로 들어오지 않았습니다. –

1

사용 jQuery를 $(".date1").text(valuew); DOM

document.getElementsByClassName("date1").textContent=valuew; 
0

이벤트에 대한 선택 사용

또는 -

$('.date').click(function() { 

참조 존재하지 않는 클래스를 ... 사용 하여서는 아니된다 :

$('.date1').click(function() { 

.val()이 아닌 .html()을 사용하여 DIV 값을 지정 하시겠습니까? 주석에 대한