相同输入字段的jQuery Datepicker和Timepicker一个接一个弹出

Posted

技术标签:

【中文标题】相同输入字段的jQuery Datepicker和Timepicker一个接一个弹出【英文标题】:jQuery Datepicker and Timepicker for same input field to popup one after another 【发布时间】:2010-11-04 22:21:34 【问题描述】:

我在 2 个单独的输入字段中有一个 Datepicker 和一个 Timepicker,但我需要将 2 个字段输入合并为一个以进行数据库调用。想知道我是否只能为两个控件使用 1 个输入字段?

首先调用日期选择器,用户将单击所需的日期并输入值,然后时间选择器将弹出并附加用户在第一个操作中选择的日期。

我正在使用jQuery UI Datepicker 和Timepickr 插件

所以我有这样的东西

<input class="datepicker">2009-06-22</input>
<input class="timepicker">12:00:00</input>

但是想要这样的东西

<input class="datetimepicker">2009-06-22 12:00:00</input>

<script type="text/javascript">
// Date and Time picker same input field
$("#datepicker").datepicker( 
   dateFormat: 'yy-mm-dd',
   onClose: function(dateText, inst) 
      var tempDate = $("#datepicker").val(dateText);
      $("#datepicker").timepickr(
         onClose: function(timeText, inst) 
            var tempTime = $("#datepicker").val(dateText);  
            alert("Temp Time: '" + tempTime.val() + "'");
            $("#datepicker").val(tempDate.val() + ' ' + tempTime.val());
           
      );                                   
   
);             
</script>

【问题讨论】:

啊,草皮。我把那里的链接搞砸了,又来了……jQuery Timepicker mod 【参考方案1】:

我想推荐Any+Time(TM),您可以在其中将单个字段中的日期/时间与一个易于使用(而且快速!)的日期/时间组合选择器组合起来。

【讨论】:

版本 4 刚刚发布,具有许多新功能,包括对 TIME ZONES 的支持(尝试在任何其他选择器中找到它!)、jQuery 选择器/链接和易于删除(以减少内存泄漏和支持更多动态页面)。访问ama3.com/anytime 了解更多信息并下载代码。如果您遇到任何问题或有任何建议,请使用该网站上的联系链接。谢谢! Andrew,我刚刚开始根据您的建议使用 AnyTime 选择器。很棒的工具! :) 如果其他人发现了这篇文章,并且正在使用带有内联编辑的 jqgrid,AnyTime 选择器就不能完全开箱即用。如果您打开一个选择器然后关闭该行,然后返回到相同的选择器字段,您将收到类似“无法创建另一个 AnyTime 选择器”的错误。我发现解决此问题的方法是传递 $('input').AnyTime_noPicker();到editRow()的oneditfunc。 谢谢,杰西卡!如果其他人有经验,请不要犹豫,使用网站上的联系表格! Any+Time 为每个 Any+Time 输入为 UI 附加一个新的隐藏 div(与重用隐藏 div UI 的 jQuery UI 日期选择器不同),这使得设计糟糕的 MSIE6 中的性能下降很多。所以如果需要支持 MSIE6,请不要使用 Any+Time! Any+Time 为每个输入创建一个新的小部件,因为每个输入可以有不同的格式,因此需要不同的按钮。这是我第一次听说性能下降,但我会调查问题,并在必要时寻找不会破坏库灵活性的可能解决方案。【参考方案2】:

您可以将事件绑定到日期选择器的 onClose() 事件。让它打开你的时间选择器。让日期选择器写入输入的基值,并让时间选择器将其值附加到相同的输入后面的空格。

    将日期选择器绑定到输入。 将打开时间选择器的方法附加到日期选择器的 .onClose() 事件中。 将时间选择器值(前面带有空格)附加到输入值。

更新:以下是更新问题的更新结果。

文档提供了一个简短的示例,说明如何将事件/操作绑定到日期选择器的关闭:

$('.selector').datepicker(
   onClose: function(dateText, inst)  ... 
);

在本例中,您可以使用“onClode:”之后的函数将值写入输入,并弹出时间选择器。

$(".selector").datepicker(
  onClose: function(dateText, inst) 
    $(".selector").val(dateText);
    // Raise Timepickr
  
);

【讨论】:

我喜欢这个选项的流程,但从来没有绑定过任何东西。我已经编辑了上面的帖子,向您展示了我正在使用的代码。很基础的 hmm 如何调用时间选择器? 对不起 - 我不知道。我从未使用过那个特定的 3rd 方插件。您必须查阅它的文档,或联系插件作者。老实说,寻找一个不同的 3rd 方插件可能更容易,它可以将日期和时间都内置到一个插件中——比如 razum.si/jQuery-calendar/TimeCalendar.html 或 Alexander 的回复中提到的插件。 您可以尝试将该插件绑定到 $(".selector") 之后的 $(".selector").val(dateText);行,然后立即调用 $(".selector") 的 .click() 或 .focus() 方法。这可能会做到。 我已经更改了一些代码但仍有问题,请参阅新的编辑【参考方案3】:

不是 jQuery,但它适用于有时间的日历:JavaScript Date Time Picker。

只需绑定点击事件即可弹出:

$("#date").click(function() 
    NewCssCal($(this).attr('id'), 'mmddyyyy', 'dropdown', true, 12);
);

我个人觉得这更容易理解。但显然,您有很多选择,有多个 jquery 插件可用于完成您的工作。

【讨论】:

【参考方案4】:

您可以尝试将两个控件的输入合并为一个,例如

$("#datetime").focus(function() 
    var mydate = $("#date").val();
    var mytime = $("#time").val();
    if(mydate && mytime && !this.value) 
        this.value = mydate + " " + mytime;
    
);

【讨论】:

【参考方案5】:

这里有一个替代方案:

http://www.r-ip.ru/dev/datetimepicker/index.html

$('#datetimepicker').datetimepicker( 
  dateFormat: 'yy-mm-dd',
  timeFormat: ' hh:ii:ss' 
);

【讨论】:

没有说明。此外,提供的链接上的时间选择器界面很糟糕。我花了几秒钟才弄清楚单击一个值会增加它。不管怎样,我已经删除了我的反对票。 我同意它具有我所要求的功能,但不包括我正在使用的我想使用的插件。您提供的解决方案很好,但我同意时间控制有点混乱。不过谢谢 该链接现已失效。 那个链接在我的防病毒软件上显示“*** Imposter”;)【参考方案6】:

请查看link

我更新了一些布局问题并添加了第二个滑块,如果showTime:true, time24h:true 将处于活动状态

您可以通过 Google Code 找到原始版本。

【讨论】:

以上是关于相同输入字段的jQuery Datepicker和Timepicker一个接一个弹出的主要内容,如果未能解决你的问题,请参考以下文章

jQuery:如何从与 datepicker 插入日期的输入字段不同的元素中激活 datepicker?

jquery ui datepicker无法添加新的输入字段

jQuery Datepicker 在选择日期时不更新输入字段

altFormat 在 jQuery datepicker 输入字段中不起作用

如何将 jquery datepicker 调用/绑定到标签或 div 而不是输入字段

jquery datepicker - 避免手动输入日期