html contenteditable要素でdatepickerを使用する方法

Question

こんにちは私はcontenteditable要素でdatepickerプラグインを使用しています.contentable divでdatepicker値を選択する必要があります。 HTML：

<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); 
    }); 
}); 

DatePickerの値iが日付ピッカーに隠されたタイプを使用div.Ifに割り当てされていないがdatepikerカレンダーが表示されていません。

Answer 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です。これはあなたを助けることを望ん http://jsfiddle.net/vikash2402/8w8v9/1990/

:) - ：日付ピッカーとのdivと http://jsfiddle.net/vikash2402/8w8v9/1989/

JSフィドル - ：

日付ピッカーと

JSフィドル

Answer 2

使用jQueryの$(".date1").text(valuew);

またはDOM

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

Answer 3

あなたのイベントのためのセレクタを使用して -

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

は存在しないクラスを参照する...あなたが使用してはいけません：

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

また、設定しないでください.val（）ではなく.html（）でDIV値を入力しますか？