javascript 从日期选择器获取日期并将其显示在 div 中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23227946/
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
Get date from datepicker and display it in a div
提问by Nikki Mather
I'm trying to get the date from the datepicker in jQuery UI and then display the date selected by the user somewhere on the page. The selected date already displays inside the input field of the datepicker, which is great, but i also want to display that exact same value elsewhere on the page inside a div tag.
我试图从 jQuery UI 中的日期选择器获取日期，然后在页面上的某处显示用户选择的日期。所选日期已经显示在日期选择器的输入字段内，这很好，但我也想在页面上的其他地方用 div 标签显示完全相同的值。
采纳答案by Topo
Add onchange="showDate(this)"to your input with the date picker.
onchange="showDate(this)"使用日期选择器添加到您的输入中。
function showDate(input){
$('#div').html(input.value);
}
Your div will have the date selected by the datepicker.
您的 div 将具有日期选择器选择的日期。
回答by KyleMit
Jquery UI actually exposes this functionality for you and will even return a bonafide datetype.
Jquery UI 实际上为您公开了这个功能，甚至会返回一个真正的date类型。
Just call .datepicker("getDate")
打电话就行 .datepicker("getDate")
Also, Unobtrusive JavaScript would usually prefer that you not add javascript inline to your HTML. Instead, you can attach a listener to your datepicker with the changeevent handler
此外，Unobtrusive JavaScript 通常希望您不要将 javascript 内联添加到您的 HTML 中。相反，您可以使用change事件处理程序将侦听器附加到您的日期选择器
JavaScript:
JavaScript：
$("#datepicker").change(function() {
var date = $(this).datepicker("getDate");
$("#placeholder").text(date);
});
Working Demo in Fiddle
Fiddle 中的工作演示
回答by Claudia Hernandez
onSelect called when the date picker is selected. This code also permit to change the format date to show up in a different div.
onSelect 在选择日期选择器时调用。此代码还允许更改格式日期以显示在不同的 div 中。
$("#datepicker").datepicker({
dateFormat: "MM dd, yy",
showOtherMonths: true,
selectOtherMonths: true,
onSelect: function () {
var selectedDate = $.datepicker.formatDate("M yy", $(this).datepicker('getDate'));
//alert(date);
$("#month").text(selectedDate);
}
});
回答by Hari Om
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
Date:
<input type="text" id="datepicker"/>
<div id="displayDate"></div>
<script>
$(function() {
$( "#datepicker" ).datepicker();
$("#datepicker").on("change",function(){
var selected = $(this).val();
$('#displayDate').html(selected);
});
});
</script>
enter code here
</body>
</html>
