60 lines
No EOL
1.5 KiB
HTML
60 lines
No EOL
1.5 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
|
|
<script src="dateselector.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<script type="text/template" id="date-selector-template">
|
|
<select class="year">
|
|
<% for(var year=y earFrom; year <=y earTo; year++) { %>
|
|
<option value="<%=year%>">
|
|
<%=year%>
|
|
</option>
|
|
<% } %>
|
|
</select>
|
|
<select class="month">
|
|
<% for(var month=0 ; month <=1 1; month++) { %>
|
|
<option value="<%=month%>">
|
|
<%=monthNames[month]%>
|
|
</option>
|
|
<% } %>
|
|
</select>
|
|
<select class="day">
|
|
<% for(var day=1 ; day <=d ayTo; day++) { %>
|
|
<option value="<%=day%>">
|
|
<%=day%>
|
|
</option>
|
|
<% } %>
|
|
</select>
|
|
</script>
|
|
|
|
<div id="selector-holder"></div>
|
|
<div id="value">тут будет значение даты при выборе</div>
|
|
|
|
<script>
|
|
var dateSelector = new DateSelector({
|
|
yearFrom: 2010,
|
|
yearTo: 2020,
|
|
value: new Date(2012, 2, 31), // 31 марта 2012
|
|
template: $('#date-selector-template').html().trim()
|
|
});
|
|
|
|
$('#selector-holder').append(dateSelector.getElement());
|
|
|
|
$(dateSelector).on("select", function(e) {
|
|
$('#value').html(e.value + '');
|
|
});
|
|
</script>
|
|
|
|
<button onclick="dateSelector.setValue(new Date)">setValue(сегодня)</button>
|
|
|
|
|
|
</body>
|
|
|
|
</html> |