如何在 html contenteditable 元素中使用日期选择器

Question

您好，我在 contenteditable element.Have 中使用日期选择器插件 select contenteditable div 中的日期选择器值。 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);
  });
});

日期选择器值未分配给 div.If 我使用隐藏到日期选择器的类型是 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 Fiddle 带日期选择器：- http://jsfiddle.net/vikash2402/8w8v9/1989/

JS Fiddle 带日期选择器和 div:- http://jsfiddle.net/vikash2402/8w8v9/1990/

希望对您有所帮助:)

Answer 2

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

或使用 DOM

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

Answer 3

您的活动选择器 -

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

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

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

另外，您不应该使用 .html() 而不是 .val() 来设置 DIV 值吗？

如何在 html contenteditable 元素中使用日期选择器

How to use the datepicker in html contenteditable element

html

jquery

datepicker

contenteditable