我正在实现内联编辑功能。
所以最初会显示一个日期标签(比如05/01/1999),点击它后,它会被一个具有相同值的输入框所取代(05/01/1999)...现在用户可以使用jQuery UI日期选择器选择任何日期,并选择任何日期(例如05/01/2005),我将再次显示标签(05/01/2005)
目前我正在使用以下代码;
$(document).on("click",".editableDateTxt", function () {
var currElmModelAttr = $(this).attr('data-model-attr');
var input = $('<input />', {'type': 'text','name':currElmModelAttr, 'style':'width:100px','class':'datePicker', 'value': $(this).html()});
var parent = $(this).parent();
parent.append(input);
$(this).remove();
input.datepicker().focus();
});
实施相同的最佳方式是什么?
现在这里是关键点......我正在使用 jQuery UI datepicker ...它在内部使用jQuery data()...所以我不想在跳过时松开它div>输入,反之亦然......
请您修改上面的代码,以考虑jQuery数据()信息保持不变。
*********下面更新的代码;
var MyView = BaseModalView.extend({
el: "#myModalContainer",
initialize: function() {
var self = this;
},
render: function() {
var self = this,
$el = $(self.el);
$el.find(".datePicker").datepicker();
self.initEventListeners();
},
initEventListeners: function() {
var self = this,
$el = $(self.el);
var $this;
$(document).on("click", ".editableDateTxt", function () {
var currElmModelId = $(this).attr('data-model-id');
var currElmModelAttr = $(this).attr('data-model-attr');
$this = $(this);
var input = $('<input />', {
'type': 'text',
'name': currElmModelAttr,
'data-model-id': currElmModelId,
'data-model-attr': currElmModelAttr,
'style': 'width:100px',
'class': 'datePicker',
'value': $(this).text()
});
$(this).replaceWith(input);
input.datepicker({
onSelect: function (date) {
$this.text(date);
input.replaceWith($this);
// input.blur();
}
}).focus();
$(document).on("blur change", "input", function () {
setTimeout(function () {
var value = input.val();
$this.text(value);
input.replaceWith($this);
}, 100);
});
});
}
答案 0 :(得分:3)
您可以使用 replaceWith()
$(document).on("click", ".editableDateTxt", function () {
var currElmModelAttr = $(this).attr('data-model-attr');
var $this = $(this);
var input = $('<input />', {
'type': 'text',
'name': currElmModelAttr,
'style': 'width:100px',
'class': 'datePicker',
'value': $(this).text()
});
$(this).replaceWith(input);
input.datepicker({
onSelect: function (date) {
$this.text(date);
input.replaceWith($this);
console.log(date);
}
})
});
另外,我建议你隐藏/显示元素,在这种情况下会更好,而不是每次都创建和交换元素。
答案 1 :(得分:0)
这是一个更简单的版本,正如@Shaunak D所建议的那样,使用基本的hide()
和show()
。
^ _ ^ jsfiddle sample
Html代码:
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<div id="lbl"></div>
<input type='text' id="date-picker" />
Js代码:
$('#lbl').html('2014-01-01');
$('#date-picker').hide();
$('#date-picker').datepicker({
onSelect: function(date) {
$('#lbl').html(date);
$(this).hide();
$('#lbl').show();
}
});
$('#lbl').click(function(){
//alert();
$(this).hide();
$('#date-picker').show();
});
答案 2 :(得分:0)
执行此操作的最佳方法是使用带有日期选择器的只读输入字段。有没有理由使用div并替换输入字段?