是否可以使用contentEditable与jQuery DatePicker？ [英] Is it possible to use contentEditable with jQuery DatePicker?

问题描述

我正在寻找一种使用contentEditable与jQuery DatePicker的方法。我可以在可编辑的表上使用它吗？

我在这里找到一个答案： http://www.sencha.com/forum/showthread.php?229598-Looking-to- enable-contenteditable-true-for-custom-input-type

这是我试图使用上面链接给出的示例。 / p>

HTML代码：

 < td> 
< div class ='date'contenteditable ='false'> 2014-04-05< / span> 
< input type ='hidden'class ='datepicker'/> 
< / td> 
  

Javascript代码：

  $（。datepicker）。datepicker（{
 dateFormat：'yyyy-mm-dd'，
 showOn：button，
 buttonImage：images / （）[
 buttonImageOnly：true，
 onClose：function（dateText，inst）{
 $（this）.parent（）。find（[contenteditable = true]） focus（）。html（dateText）.blur（）; 
} 
}）; 
  

但是这种方法对我来说不起作用。

附加信息：我使用引导和jquery-tablesorter。

解决方案

我为自己做了以下步骤：

为datepicker使用隐藏的输入，与contenteditable div一起工作：

 < div class =holder> 
< input name =dateclass =datepicker-inputtype =hidden/> 
< div class =datecontentEditable =true>< / div> 
< / div> 
  

使用以下jQuery：

  //绑定用作日期戳的隐藏输入。 
 $（'。datepicker-input'）。datepicker（{
 dateFormat：'dd-mm-yy'，
 onClose：function（dateText，inst）{
 //当选择日期时，复制内容可编辑div中的值
 //如果您不需要对内容可编辑div的模糊或焦点事件执行任何操作，则不需要触发它们如下所示：
 $（this）.parent（）。find（'。date'）。focus（）。html（dateText）.blur（）; 
} 
}）; 
 //点击内容可编辑div 
 $（'。date'）时显示日期戳。click（function（）{
 //触发隐藏输入的焦点事件， datepicker将会出现
 $（this）.parent（）。find（'。datepicker-input'）。focus（）; 
}）; 
  

I'm looking for a way to use contentEditable with jQuery DatePicker. How can I use it on editable tables??

I found one answer here : http://www.sencha.com/forum/showthread.php?229598-Looking-to-enable-contenteditable-true-for-custom-input-type

And this is what I tried to do using the example given on the link above.

HTML code:

<td>
    <div class='date' contenteditable='false'>2014-04-05</span>
    <input type='hidden' class='datepicker' />
</td>

Javascript code:

$(".datepicker").datepicker({
    dateFormat: 'yyyy-mm-dd',
    showOn: "button",
    buttonImage: "images/calendar.gif",
    buttonImageOnly: true,
    onClose: function(dateText, inst) {
        $(this).parent().find("[contenteditable=true]").focus().html(dateText).blur();
    }
});

But this method doesn't work for me.

Additional Info: I'm using bootstrap and jquery-tablesorter.

解决方案

I made it for myself with the following steps:

Used a hidden input for the datepicker, to work along with the contenteditable div:

<div class="holder">
    <input name="date" class="datepicker-input" type="hidden" />
    <div class="date" contentEditable="true"></div>
</div>

With the following jQuery:

// Binds the hidden input to be used as datepicker.
$('.datepicker-input').datepicker({
    dateFormat: 'dd-mm-yy',
    onClose: function(dateText, inst) {
        // When the date is selected, copy the value in the content editable div.
        // If you don't need to do anything on the blur or focus event of the content editable div, you don't need to trigger them as I do in the line below.
        $(this).parent().find('.date').focus().html(dateText).blur();
    }
});
// Shows the datepicker when clicking on the content editable div
$('.date').click(function() {
    // Triggering the focus event of the hidden input, the datepicker will come up.
    $(this).parent().find('.datepicker-input').focus();
});

这篇关于是否可以使用contentEditable与jQuery DatePicker？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！