html中的日期选择器代码 - date picker code in html

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

<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>

为什么不使用date类型呢

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

您的body不包含第二个<input> Tag来附加日期选择器。

所以用这样的东西

<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

附加说明:

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

$(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>

只需添加两个输入from和to具有相同的类和日期选择器具有内置功能来显示图标。

<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>

如果需要两个日期选择器，则需要有两个输入字段

<input class="datepicker" type="text" id="fromdate" name='from' size='9' value="" />
<input class="datepicker" type="text" id="todate" name='from' size='9' value="" />
$(function(){
    $('.datepicker').datepicker()
})

演示:小提琴

我建议使用class而不是id。ID应该是唯一的，如果不是，那么你就会发现自己有麻烦了。使用class使您有机会使用具有相同类的许多元素，在id的情况下，它将正确处理1 id，并将为其他id提供不想要的结果，不提及它可能会导致其他问题。试试这个

$(function()
            {
                     $( ".datepicker" ).datepicker();
                     $(".icon").click(function() { $(".datepicker").datepicker( "show" );})
             });
 <input type="text" class="datepicker" name='from' size='9' value="" />  <img src='images/calender.PNG' class='icon' height='25px' width='25px'/ > 
 <input type="text" class="datepicker" name='to' size='9' value="" />  <img src='images/calender.PNG' class='icon' height='25px' width='25px'/ >

也检查html5日期和日期时间类型的例子在这里:http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_type_date

Try like

$(function(){
    $( "#from_date,$to_date" ).datepicker();        
});

你的HTML应该是

<input type="text" id="from_date">
<input type="text" id="to_date">