lulu-ui日期选择器-周选择封装

最新推荐文章于 2024-05-31 16:25:46 发布

勇敢牛牛_

最新推荐文章于 2024-05-31 16:25:46 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： css/js 工作笔记文章标签： luluui

本文链接：https://blog.youkuaiyun.com/wxgxgp/article/details/84844008

工作笔记同时被 2 个专栏收录

20 篇文章

订阅专栏

css/js

1 篇文章

订阅专栏

本文介绍了一个功能，当用户选择一个日期后，系统将默认选中该日期及其后六天的时间，实现了周选择的功能。通过使用JavaScript和jQuery，文章详细解释了如何监听鼠标悬停事件并触发日期范围的选择，同时确保所选结束日期不会超过当前日期。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

功能：选择日期后，默认选中该日期一周内的时间

/**
 * 周选择
 *传入DateTime对象和options
 */
function weekDateSelectInit(dateTime,options) {

    $('body').on('mouseover', '.ui-date-container a.ui-date-item', function () {
        $(this).click(function () {
            var selectedTime = $(this).attr('data-date');
            var nowTime = getNowDateStr();
            var endTime = getDateByDays(new Date(selectedTime), 7);
            endTime = endTime >= nowTime ? nowTime : endTime;

            $('.ui-date-container').remove();
            $('label.ui-date-arrow').remove();

            var selector = dateTime.el.trigger.prevObject.selector;
            var o =  {
                value: selectedTime + ' 至 ' + endTime,
                max: getNowDateStr()
            };
            //合并原有opt
            var opt = $.extend({}, o, options);
            //创建一个新的daeTime
            $(selector).val('');
            dateTime = null;
            dateTime = new DateTime($(selector),opt);
            dateTime.show();
        })
    })
}


function getNowDateStr() {
    var d = new Date();
    var nY = d.getFullYear();
    var nM = (d.getMonth()+1)<10?"0"+(d.getMonth()+1):(d.getMonth()+1);
    var nD = d.getDate()<10?"0"+d.getDate():d.getDate();
    var nowTime =nY+'-'+nM+'-'+nD;
    return nowTime;
}
/**
 * @return {string}
 */
function getDateByDays(dd,days) {
    dd.setDate(dd.getDate()+days);
    var y = dd.getFullYear();
    var m = (dd.getMonth()+1)<10?"0"+(dd.getMonth()+1):(dd.getMonth()+1);
    var d = dd.getDate()<10?"0"+dd.getDate():dd.getDate();
    return y+"-"+m+"-"+d;
}