javascript 如何在 HTML 中实现日历？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8993996/
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
How to implement a calendar in HTML?
提问by amlane86
I have a web application that uses HTML and Javascript. I want to create a textbox that allows to user to enter in a keyword and submit it. I also want a little calendar icon next to the textbox so the user can click on it to popup a calendar to select a date as the keyword, and then submit that.
我有一个使用 HTML 和 Javascript 的 Web 应用程序。我想创建一个文本框，允许用户输入关键字并提交。我还想要一个文本框旁边的小日历图标，以便用户可以单击它以弹出日历以选择日期作为关键字，然后提交。
I have tried to implement Jcalendar and DatePicker but couldn't get either one working.
我曾尝试实现 Jcalendar 和 DatePicker，但无法让任何一个工作。
Is there something that I can use that will meet my needs? Thank you!
有什么可以满足我的需求的东西吗？谢谢！
回答by bpeterson76
The easiest way is jQuery's Date Picker. One line of code....done.
最简单的方法是jQuery 的 Date Picker。一行代码......完成。
<script type="text/javascript">
$( "#datepicker" ).datepicker();
</script>
回答by Francis Lewis
Check out the jQueryUI datepicker: http://jqueryui.com/demos/datepicker/
查看 jQueryUI 日期选择器：http: //jqueryui.com/demos/datepicker/
回答by Magrangs
回答by IsisCode
回答by Christofer Eliasson
Have a look at jQuery UI's calendarwith an icon-trigger.
查看带有图标触发器的jQuery UI 日历。
To have an icon trigger the calender, it would be something like this:
要让图标触发日历，它会是这样的：
<script type="text/javascript">
$(function() {
$( "#idOfYourInput" ).datepicker({
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true
});
});
</script>
回答by mowwwalker
Have a look here:
看看这里：
http://www.tripwiremagazine.com/2011/10/jquery-calendar-date-pickers.html
http://www.tripwiremagazine.com/2011/10/jquery-calendar-date-pickers.html
Number 10 looks like what you need: http://codecanyon.net/item/jquery-date-range-picker/full_screen_preview/261519?ref=themespotters&ref=themespotters&clickthrough_id=42454046&redirect_back=true
数字 10 看起来像你需要的：http: //codecanyon.net/item/jquery-date-range-picker/full_screen_preview/261519?ref=themespotters&ref=themespotters&clickthrough_id=42454046&redirect_back=true
