我正在用我的风格构建一个日期选择器,直到现在它工作得非常好。它每次返回七天,开始日期是当前日期。如何处理日期选择器中的下一个和上一个按钮
现在我想,当用户点击下一步按钮,它显示接下来的七个日期,如果用户单击后退按钮,显示它回7个7日期。我怎样才能使用JavaScript?我已经得到了一整年的名单。你们有什么想法吗?
我正在用我的风格构建一个日期选择器,直到现在它工作得非常好。它每次返回七天,开始日期是当前日期。如何处理日期选择器中的下一个和上一个按钮
现在我想,当用户点击下一步按钮,它显示接下来的七个日期,如果用户单击后退按钮,显示它回7个7日期。我怎样才能使用JavaScript?我已经得到了一整年的名单。你们有什么想法吗?
您必须保留一个变量,指出您的列表正在显示的当前周。 每按一下next
/previous
按钮应增加/减少该变量accrodingly。
该变量可能包含引用一周中第一天的Date
对象。即
function getCurrentWeek() {
var dt = new Date();
if (dt.getDay() !== 0) {
dt.setDate(dt.getDate() - dt.getDay());
}
return dt;
}
function incrementWeeks (week, howMany) {
var next = new Date(week); // Copy it, to not modify original variable
next.setDate(next.getDate() + 7 * (howMany == undefined ? 1 : howMany));
return next;
}
现在eveytime你按下按钮,显示工作日列表 - 只是生成动态几天基于当前的一周。
这可能是这个样子:
var currentWeek = getCurrentWeek();
var dayStrings = ['su', 'ma', 'ti', 'ke', 'to', 'pe', 'la'];
document.getElementById('next-button').addEventListener('click', function() {
currentWeek = incrementWeeks(currentWeek, 1);
});
document.getElementById('previous-button').addEventListener('click', function() {
currentWeek = incrementWeeks(currentWeek, -1);
});
document.getElementById('show-week-button').addEventListener('click', function() {
var select = document.getElementById('show-week-select');
select.innerHTML = '';
for (var dt = currentWeek, next = incrementWeeks(dt, 1);
+dt < +next;
dt.setDate(dt.getDate() + 1)) {
var option = document.createElement('option');
option.text = dayStrings[dt.getDay()] + ' ' + dt.getDate() + '.' (dt.getMonth() + 1) + '.' + dt.getFullYear();
option.value = +dt;
select.options.add(option);
}
// Show the SELECT
// `click()` may not work, so you can try this (http://stackoverflow.com/questions/249192/how-can-you-programmatically-tell-an-html-select-to-drop-down-for-example-due)
// or use a js-based dropdown
// or just listen to when the select element opens instead of a simple click
select.click();
});
此代码是未经测试。我希望你明白这个主意。
基于丹尼尔的想法,我写了一个函数,它返回两个参数的星期几:点击数量和当前年份。
function getDaysOfAweek(clickQty, daysofyear) {
var aweek = new Array();
if(clickQty * 7 > daysofyear.length){
for(i=0; i < 7; i++){
aweek.push(daysofyear[i]);
}
} else {
for (var i = 7*(clickQty-1); i < clickQty*7; i++) {
if (typeof daysofyear[i] === "object") {
aweek.push(daysofyear[i]);
}
}
}
return aweek;
}
getDayOfYear功能
function getDaysOfYear(year) {
var currentDate = new Date();
var days = new Array();
while(currentDate.getMonth() < 12 && currentDate.getYear() <= year){
days.push(getPaivaObj(currentDate));
currentDate.setDate(currentDate.getDate()+1);
}
return days;
}
而最后一步只能算点击量,希望能帮助的人,谁得到同样的问题我。
谢谢你,这段代码很难理解,但是最重要的是我知道我下一步做什么,再次感谢。 –