init
This commit is contained in:
Ilya Kantor
parent
06f61d8ce8
commit
f301cb744d
2271 changed files with 103162 additions and 0 deletions
1
02-ui/05-widgets/08-widget-tasks-2/01-date-selector/solution/.plnkr
Executable file
1
02-ui/05-widgets/08-widget-tasks-2/01-date-selector/solution/.plnkr
Executable file
|
|
@ -0,0 +1 @@
|
|||
{"name":"dateselector","plunk":"KvzZ451k9KwYFdB70I7B"}
|
||||
104
02-ui/05-widgets/08-widget-tasks-2/01-date-selector/solution/dateselector.js
Executable file
104
02-ui/05-widgets/08-widget-tasks-2/01-date-selector/solution/dateselector.js
Executable file
|
|
@ -0,0 +1,104 @@
|
|||
/**
|
||||
* options:
|
||||
* yearFrom {number} начальный год в селекторе
|
||||
* yearTo {number} конечный год в селекторе
|
||||
* value {Date} текущая выбранная дата
|
||||
*/
|
||||
function DateSelector(options) {
|
||||
var self = this;
|
||||
|
||||
var monthNames = 'января февраля марта апреля мая июня июля августа сентября октября ноября декабря'.split(' ');
|
||||
|
||||
var value = options.value;
|
||||
|
||||
var elem;
|
||||
var yearSelect, monthSelect, daySelect;
|
||||
|
||||
function render() {
|
||||
var tmpl = _.template( options.template );
|
||||
elem = $('<div class="date-selector"/>').html(tmpl({
|
||||
yearFrom: options.yearFrom,
|
||||
yearTo: options.yearTo,
|
||||
dayTo: getLastDayOfMonth(value.getFullYear(), value.getMonth()),
|
||||
monthNames: monthNames
|
||||
}));
|
||||
|
||||
yearSelect = elem.find('.year');
|
||||
monthSelect = elem.find('.month');
|
||||
daySelect = elem.find('.day');
|
||||
|
||||
elem.on('change', onChange); // обычно оно не всплывает, но jQuery эмулирует всплытие
|
||||
self.setValue(value, true);
|
||||
}
|
||||
|
||||
this.getValue = function() {
|
||||
return value;
|
||||
};
|
||||
|
||||
this.setValue = function(newValue, quiet) {
|
||||
value = newValue;
|
||||
|
||||
yearSelect.val(value.getFullYear());
|
||||
monthSelect.val(value.getMonth());
|
||||
daySelect.val(value.getDate());
|
||||
|
||||
if (!quiet) {
|
||||
$(self).triggerHandler({
|
||||
type: "select",
|
||||
value: value
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
this.getElement = function() {
|
||||
if (!elem) render();
|
||||
return elem;
|
||||
};
|
||||
|
||||
function onChange(e) {
|
||||
|
||||
var selectType = e.target.className;
|
||||
|
||||
if (selectType == "month" || selectType == "year") {
|
||||
// поправить день с учетом месяца и, возможно, високосного года
|
||||
adjustDayOptions(+yearSelect.val(), +monthSelect.val());
|
||||
}
|
||||
|
||||
readValue(); // для простоты -- получим значения из всех селектов
|
||||
|
||||
$(self).triggerHandler({
|
||||
type: "select",
|
||||
value: value
|
||||
});
|
||||
}
|
||||
|
||||
function readValue() {
|
||||
// если я сделаю сначала value.setMonth(),
|
||||
// то может получится некорректная дата типа 31 марта -> 31 февраля,
|
||||
// которая автоскорректируется в 2 марта, т.е месяц не поставится.
|
||||
// поэтому сначала именно setDate, и так далее.
|
||||
value.setDate(daySelect.val());
|
||||
value.setMonth(monthSelect.val());
|
||||
value.setFullYear(yearSelect.val());
|
||||
}
|
||||
|
||||
function getLastDayOfMonth(year, month) {
|
||||
var date = new Date(year, month+1, 0);
|
||||
return date.getDate();
|
||||
}
|
||||
|
||||
function adjustDayOptions(year, month) {
|
||||
var maxDay = getLastDayOfMonth(year, month);
|
||||
|
||||
// укоротить селект, если дней стало меньше
|
||||
daySelect.children().filter(function() {
|
||||
return this.value > maxDay;
|
||||
}).remove();
|
||||
|
||||
// добавить дни, если новый месяц дольше
|
||||
for(var i = +daySelect.last().val(); i <= maxDay; i++) {
|
||||
daySelect.append(new Option(i, i));
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"name":"dateselector","plunk":"KvzZ451k9KwYFdB70I7B"}
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
/**
|
||||
* options:
|
||||
* yearFrom {number} начальный год в селекторе
|
||||
* yearTo {number} конечный год в селекторе
|
||||
* value {Date} текущая выбранная дата
|
||||
*/
|
||||
function DateSelector(options) {
|
||||
var self = this;
|
||||
|
||||
var monthNames = 'января февраля марта апреля мая июня июля августа сентября октября ноября декабря'.split(' ');
|
||||
|
||||
var value = options.value;
|
||||
|
||||
var elem;
|
||||
var yearSelect, monthSelect, daySelect;
|
||||
|
||||
function render() {
|
||||
var tmpl = _.template( options.template );
|
||||
elem = $('<div class="date-selector"/>').html(tmpl({
|
||||
yearFrom: options.yearFrom,
|
||||
yearTo: options.yearTo,
|
||||
dayTo: getLastDayOfMonth(value.getFullYear(), value.getMonth()),
|
||||
monthNames: monthNames
|
||||
}));
|
||||
|
||||
yearSelect = elem.find('.year');
|
||||
monthSelect = elem.find('.month');
|
||||
daySelect = elem.find('.day');
|
||||
|
||||
elem.on('change', onChange); // обычно оно не всплывает, но jQuery эмулирует всплытие
|
||||
self.setValue(value, true);
|
||||
}
|
||||
|
||||
this.getValue = function() {
|
||||
return value;
|
||||
};
|
||||
|
||||
this.setValue = function(newValue, quiet) {
|
||||
value = newValue;
|
||||
|
||||
yearSelect.val(value.getFullYear());
|
||||
monthSelect.val(value.getMonth());
|
||||
daySelect.val(value.getDate());
|
||||
|
||||
if (!quiet) {
|
||||
$(self).triggerHandler({
|
||||
type: "select",
|
||||
value: value
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
this.getElement = function() {
|
||||
if (!elem) render();
|
||||
return elem;
|
||||
};
|
||||
|
||||
function onChange(e) {
|
||||
|
||||
var selectType = e.target.className;
|
||||
|
||||
if (selectType == "month" || selectType == "year") {
|
||||
// поправить день с учетом месяца и, возможно, високосного года
|
||||
adjustDayOptions(+yearSelect.val(), +monthSelect.val());
|
||||
}
|
||||
|
||||
readValue(); // для простоты -- получим значения из всех селектов
|
||||
|
||||
$(self).triggerHandler({
|
||||
type: "select",
|
||||
value: value
|
||||
});
|
||||
}
|
||||
|
||||
function readValue() {
|
||||
// если я сделаю сначала value.setMonth(),
|
||||
// то может получится некорректная дата типа 31 марта -> 31 февраля,
|
||||
// которая автоскорректируется в 2 марта, т.е месяц не поставится.
|
||||
// поэтому сначала именно setDate, и так далее.
|
||||
value.setDate(daySelect.val());
|
||||
value.setMonth(monthSelect.val());
|
||||
value.setFullYear(yearSelect.val());
|
||||
}
|
||||
|
||||
function getLastDayOfMonth(year, month) {
|
||||
var date = new Date(year, month+1, 0);
|
||||
return date.getDate();
|
||||
}
|
||||
|
||||
function adjustDayOptions(year, month) {
|
||||
var maxDay = getLastDayOfMonth(year, month);
|
||||
|
||||
// укоротить селект, если дней стало меньше
|
||||
daySelect.children().filter(function() {
|
||||
return this.value > maxDay;
|
||||
}).remove();
|
||||
|
||||
// добавить дни, если новый месяц дольше
|
||||
for(var i = +daySelect.last().val(); i <= maxDay; i++) {
|
||||
daySelect.append(new Option(i, i));
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="http://code.jquery.com/jquery.min.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
|
||||
<script src="dateselector.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script type="text/template" id="date-selector-template">
|
||||
<select class="year">
|
||||
<% for(var year = yearFrom; year <= yearTo; year++) { %>
|
||||
<option value="<%=year%>"><%=year%></option>
|
||||
<% } %>
|
||||
</select>
|
||||
<select class="month">
|
||||
<% for(var month = 0; month <= 11; month++) { %>
|
||||
<option value="<%=month%>"><%=monthNames[month]%></option>
|
||||
<% } %>
|
||||
</select>
|
||||
<select class="day">
|
||||
<% for(var day = 1; day <= dayTo; 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>
|
||||
51
02-ui/05-widgets/08-widget-tasks-2/01-date-selector/solution/index.html
Executable file
51
02-ui/05-widgets/08-widget-tasks-2/01-date-selector/solution/index.html
Executable file
|
|
@ -0,0 +1,51 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="http://code.jquery.com/jquery.min.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
|
||||
<script src="dateselector.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script type="text/template" id="date-selector-template">
|
||||
<select class="year">
|
||||
<% for(var year = yearFrom; year <= yearTo; year++) { %>
|
||||
<option value="<%=year%>"><%=year%></option>
|
||||
<% } %>
|
||||
</select>
|
||||
<select class="month">
|
||||
<% for(var month = 0; month <= 11; month++) { %>
|
||||
<option value="<%=month%>"><%=monthNames[month]%></option>
|
||||
<% } %>
|
||||
</select>
|
||||
<select class="day">
|
||||
<% for(var day = 1; day <= dayTo; 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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue