layui框架实战案例(25):laydate中mark的数据后端生成

mark,自定义日期标记。该属性是对 calendar 属性的进一步延伸,灵活度更高。属性可批量设置多个日期标记,如:

javascript 复制代码
mark: {
  '0-10-14': '生日', //每年每月的某一天
  '0-0-10': '工资', // 每月 10 号
  '2008-8-8': '开幕', // 指定的日期
}

其中日期的格式必须是2008-8-8,而不能是2024-03-07,即当月份和天数是个位数时,不能用0补足。

场景描述

如在mysql数据库中遍历循环出对应的时间阶段,格式如何:

php 复制代码
// 定义多组起始和结束日期
$datePairs = [
    ['start' => '2023-03-12 08:00', 'end' => '2023-03-13 12:00'],
    ['start' => '2023-03-16 08:00', 'end' => '2023-03-17 12:00'],
    ['start' => '2023-03-19 08:00', 'end' => '2023-03-20 12:00'],
    ['start' => '2023-04-01 09:00', 'end' => '2023-04-03 15:00'],
];

封装函数

php 复制代码
function generateDateRanges($datePairs)
{
    //初始化最终合并的日期数组
    $mergedDateArray = [];

    //遍历每一组起始和结束日期
    foreach ($datePairs as $pair) {
        $startDateStr = $pair['start'];
        $endDateStr = $pair['end'];

        //创建DateTime对象
        $startDate = new DateTime($startDateStr);
        $endDate = new DateTime($endDateStr);

        //将起始日期的时间设置为午夜开始
        $startDate->setTime(0, 0, 0);

        //临时数组,用于存储当前日期对的日期范围
        $tempDateArray = [];

        //循环遍历当前日期对的日期范围
        $currentDate = clone $startDate; //克隆起始日期,以避免修改原始对象
        while ($currentDate <= $endDate) {
            //只添加日期部分(不包括时间)到临时数组中
            $tempDateArray[] = $currentDate->format('Y-n-j');
            //将当前日期增加一天
            $currentDate->modify('+1 day');
        }

        //将当前日期对的日期范围合并到最终数组中
        $mergedDateArray = array_merge($mergedDateArray, $tempDateArray);
    }

    //去除重复日期(如果需要)
    $mergedDateArray = array_unique($mergedDateArray);

    //按日期顺序排序(如果需要)
    sort($mergedDateArray);

    //转换日期格式,并生成你想要的输出格式
    $output = [];
    foreach ($mergedDateArray as $date) {
        $output[$date] = '';
    }

    //排序输出数组(如果需要)
    ksort($output);
    return $output;
}
  • 使用$currentDate->format('Y-n-j')来格式化日期,其中Y代表四位数的年份,n代表不带前导零的月份,j代表不带前导零的天数。这样,输出的日期将不会包含任何前导零;

  • 运行上述代码将得到一个日期数组,其中的键是格式化为Y-n-j的日期字符串,值则是空字符串。如果想要包含其他的值,修改 r e s u l t [ result[ result[formattedDate] = '';

  • 在遍历每个日期范围时,对$endDate使用了modify('+1 day'),这是因为DateTime对象在比较时是不包含结束日期那一天的。所以,人为地增加一天,以确保包含结束日期那天的数据。

  • 使用array_unique函数来去除数组中的重复日期(尽管在这个特定例子中由于我们按日期顺序添加,所以实际上不会有重复,但保留这一步可以作为一般性处理)。然后,使用sort函数对日期数组进行排序,确保输出结果是按日期顺序排列的。


@漏刻有时

相关推荐
QQ1__8115175151 小时前
Spring boot名城小区物业管理系统信息管理系统源码-SpringBoot后端+Vue前端+MySQL【可直接运行】
前端·vue.js·spring boot
钛态1 小时前
前端微前端架构:大项目的救命稻草还是自找麻烦?
前端·vue·react·web
一粒黑子1 小时前
【实战解析】阿里开源 PageAgent:纯前端 GUI Agent,一行JS让网页支持自然语言操控
前端·javascript·开源
独角鲸网络安全实验室1 小时前
2026微信小程序抓包全解析:从实操落地到合规风控,解锁前端调试新范式
前端·微信小程序·小程序·抓包·系统代理绕过·https证书严格校验·进程隔离
紫微AI1 小时前
前端文本测量成了卡死一切创新的最后瓶颈,pretext实现突破了
前端·人工智能·typescript
GISer_Jing1 小时前
AI前端(From豆包)
前端·aigc·ai编程
IT枫斗者1 小时前
前端部署后如何判断“页面是不是最新”?一套可落地的版本检测方案(适配 Vite/Vue/React/任意 SPA)
前端·javascript·vue.js·react.js·架构·bug
测试修炼手册1 小时前
[测试技术] 深入理解 JSON Web Token (JWT)
前端·json
AI老李1 小时前
2026 年 Web 前端开发的 8 个趋势!
前端
里欧跑得慢1 小时前
15. Web可访问性最佳实践:让每个用户都能平等访问
前端·css·flutter·web