Показать дату в ListBox и сделать ее Clikable

0

Hai iam Создание страницы с datepicker здесь iam получение всех дат между двумя датами в виде списка Изображение 174551

Но на самом деле я хочу, чтобы он отображался в списке и делал каждый список даты clickable.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>

заранее спасибо

Теги:
datepicker
listbox

1 ответ

1
Лучший ответ

Вы можете изменить эту строку:

between.push(new Date(currentDate));

к этому:

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

jsbin demo

Обновления:

HTML:

Я немного поменял ваш html. я взял идентификатор для ul и сделал его пустым (without any list items)

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

JQuery/JS:

Есть еще несколько изменений:

between.push('<li>' + new Date(currentDate) + '</li>');
  1. изменил push, он добавляет currentDate с некоторыми элементами списка.
  2. сделал событие щелчка на каждом ли и нажал один текст типа ввода

Событие 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
 });

См. Отредактированный jsbin

Поделиться
  • 0
    Спасибо за быстрое воспроизведение, и ваш код работает, но мне нужно сделать список кликабельным, чтобы, когда я щелкаю список, он скрывал весь остальной список и отображал текстовое поле ... это возможно ???
  • 0
    да возможно! так что вы хотите показать только нажатую ссылку, скрыть другие и показать там текстовое поле ввода. правильно.
Показать ещё 6 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню