Question

Hai iam在这里创建一个带有datepicker的页面iam让所有日期都在两个日期之间在列表视图中 enter image description here

但实际上我希望它显示在一个列表框中，并使每个日期列表可点击。它可能..ma code is

<!DOCTYPE html>
 <head>


<meta charset="utf-8" />
<title>jQuery UI Datepicker - Select a Date Range</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-
 ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
 $(function() {
   $("#from").datepicker();
    $("#to").datepicker();


 $('#getBetween').on('click', function () {
    var start = $("#from").datepicker("getDate"),
    end = $("#to").datepicker("getDate"),
    currentDate = new Date(start),
    between = []
    ;

    while (currentDate <= end) {
    between.push(new Date(currentDate));
    currentDate.setDate(currentDate.getDate() + 1);
   }

 $('#results').html(between.join('<br> '));

  });


         });
      </script>
  </head>
 <body>

   <input id="from" />
   <input id="to" />
   <button id="getBetween">Get Between Dates</button>

  <ul>
   <li id="results" ></li>
 </ul>

 </body>
   </html>

提前致谢

Answer 1

您可以更改此行：

between.push(new Date(currentDate));

到此：

between.push('<a href="#">' + new Date(currentDate) + '</a>');

jsbin demo

更新

HTML：

我已经改变了你的html一点点。我取了ul的ID并将其设为空（ without any list items ）

<ul id="results" ></ul>

的jQuery / JS：

还有一些变化：

between.push('<li>' + new Date(currentDate) + '</li>');

更改了推送，它添加了带有一些列表项的currentDate。
在每个li上完成了一个click事件并推送了一个输入类型文本

点击事件隐藏其他列表项并在那里显示文本输入：

 $(document).on('click', '#results li', function(){
     $(this).siblings('li').hide().end().append('<input type="text" />');
 }).on('click', '#results input', function(e){
   e.stopPropagation(); // <---stops the event to buble up
 });

在ListBox中显示日期并使其可单击

1 个答案:

更新

HTML：

的jQuery / JS：

See the edited jsbin