文章/答案/技术大牛

发布

社区首页 >问答首页 >html格式的日期选择器代码

问html格式的日期选择器代码
EN

Stack Overflow用户

提问于 2013-03-21 18:34:38

回答 6查看 44K关注 0票数 1

我们尝试了使用日期选择器显示日期的代码，它应该在一个页面中显示两次开始日期和结束日期，但它只显示开始日期，而不显示结束日期

<html>
<head>
    <link rel='stylesheet' id='admin-css'  href='admin.css' type='text/css' media='all' />
    <link rel='stylesheet' id='colors-fresh-css'  href='colors-fresh.css' type='text/css' media='all' />
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
    <script>
    $(function(){
        $( "#datepicker" ).datepicker();
        $("#icon").click(function() { 
            $("#datepicker").datepicker( "show" );
        })
    });
    </script>
</head>
<body>
    <input type="text" id="datepicker" name='from' size='9' value="" />  
    <img src='images/calender.PNG' id='icon' height='25px' width='25px'/ >
</body>
</html>

php

javascript

html

css

回答 6

Stack Overflow用户

发布于 2013-03-21 18:36:31

为什么不使用输入类型date

<input type="date" id="datepicker" name='from' size='9' value="" />

票数 3

Stack Overflow用户

发布于 2013-03-21 18:41:10

您的正文不包含要附加日期选择器的第二个<input>标记。

所以使用像这样的东西。

<input type="text" id="datepicker_from" name='from' size='9' value="" />  <img src='images/calender.PNG' id='icon_from' height='25px' width='25px'/ >
<input type="text" id="datepicker_to" name='from' size='9' value="" />  <img src='images/calender.PNG' id='icon_to' height='25px' width='25px'/ >

在你的JS代码中：

$( "#datepicker_from" ).datepicker();
$("#icon_from").click(function() { $("#datepicker_from").datepicker( "show" );})

$( "#datepicker_to" ).datepicker();
$("#icon_to").click(function() { $("#datepicker_to").datepicker( "show" );})

一个建议:防止使用ID而不是ID。它很难维护。如果您想在不同的DOM元素上实现相同的功能，最好使用类选择器，就像@Pathik Gandhi在他的回答中显示的那样：https://stackoverflow.com/a/15545224/735226

一些额外的注意事项：

将您自己的javascript包装在DOM ready事件周围，以防止在DOM加载完成之前执行js。您可以通过以下代码来实现这一点：

$(document).ready(function() {
    // Place all of your JS code here, like your datepicker initializing.
});

另外，在<body>标签的末尾加载您的Javascript，以提高加载速度：

    /* ... */
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
</body>

这些只是一些结构化web开发的一般性建议。

票数 0

Stack Overflow用户

发布于 2013-03-21 18:42:21

只需添加两个输入从和到相同的类和日期选择器有内置的功能，以显示图标。

<script>
    $(function()
    {
           $( ".datepicker" ).datepicker({
              showOn: "button",
              buttonImage: "images/calendar.gif",
              buttonImageOnly: true
            });
    });   

    </script>
    </head>
    <body>
            <input type="text" class="datepicker" name='from' size='9' value="" />
            <input type="text" class="datepicker" name='to' size='9' value="" />
    </body>
    </html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/15545074

复制

相似问题

问html格式的日期选择器代码
EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问html格式的日期选择器代码EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问html格式的日期选择器代码
EN