如何显示中的jQuery datepicker值 <p> 使用innerHTML标记

Question

I'm trying to add a datepicker to my webpage that displays the date a user selects from the datepicker plugin, and displays it in a <p> tag next to the calendar icon. 我试图将日期选择器添加到我的网页中，以显示用户从日期选择器插件中选择的日期，并将其显示在日历图标旁边的<p>标记中。 Currently, I can get the datepicker to display, but when the user selects the date nothing happens. 当前，我可以显示日期选择器，但是当用户选择日期时，什么也没有发生。 I attempted to use innerHTML to retrieve the selected date and display it. 我试图使用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

Use this code instead 改用此代码

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

Answer 2

Try this: 尝试这个：

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

如何显示中的jQuery datepicker值 <p> 使用innerHTML标记

问题描述

2 个解决方案

解决方案1
1 2015-09-06 19:34:19

解决方案2
0 已采纳 2015-09-06 19:31:05

如何显示中的jQuery datepicker值 <p> 使用innerHTML标记

问题描述

2 个解决方案

解决方案1 1 2015-09-06 19:34:19

解决方案2 0 已采纳 2015-09-06 19:31:05

解决方案1
1 2015-09-06 19:34:19

解决方案2
0 已采纳 2015-09-06 19:31:05