jquery ui datepicker - altfield作为div而不是输入答案

【问题标题】：jquery ui datepicker - altfield as a div rather than inputjquery ui datepicker - altfield作为div而不是输入
【发布时间】：2010-11-26 04:36:42
【问题描述】：

我在 jquery ui datepicker 上使用 altfield 和 altformat 选项向用户显示友好的日期，同时在隐藏字段中为数据库格式化日期。唯一的事情是，我不希望在输入框中向用户显示日期（视觉上它表明他们可以输入），我只是希望它显示为文本。我知道我可以设置一个输入框的样式，使它看起来不像是一个，但我宁愿只使用一个 div 并更新文本。但是，它似乎只适用于输入字段，如果将其设置为 div id，则它什么也不做。

有人解决过这个问题吗？

【问题讨论】：

我想建议，您只需禁用该字段，但在 jquery ui datepicker 站点上停止脚本工作。也许您可以使用禁用字段并仍然捕获点击事件，打开日期选择器并更新其值？破解它的代码并添加使用禁用输入的能力：P
感谢您的评论。我可以让它与禁用的输入字段一起工作，但从可用性的角度来看 - 我根本不希望它成为一个输入字段，因为我不希望它发出用户可以的信号 输入一些东西，即使他们不能！
老兄，如果你的 css 正确，那么普通计算机用户甚至不会理解它的输入字段。我用我的 gf 来做哑巴测试，即使她的电脑技能还不错。所有这些测试都告诉我，如果某些东西看起来不像通常那样，那么它可能不是它。这意味着如果您的输入看起来不像输入，并且如果您在编辑它时无法更改其内容，那么它可能不是输入。用户只是接受他不能在那里做任何事情的事实。给禁用的输入与内容区域相同的 bg，替换边框或完全删除边框。你去吧。

标签： jquery-ui datepicker

【解决方案1】：

我已经在 onSelect 中使用它来显示在一个 div 中：

onSelect: function(dateText, inst) {
//formatDate Requires a new date object to work
      var myDate = new Date(dateText);

//Set a new var with different format to use
      var newFormat = $.datepicker.formatDate("DD, d MM, yy", myDate);
//Choose the div you want to replace
      $("#yourselctorhere").html(newFormat);
    }
  });

【讨论】：

【解决方案2】：

答案是输入 type=hidden 然后选择值并将其分配给 div 的文本

$("myPicker").datepicker({
altField: "#altInput",

.

var hiddenDate = $("[name='altInput']").attr('value');
$("#myDate").text(hiddenDate);}
});

.

<input id = "altInput" type = "hidden"/>
<div id = "myDate"></div>

【讨论】：

【解决方案3】：

使用 Css :P

.div,.div:focus{
    display:block;
    background:#fff;
    border:0px;
    color:#333
}
<input type="text" class="div" readonly id="altInput" />

【讨论】：

【解决方案4】：

我发现最好的方法是在 jquery.ui.datepicker-cc.js 文件中更改它

首先搜索 _updateAlternative 函数并更改此行：

$(altField).each(function() { $(this).val(dateStr); });

例如我已经改成这个：

$(altField).each(function() { $(this).val(dateStr); $(this).text(dateStr); });

现在您可以将替代文本放在您想要的任何元素中。我希望这会有所帮助。

【讨论】：

【解决方案5】：

dateFormat: 'yy-mm-dd',
// altField: '#dp-date',
onSelect: function(dateText) {
    $('#dp-date').html(dateText);
},

【讨论】：