Question

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

Answer 1

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

只需致电.datepicker("getDate")

此外，Unobtrusive JavaScript通常更喜欢您不在内嵌HTML添加内容。相反，您可以使用change事件处理程序

将侦听器附加到日期选择器

JavaScript的：

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

Working Demo in Fiddle

Answer 2

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

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

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

Answer 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);
    }
});

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

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

4 个答案:

Working Demo in Fiddle