如何在html contenteditable元素中使用datepicker

Question

嗨我在contenteditable元素中使用datepicker插件。要在contenteditable 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值没有分配给div。如果我使用类型hidden to datepicker是datepiker日历没有显示。

Answer 1

$(function(){
    
    $('#thedate').datepicker({
        dateFormat: 'dd-mm-yy',
         onSelect: function(dateText) {
   		$('#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小提琴日期选择器和div： - http://jsfiddle.net/vikash2402/8w8v9/1990/

希望这会帮助你:)

Answer 2

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

或使用DOM

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

Answer 3

您活动的选择器 -

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

引用一个不存在的类......你不应该使用：

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

你也不应该用.html（）而不是.val（）来设置你的DIV值吗？