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

6 回答 6

3

Why dont you use input type date

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

DEMO

于 2013-03-21T10:36:31.327 回答
0

试试喜欢

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

你的html应该是

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

而已

于 2013-03-21T10:45:14.060 回答
0

您的正文不包含<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 就绪事件周围，以防止您的 js 在 DOM 完成加载之前执行。您可以通过以下代码实现此目的：

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

还要在标签末尾之前加载您的 Javascript<body>以提高加载速度：

    /* ... */
    <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 开发的一些一般性建议。

于 2013-03-21T10:41:10.077 回答
0

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

<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>
于 2013-03-21T10:42:20.693 回答
0

You need to have two input fields if you want two datepickers

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

Demo: Fiddle

于 2013-03-21T10:43:14.117 回答
0

I would recommend using class instead of id. ID should be unique and if its not then you will find yourself in trouble. Using class give you oportunity to work with many elements having the same class, in case of id it will process correctly for 1 id and will give not wanted results for others not mentioning it may cause other problems. Try this

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

Also check html5 date and datetime type example here: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_type_date

于 2013-03-21T10:43:55.650 回答