php html中的日期选择器代码
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15545074/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
date picker code in html
提问by harry
we tried the code for displaying date using date picker it should display two times in a single page for from and to dates,but it is displaying only for from date and not for to date
我们尝试了使用日期选择器显示日期的代码，它应该在一个页面中为起始日期和截止日期显示两次，但它仅显示起始日期而不显示截止日期
<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>
回答by Sowmya
回答by Johannes Klau?
Your body does not contain a second <input>Tag to attach a datepicker to.
您的正文不包含<input>要附加日期选择器的第二个标签。
So use something like this.
所以使用这样的东西。
<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'/ >
And in your JS Code:
在你的 JS 代码中：
$( "#datepicker_from" ).datepicker();
$("#icon_from").click(function() { $("#datepicker_from").datepicker( "show" );})
$( "#datepicker_to" ).datepicker();
$("#icon_to").click(function() { $("#datepicker_to").datepicker( "show" );})
One advice: Prevent using IDs over IDs. It's hard to maintain. If you want to achieve the same thing on different DOM Elements, it's better to use class selectors, like @Pathik Gandhi showed in his answer: https://stackoverflow.com/a/15545224/735226
一个建议：防止在 ID 上使用 ID。很难维护。如果你想在不同的 DOM 元素上实现同样的事情，最好使用类选择器，就像@Pathik Gandhi 在他的回答中所示：https://stackoverflow.com/a/15545224/735226
Some additional notes:
一些补充说明：
Wrap your own javascript around the DOM ready event to prevent that your js is executing before your DOM finished loading. You can achieve this by the following piece of code:
将您自己的 javascript 包裹在 DOM 就绪事件周围，以防止您的 js 在 DOM 完成加载之前执行。您可以通过以下代码实现此目的：
$(document).ready(function() {
// Place all of your JS code here, like your datepicker initializing.
});
Also load your Javascript right before the end of the <body>tag to improving loading speed:
还要在<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>
Those are just some general advice for structured web development.
这些只是结构化 Web 开发的一些一般建议。
回答by Pathik Gandhi
Just add two input from and to with same class and date picker has inbuilt functionality to show icon.
只需添加两个输入 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>
回答by Arun P Johny
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
演示：小提琴
回答by scx
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
我建议使用 class 而不是 id。ID 应该是唯一的，如果不是，那么您会发现自己有麻烦。使用 class 为您提供了使用具有相同类的许多元素的机会，在 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'/ >
Also check html5 date and datetime type example here: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_type_date
还要在这里检查 html5 日期和日期时间类型示例：http: //www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_type_date
回答by Gautam3164
Try like
试试像
$(function(){
$( "#from_date,$to_date" ).datepicker();
});
and your html should be
你的 html 应该是
<input type="text" id="from_date">
<input type="text" id="to_date">
that's it
就是这样
