Question

我想用jQuery创建一个星期计划滑块。

当用户点击左箭头时，它应该加载上周的日期（从星期一开始），右箭头从下周开始等等。

到目前为止，这是我的代码：

/* DATES TO FILL ThE CALENDAR */

var curr = new Date; // get current date
var first = curr.getDate() - curr.getDay()+1; // First day is the day of the month - the day of the week
var last = first + 6; // last day is the first day + 6
var firstday = new Date(curr.setDate(first));
var lastday = new Date(curr.setDate(last));
var daysTD = $('.days-tr td');
var actualDate= new Date( Date.parse( firstday ) ); 
var i=0;


 daysTD.each(function(){
    var day = new Date(curr.setDate(first+i));
    $(this).text(day.format('d M'));
        i++;
 });

var scheduleLeft = $('.schedule-nav .schedule-left-arrow');
var scheduleRight = $('.schedule-nav .schedule-right-arrow');


    scheduleRight.click(function () {

    });
    scheduleLeft.click(function () {

    });

我使用Date format script格式化日期输出。

我应该放什么scheduleRight.click（function（））和scheduleLeft.click（function（）??有什么想法吗？

Answer 1

我找到了解决方案。我用momentjs来编写它。这是代码：

/*DATES TO FILL ThE CALENDAR */

var daysTD = $('.days-tr td');
var workoutsTD =$('.workout-tr td')
var actualWeek= moment();
var monthText = $('.month-text');
var scheduleArray= [];
var i=0;

function fillTheDates(mondayDate){
    var i=1;
    var tmpdate= moment(mondayDate);
    //filling month text 
    monthText.text(mondayDate.format('MMMM YYYY'));

    // filling dates td 
    daysTD.each(function(){
    var dzien = mondayDate.day(i);
    $(this).text(dzien.format('ddd D MMMM'));  
    i++;    
    });

    i=1;
    //adding data atributes to identificate columns later in array
    workoutsTD.each(function(){
        var dzien = tmpdate.day(i);
        $(this).attr("data-day",dzien.format('L'));
        i++;
    });
}   


scheduleRight.click(function () {
    actualWeek = moment(actualWeek).add(6,'d');
    fillTheDates(actualWeek);
});

scheduleLeft.click(function () {
    previousWeek = moment(actualWeek);
    previousWeek = previousWeek.subtract(6, 'days');
    actualWeek = moment(previousWeek);
    fillTheDates(previousWeek);
});

周滑块jquery，从上周/下周开始获取日期/。

1 个答案: