Hai iam Создание страницы с datepicker здесь iam получение всех дат между двумя датами в виде списка
Но на самом деле я хочу, чтобы он отображался в списке и делал каждый список даты 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>
заранее спасибо
Вы можете изменить эту строку:
between.push(new Date(currentDate));
к этому:
between.push('<a href="#">' + new Date(currentDate) + '</a>');
Я немного поменял ваш html. я взял идентификатор для ul
и сделал его пустым (without any list items
)
<ul id="results" ></ul>
Есть еще несколько изменений:
between.push('<li>' + new Date(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
});