一周日期选择（周一至周日）

最新推荐文章于 2022-11-23 18:17:01 发布

置顶 kai_800

最新推荐文章于 2022-11-23 18:17:01 发布

阅读量1.6k

点赞数

分类专栏：日期文章标签：前端 js html

本文链接：https://blog.csdn.net/qq_30640469/article/details/89133593

版权

日期专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了一种使用HTML、CSS和JavaScript实现的一周日期选择器，该选择器能够展示从周一到周日的日期范围，并提供了向前或向后切换周的功能。通过简单的UI设计和实用的JS代码，读者可以轻松地在网页上添加一个日期选择组件。

摘要由CSDN通过智能技术生成

一周日期选择（周一至周日）

效果图：

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));