一周日期选择(周一至周日)

一周日期选择(周一至周日)

效果图:

html代码:

<div class="ewb-date-link">
    <span data-number="-365">上一年</span>
    <span data-number="-30">上月</span>
    <span data-number="-7">上周</span>
    <span data-number="0">本周</span>
    <span data-number="7">下周</span>
    <span data-number="30">下月</span>
    <span data-number="365">下一年</span>
</div>
<div class="ewb-date-info">
    <p class="ewb-date-range" id="dateRange"></p>
</div>

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

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

    });
}(this, jQuery));

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

    var dateObj,
        pianyiliang = 0,
        dsReg = /^\d{4}[/-]\d{1,2}[/-]\d{1,2}$/;

    $.extend(exports, {
        //获取偏移日期
        getNewDay: function(dateTemp, days) {
            var dateTemp = dateTemp.split("-"),
                nDate = new Date(dateTemp[1] + '-' + dateTemp[2] + '-' + dateTemp[0]), //转换为MM-DD-YYYY格式
                millSeconds = Math.abs(nDate) + (days * 24 * 60 * 60 * 1000),
                rDate = new Date(millSeconds),
                year = rDate.getFullYear(),
                month = rDate.getMonth() + 1,
                date = rDate.getDate();
            month = month < 10 ? "0" + month : month;
            date = date < 10 ? "0" + date : date;
            return (year + "-" + month + "-" + date);
        },
        //获得当前时间
        getnowDate: function() {
            var now = new Date(), //当前日期
                nowDay = now.getDate(), //当前日
                nowMonth = now.getMonth(), //当前月
                nowYear = now.getYear(); //当前年
            nowYear += (nowYear < 2000) ? 1900 : 0; //
            nowDate = new Date(nowYear, nowMonth, nowDay);
            return Util.formatDate(nowDate);
        },
        //获得开端日期
        getWeekStartDate: function(dayTemp) {
            if (dayTemp.match(dsReg)) {
                var presentDate = new Date(dayTemp),
                    today = presentDate.getDay() !== 0 ? presentDate.getDay() : 7;
                return Util.formatDate(new Date(presentDate.getTime() - (today - 0 - 1) * 24 * 60 * 60 * 1000));
            }
        },
        //获得停止日期
        getWeekEndDate: function(dayTemp) {
            if (dayTemp.match(dsReg)) {
                var presentDate = new Date(dayTemp),
                    today = presentDate.getDay() !== 0 ? presentDate.getDay() : 7;
                return Util.formatDate(new Date(presentDate.getTime() - (today - 6 - 1) * 24 * 60 * 60 * 1000));
            }
        },
        //格式化日期: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);
        },
        //获取日期范围
        getDateRange: function(num, successcallback) {
            if (num == 0) {
                pianyiliang = 0;
            } else {
                pianyiliang += num;
            }
            var nowdaypianyi = Util.getNewDay(Util.getnowDate(), pianyiliang),
                startdate = Util.getWeekStartDate(nowdaypianyi.replace(/-/g, "/")),
                enddate = Util.getWeekEndDate(nowdaypianyi.replace(/-/g, "/"));
            var obj = {
                startdate: startdate,
                enddate: enddate
            }
            successcallback(obj);
        }
    });
    
}(jQuery, window.Util));

js代码:

(function(win, $) {

    var $dateLink = $(".ewb-date-link"), //按钮
        $dateRange = $("#dateRange"); //显示日期容器

    // 渲染日期
    var renderWeekDate = function(data) {
        $dateRange.html(data.startdate + " --- " + data.enddate);
    }

    // 默认本周
    Util.getDateRange(0, function(data) {
        renderWeekDate(data);
    });

    // 按钮点击
    $dateLink.on('click', 'span', function(event) {
        event.preventDefault();
        var num = parseInt($(this).data("number"));
        Util.getDateRange(num, function(data) {
            renderWeekDate(data);
        });
    });

}(this, jQuery));

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值