Javascript 从datepicker获取日期并将其显示在div中_Javascript_Jquery_Html_Jquery Ui_Datepicker

Javascript 从datepicker获取日期并将其显示在div中

javascript jquery html jquery-ui

Javascript 从datepicker获取日期并将其显示在div中,javascript,jquery,html,jquery-ui,datepicker,Javascript,Jquery,Html,Jquery Ui,Datepicker,我试图从jQueryUI中的datepicker获取日期，然后在页面的某个地方显示用户选择的日期。所选日期已经显示在日期选择器的输入字段中，这很好，但我也希望在div标记中的页面其他位置显示完全相同的值。使用日期选择器将onchange=“showDate（this）”添加到您的输入中 function showDate(input){ $('#div').html(input.value); } 您的div将由日期选择器选择日期。jqueryui实际上为您公开了此功能，甚至会返回一个真正的日

我试图从jQueryUI中的datepicker获取日期，然后在页面的某个地方显示用户选择的日期。所选日期已经显示在日期选择器的输入字段中，这很好，但我也希望在div标记中的页面其他位置显示完全相同的值。

使用日期选择器将

onchange=“showDate（this）”

添加到您的输入中

function showDate(input){
$('#div').html(input.value);
}

您的div将由日期选择器选择日期。

jqueryui实际上为您公开了此功能，甚至会返回一个真正的日期类型

就打电话

另外，不引人注目的JavaScript通常希望您不要将JavaScript内联添加到HTML中。相反，您可以使用

change

事件处理程序将侦听器附加到日期选择器

JavaScript:

$("#datepicker").change(function() {
    var date = $(this).datepicker("getDate");
    $("#placeholder").text(date);
});

选择日期选择器时调用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);
    }
});


jQuery UI日期选择器-默认功能
日期：
$（函数（）{
$（“#日期选择器”）.datepicker（）；
$（“#日期选择器”）。在（“更改”，函数（）上{
所选变量=$（this.val（）；
$（'#displayDate'）.html（选中）；
});
});
在这里输入代码

听起来很简单。你试过什么？请发布你的代码。我自己没有手工编写任何代码，但是我在过去的3个小时里回收了别人使用的代码，但没有用。我不能发布我尝试过的所有不同的方法，但是我尝试过将值存储在变量的输入中，然后显示该变量。我（正确或错误地）使用了

.val（）

来获取值，但它从未返回任何内容。如果你被卡住了，别忘了直接到源代码处查看API，它公开了一个名为的方法。

<!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>