如何使用jQuery日期选择器显示日期和自动更新?

时间:2014-07-21 15:31:00

标签: javascript jquery jquery-ui-datepicker

我需要让jQuery与其余的js一起工作,并在图表上以降序显示日期。这是我到目前为止的基础。在哪里说“document.write(x);”我需要它来显示用户选择的日期。

 <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
        <style>
            h1 {
                text-align: center;
            }
        </style>
    </head>
    <body>
    <div class="datepicker">
        <div>
            <script type="text/javascript">
            var x;
            $(function date() {
              $("#datepicker").datepicker({
                  onClose: function(dateText) {
                     var x = dateText;
                     alert("x = " + x);
                  }
                });
              $('#datepicker').datepicker('option', {dateFormat: 'mm/dd/yy'});
          });
            </script>
  <input type="text" id="datepicker">
        </div>
    </div>
<div class="price-chart">
    <div class="attr-col">
        <ul>
            <li>Service 1:</li>
            <li>Service 2:</li>
            <li>Service 3:</li>
            <li>Service 4:</li>
            <li>Service 5:</li>
        </ul>
    </div>
    <div class="pt-table">
        <div class="pt-body">
            <ul class="pt-rows">
                <li class="title">
                <span><script type="text/javascript">
                document.write(x);
                </script></span>

2 个答案:

答案 0 :(得分:0)

在onClick函数中更改后,span中x的值不会更新。将您的范围提供给您希望日期显示为&#34;日期&#34;然后在onClose函数中添加最后一行:

$( "#datepicker" ).datepicker({
  onClose: function(dateText){
    x = dateText;
    alert("x = " + x);
    $("#date").html(x);
  }
});

每次更改x的值时都会自动更新。

答案 1 :(得分:0)

$( "#datepicker" ).datepicker({
  onClose: function(dateText){
     x = dateText;
     alert("x = " + x);
     $("li.title>span").eq(0).html(x);
  }
});