如何在html中点击文本框显示日历

how to show calendar on text box click in html

本文关键字：文本 显示 日历 html      更新时间：2023-09-26

在html中，我想显示日历以选择日期，同时单击文本框然后我们从该日历中选择一个日期，然后选择的日期将显示在该文本框中。

从HTML5开始，<input type="date" />就可以了。

演示：http://jsfiddle.net/8N6KH/

您应该阅读jQueryUI日期选择器

一旦包含了相关的jQueryUI库，它就简单到

脚本：

$(function() {
    $( "#datepicker" ).datepicker();
});

HTML:

<input type="text" id="datepicker" />

优点：

  • 它经过了x浏览器兼容性的全面测试，所以您不会有任何问题
  • 单独的css文件，因此您可以根据自己的喜好进行自定义

尝试使用jquery ui

<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script>   
    $(function() {
         $( "#calendar" ).datepicker();   
    }); 
</script>
<p>Calendar: <input type="text" id="calendar" /></p>

更多

您将需要使用任何javascript html日历小部件。

试试这个日历视图小部件，只需复制粘贴一些示例中显示的代码，这就是您想要的。

这是Jquery Mobile日期框的链接-JQM日期框

您需要的是一个jQuery UI日期选择器

查看演示和源代码。

是的，你会在使用HTML5日期选择器时遇到各种问题，它可以工作，也可以不工作。我也遇到了同样的问题。请检查这个DatePicker演示，我用这个插件解决了我的问题。它非常好和灵活的日期选择器插件与完整的演示。它也与移动浏览器完全兼容，也可以与jquery mobile集成。

jQuery Mobile也有一个日期选择器。源

只需包括以下文件，

  <script src="jQuery.ui.datepicker.js"></script>
  <script src="jquery.ui.datepicker.mobile.js"></script>

HTML日期选择器您可以参考它。

相关文章：