0

我正在创建一个页面datepicker并获取两个日期范围之间的所有日期。 看法

我希望它显示在 a 中listbox并使每个日期列表可点击。那可能吗？

<!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>
4

1 回答 1

1

您可以更改此行：

between.push(new Date(currentDate));

对此：

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

jsbin 演示

更新：

HTML：

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

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

jQuery/js：

还有一些变化：

between.push('<li>' + new Date(currentDate) + '</li>');
  1. 更改了推送，它添加了 currentDate 和一些列表项。
  2. 在每个 li 上完成一个点击事件并推送一个输入类型文本

隐藏其他列表项并在此处显示文本输入的单击事件：

 $(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
 });

查看编辑后的 ​​jsbin

于 2013-11-11T09:17:32.130 回答