是否可以使用contentEditable与jQuery DatePicker? [英] Is it possible to use contentEditable with jQuery DatePicker?
问题描述
我正在寻找一种使用contentEditable与jQuery DatePicker的方法。我可以在可编辑的表上使用它吗?
这是我试图使用上面链接给出的示例。 / 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屋!