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

【问题标题】：Get date from datepicker and display it in a div从 datepicker 获取日期并将其显示在 div 中
【发布时间】：2014-04-22 18:55:20
【问题描述】：

我正在尝试从 jQuery UI 中的 datepicker 获取日期，然后在页面的某处显示用户选择的日期。选定的日期已经显示在 datepicker 的输入字段中，这很棒，但我也想在 div 标签内的页面其他地方显示完全相同的值。

【问题讨论】：

听起来很简单。你试过什么？请发布您的代码。
我自己没有手写任何代码，但是我在过去 3 小时内回收了其他人使用的代码，但无济于事。我无法发布我尝试过的所有不同方法，但是我尝试将输入中的值存储到变量中，然后显示该变量。我使用（正确或错误）.val() 来获取值，但它从不返回任何内容。
发布您尝试的最后一件事。请提供您的 HTML 和 JavaScript。
如果你被卡住了，别忘了直接去源码查看API，它公开了一个名为getDate的方法。

标签： javascript jquery html jquery-ui datepicker

【解决方案1】：

Jquery UI 实际上为你公开了这个功能，甚至会返回一个真正的date 类型。

只需拨打.datepicker("getDate")

此外，Unobtrusive JavaScript 通常希望您不要将 javascript 内联添加到 HTML 中。相反，您可以使用 change 事件处理程序将侦听器附加到您的日期选择器

JavaScript：

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

Working Demo in Fiddle

【讨论】：

【解决方案2】：

使用日期选择器将onchange="showDate(this)" 添加到您的输入中。

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

您的 div 将具有由 datepicker 选择的日期。

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

【讨论】：