Question

我们尝试使用日期选择器显示日期的代码，它应该在单个页面中显示两次for和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>

Answer 1

为什么不使用输入类型日期

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

<强> DEMO

Answer 2

您的正文不包含第二个<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

一些补充说明：

围绕DOM ready事件包装你自己的javascript，以防止在你的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开发的一些一般性建议。

Answer 3

只需在同一个类中添加两个输入和日期选择器，日期选择器具有内置功能以显示图标。

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

Answer 4

如果你想要两个日期选择器

，你需要有两个输入字段

<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()
})

演示：Fiddle

Answer 5

我建议使用class而不是id。 ID应该是唯一的，如果不是，那么你会发现自己陷入困境。使用类可以让你机会与许多具有相同类的元素一起工作，如果是id，它将正确处理1个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

Answer 6

尝试

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

你的html应该是

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

就是这样

html中的日期选择器代码

6 个答案: