javascript 从日期选择器中选择日期后如何调用函数？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27209259/
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 call a function after a date is selected from a date picker?
提问by user1080952
I'm quite new to javascript and JSP and am having a difficult time wrapping my head around what's getting called and when and where. I'm writing this all in a single JSP file. The starting code I have right now is:
我对 javascript 和 JSP 还是很陌生，并且很难将我的头脑围绕在何时何地被调用。我将所有这些都写在一个 JSP 文件中。我现在的起始代码是：
<input type=text name="myTextField" >
<input type=button name="myTextButton" value="Select a date"
onclick="displayDatePicker(myTextField)">
<script type="text/javascript">
// ???
</script>
The first thing that confuses me is the displayDatePicker function. I can't for the life of me find any documentation on this function (is it jquery? is it javascript? is it bootstrap? can i pass in other args?). An alternative would be to declare a custom function and have myTextButton's onclick call that function. I managed to get that to work, but I don't know how to display a datepicker that actually has a callback when a date is chosen.
首先让我感到困惑的是 displayDatePicker 函数。我一生都找不到关于这个函数的任何文档（它是 jquery？它是 javascript？它是引导程序？我可以传入其他参数吗？）。另一种方法是声明一个自定义函数并让 myTextButton 的 onclick 调用该函数。我设法达到了工作，但我不知道如何在选择日期时显示实际上具有回调的DatePicker。
Here's the functionality I want to have:
这是我想要的功能：
- User clicks on myTextField, manually types in a date, then an alert pops up "You selected ../../...." or "Invalid date selected"
- User clicks on myTextButton, selects a date from the date picker, then myTextField is populated with that date and an alert pops up "You selected ../../...."
- 用户单击 myTextField，手动输入日期，然后弹出警告“您选择了 ../../....”或“选择的日期无效”
- 用户单击 myTextButton，从日期选择器中选择一个日期，然后用该日期填充 myTextField 并弹出警告“您选择了 ../../....”
采纳答案by Rafael
This will alert values that are typed in the box. But you should be using a UI for this. Why reinvent the wheel. Time is precious. jQuery UI is among the most popular due to it's cross browser compatibility.
这将提醒在框中键入的值。但是您应该为此使用 UI。为什么要重新发明轮子。时间是宝贵的。jQuery UI 是最受欢迎的，因为它具有跨浏览器兼容性。
<input type="date" id="date">
<button onclick="date()">Select a date</button>
<script>
function date() {
var dateVal = document.getElementById("date").value;
alert("Your typed in " + dateVal);
}
</script>
jQuery UI Datepicker
jQuery UI 日期选择器
回答by Ken de Guzman
Like what others said you can use Jquery UI datepickerfor this. First thing is to import required script and css.
就像其他人所说的那样，您可以为此使用Jquery UI 日期选择器。首先是导入所需的脚本和 css。
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
To answer the functionality that you want. Take a look of example that I created.
JSFIDDLE
回答您想要的功能。看一下我创建的示例。
JSFIDDLE
If user doesn't select in datepicker and manually input text, you should manually check it. Here's the example.
如果用户没有在日期选择器中选择并手动输入文本，您应该手动检查它。这是示例。
$( "#myTextField" ).datepicker({
onClose: function(){
validate($(this).val());
}
});
function validate(dateText){
try {
alert("You selected is : "+ $.datepicker.parseDate('mm/dd/yy',dateText));
}
catch (e) {
alert("invalid date");
};
}
After datepicker is closed validate function will invoke and try to parse, it will return error if date is unparseable.
日期选择器关闭后，验证函数将调用并尝试解析，如果日期不可解析，它将返回错误。
回答by Somdev Singh
The displayDatePickeris the inbuilt Javascript function written into the JS library which you have used for the DateTime picker.
这displayDatePicker是写入到您用于 DateTime 选择器的 JS 库中的内置 Javascript 函数。
Also if you are creating your own custom datepicker than you have to include your custom function which will handle the OnChange, Onclick, OnSelectionchange kind of events.
此外，如果您要创建自己的自定义日期选择器，则必须包含您的自定义函数，该函数将处理OnChange, Onclick,OnSelection更改类型的事件。
I would suggest you to use Jquery.UI or Bootstrap control library for datepicker feature.
我建议您使用 Jquery.UI 或 Bootstrap 控件库来实现日期选择器功能。
