javascript 如何在按钮单击时显示 jQuery DatePicker？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17606972/
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 Show jQuery DatePicker on button click?
提问by user2574957
Hi I saw a tutorial about creating a datepicker using an image. Ive copied and pasted the exact codes (except for the image path) but the calendar image does not show., can anyone help me please .. :D
嗨，我看到了一个关于使用图像创建日期选择器的教程。我已经复制并粘贴了确切的代码（图像路径除外），但日历图像没有显示。，任何人都可以帮我吗.. :D
here is the code
这是代码
<HTML>
<HEAD>
<style type="text/css">
body
{
font-size: 10pt;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("#txtDate").datepicker({
showOn: 'button',
buttonText: 'Show Date',
buttonImageOnly: true,
buttonImage: 'calendar.jpg',
dateFormat: 'dd/mm/yy',
constrainInput: true
});
$(".ui-datepicker-trigger").mouseover(function() {
$(this).css('cursor', 'pointer');
});
});
</script>
</HEAD>
<BODY>
<input type='text' id='txtDate' />
</BODY>
</HTML>
回答by Arun P Johny
You need to include both jQuery and jQuery UI libraries for this to work
您需要同时包含 jQuery 和 jQuery UI 库才能使其工作
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
Ex:
前任：
<HTML>
<HEAD>
<style type="text/css">
body {
font-size: 10pt;
}
</style>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#txtDate").datepicker({
showOn: 'button',
buttonText: 'Show Date',
buttonImageOnly: true,
buttonImage: 'calendar.jpg',
dateFormat: 'dd/mm/yy',
constrainInput: true
});
$(".ui-datepicker-trigger").mouseover(function() {
$(this).css('cursor', 'pointer');
});
});
</script>
</HEAD>
<BODY>
<input type='text' id='txtDate' />
</BODY>
<HTML>
Demo: Plunker
演示：Plunker
回答by Alex
Add JQuery library and ui like this:
像这样添加 JQuery 库和 ui：
<script type="text/javascript" src="/scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/scripts/jquery-ui-1.10.3.custom.min.js"></script>
回答by ramesh
You must include jQuery UI path
您必须包含 jQuery UI 路径
Complete working code here
完整的工作代码在这里
<HTML>
<HEAD>
<style type="text/css">
body
{
font-size: 10pt;
}
</style>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#txtDate").datepicker({
showOn: 'button',
buttonText: 'Show Date',
buttonImageOnly: true,
buttonImage: 'calendar.jpg',
dateFormat: 'dd/mm/yy',
constrainInput: true
});
$(".ui-datepicker-trigger").mouseover(function() {
$(this).css('cursor', 'pointer');
});
});
</script>
<head>
<body>
<input type="text" id="txtDate" />
</body>
