Question

我尝试在我的网页上添加一个日期选择器，显示用户从datepicker插件中选择的日期，并将其显示在日历图标旁边的<p>标记中。目前，我可以显示日期选择器，但是当用户选择日期时没有任何反应。我尝试使用innerHTML来检索所选日期并显示它。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Test</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <!-- Bootstrap 3.0 -->
    <link rel="stylesheet" href="main.css">
    <!-- main CSS -->
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <!-- JQuery CSS -->
</head>

<body>
<header>
    <div class="content-container">
        <div class="date-section">
            <div class="container">
                <div class="date-scroll">
                    <input type="hidden" id="datepicker">
                    <p id="date-fill"></p>
                </div>
            </div><!-- container -->
        </div><!-- date-section -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="js/myscript.js"></script>
<script>
    $("#datepicker").datepicker({
        showOn: "button",
        buttonImage: "http://hastypudding.org/assets/images/icon-calendar-blue.png",
        buttonText: "Open Calendar",
        buttonImageOnly: true,
        inline: true,
        onSelect: function(){
            var day1 = $("#datepicker").datepicker('getDate').getDate();                 
            document.getElementById("date-fill").innerHTML = day1.getDate();
        }
    });

</script>

</body>
</html>

Answer 1

请改用此代码

onSelect: function(){
    var day1 = $("#datepicker").datepicker('getDate');
    document.getElementById("date-fill").innerHTML = day1;
}

Answer 2

试试这个：

onSelect: function(dateText, inst) { 
      var dateAsString = dateText; //the first parameter of this function
      var dateAsObject = $(this).datepicker( 'getDate' ); //the getDate method
      $("#date-fill").html(dateAsObject)
   }

如何使用innerHTML在<p>标记中显示jquery datepicker值

2 个答案: