如何在HTML contenteditable元素中使用datepicker

debugcn 发表于 Dev

拉格勒·拉金德兰

嗨，我在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。如果我使用对datepicker隐藏的类型，则不会显示datepiker日历。

维卡什·潘迪（Vikash Pandey）

$(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/

带有日期选择器和div的JS小提琴： -http : //jsfiddle.net/vikash2402/8w8v9/1990/

希望这对您有帮助:)

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。