一周日期选择(周日--周六)

效果截图(日期范围,周日--周六),如下:

html代码:

<div class="ewb-date-link" data-num="0">
    <span class="last-year">上一年</span>
    <span class="last-month">上月</span>
    <span class="last-week">上周</span>
    <span class="this-week">本周</span>
    <span class="next-week">下周</span>
    <span class="next-month">下月</span>
    <span class="next-year">下一年</span>
</div>
<div class="ewb-date-info">
    <p class="ewb-date-range">
        <span class="start-date"></span> --- <span class="end-date"></span>
    </p>
</div>

工具类:(无需修改,复制就行

(function(win, $) {
    if (!window.Util) {
        window.Util = {};
    }
    $.extend(Util, {

    });
}(this, jQuery));

/**
 * 获取一周日期(周一至周日) 相关 Util 方法
 */
(function($, exports) {

    $.extend(exports, {
        //格式化日期:yyyy-MM-dd
        formatDate: function(date) {
            var myyear = date.getFullYear(),
                mymonth = date.getMonth() + 1,
                myweekday = date.getDate();
            mymonth = mymonth < 10 ? "0" + mymonth : mymonth;
            myweekday = myweekday < 10 ? "0" + myweekday : myweekday;
            return (myyear + "-" + mymonth + "-" + myweekday);
        },
        // 取开始日期
        getStartDate: function(_dom) {
            var arr = _dom.text().split("-");
            return {
                year: parseInt(arr[0]),
                month: parseInt(arr[1])
            }
        },
        // 取结束日期
        getEndDate: function(_dom) {
            var arr = _dom.text().split("-");
            return {
                year: parseInt(arr[0]),
                month: parseInt(arr[1])
            }
        },
        // 返回日期
        callBackDate: function(weekStartDate, weekEndDate) {
            return {
                startdate: Util.formatDate(weekStartDate),
                enddate: Util.formatDate(weekEndDate)
            }
        },
        //获得本周日期范围
        getThisWeek: function(year, month, day, nowday, successcallback) {
            successcallback(Util.callBackDate(new Date(year, month, day - nowday), new Date(year, month, day + (6 - nowday))));
        },
        //获得上周日期范围
        getLastWeek: function(year, month, day, nowday, successcallback) {
            successcallback(Util.callBackDate(new Date(year, month, day - nowday - 7), new Date(year, month, day - nowday - 1)));
        },
        //获得下周日期范围
        getNextWeek: function(year, month, day, nowday, successcallback) {
            successcallback(Util.callBackDate(new Date(year, month, day - nowday + 7), new Date(year, month, day - nowday + 13)));
        }
    });

}(jQuery, window.Util));

js代码:

(function(win, $) {

    var $dateLink = $(".ewb-date-link"),
        $lastWeek = $(".last-week", $dateLink),
        $thisWeek = $(".this-week", $dateLink),
        $nextWeek = $(".next-week", $dateLink),
        $lastMonth = $(".last-month", $dateLink),
        $nextMonth = $(".next-month", $dateLink),
        $lastYear = $(".last-year", $dateLink),
        $nextYear = $(".next-year", $dateLink),
        $dateRange = $(".ewb-date-range"),
        $startdate = $(".start-date", $dateRange),
        $enddate = $(".end-date", $dateRange);

    // 定义日期所用全局变量
    var now = new Date(), //当前日期
        nowDayOfWeek = now.getDay(), //今天本周的第几天
        nowDay = now.getDate(), //当前日
        nowMonth = now.getMonth(), //当前月
        nowYear = now.getFullYear(); //当前年

    // 渲染日期
    var renderDate = function(data) {
        $startdate.text(data.startdate);
        $enddate.text(data.enddate);
    }

    // 默认本周
    Util.getThisWeek(nowYear, nowMonth, nowDay, nowDayOfWeek, function(data) {
        renderDate(data);
    });

    // 本周点击
    $thisWeek.on('click', function(event) {
        event.preventDefault();
        $dateLink.attr("data-num", "0");

        // 所有全局变量恢复当前日期
        nowDayOfWeek = now.getDay(); //今天本周的第几天
        nowDay = now.getDate(); //当前日
        nowMonth = now.getMonth(); //当前月
        nowYear = now.getFullYear(); //当前年

        Util.getThisWeek(nowYear, nowMonth, nowDay, nowDayOfWeek, function(data) {
            renderDate(data);
        });

    });
    // 上周点击
    $lastWeek.on('click', function(event) {
        event.preventDefault();
        var num = $dateLink.attr("data-num");
        $dateLink.attr("data-num", parseInt(num) + 1);

        Util.getLastWeek(nowYear, nowMonth, nowDay, new Date(nowYear, nowMonth, nowDay).getDay() + parseInt(num) * 7, function(data) {
            renderDate(data);
        });

    });
    // 下周点击
    $nextWeek.on('click', function(event) {
        event.preventDefault();
        var num = $dateLink.attr("data-num");
        $dateLink.attr("data-num", parseInt(num) - 1);
        Util.getNextWeek(nowYear, nowMonth, nowDay, new Date(nowYear, nowMonth, nowDay).getDay() + parseInt(num) * 7, function(data) {
            renderDate(data);
        });
    });
    // 上月点击
    $lastMonth.on('click', function(event) {
        event.preventDefault();
        var num = $dateLink.attr("data-num", "0"),
            sdate = Util.getStartDate($startdate);
        nowYear = sdate.year;
        nowMonth = sdate.month - 2;
        Util.getThisWeek(nowYear, nowMonth, nowDay, new Date(nowYear, nowMonth, nowDay).getDay(), function(data) {
            renderDate(data);
        });
    });
    // 下月点击
    $nextMonth.on('click', function(event) {
        event.preventDefault();
        var num = $dateLink.attr("data-num", "0"),
            sdate = Util.getStartDate($startdate);
        nowYear = sdate.year;
        nowMonth = sdate.month;
        Util.getThisWeek(nowYear, nowMonth, nowDay, new Date(nowYear, nowMonth, nowDay).getDay(), function(data) {
            renderDate(data);
        });
    });
    // 上年点击
    $lastYear.on('click', function(event) {
        event.preventDefault();
        var num = $dateLink.attr("data-num", "0"),
            sdate = Util.getStartDate($startdate);
        nowYear = sdate.year - 1;
        nowMonth = sdate.month - 1;
        Util.getThisWeek(nowYear, nowMonth, nowDay, new Date(nowYear, nowMonth, nowDay).getDay(), function(data) {
            renderDate(data);
        });
    });
    // 下年点击
    $nextYear.on('click', function(event) {
        event.preventDefault();
        var num = $dateLink.attr("data-num", "0"),
            sdate = Util.getStartDate($startdate);
        nowYear = sdate.year + 1;
        nowMonth = sdate.month - 1;
        Util.getThisWeek(nowYear, nowMonth, nowDay, new Date(nowYear, nowMonth, nowDay).getDay(), function(data) {
            renderDate(data);
        });
    });

}(this, jQuery));

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值