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

Posted

技术标签:

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

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

有人解决过这个问题吗?

【问题讨论】:

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

【讨论】:

以上是关于jquery ui datepicker - altfield作为div而不是输入的主要内容,如果未能解决你的问题,请参考以下文章

使用 jquery-ui/datepicker 的内存泄漏

jquery UI datepicker汉化

使用 jquery 验证和 jquery-ui datepicker

将 JQuery UI Datepicker 与来自 Jquery UI 主题的图标一起使用

jquery Ui datepicker()

jquery ui datepicker怎么设置默认日期