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函数对日期数组进行排序,确保输出结果是按日期顺序排列的。


@漏刻有时

相关推荐
Myli_ing15 分钟前
考研倒计时-配色+1
前端·javascript·考研
余道各努力,千里自同风18 分钟前
前端 vue 如何区分开发环境
前端·javascript·vue.js
软件小伟27 分钟前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾1 小时前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧1 小时前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm1 小时前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
asleep7011 小时前
第8章利用CSS制作导航菜单
前端·css
hummhumm1 小时前
第 28 章 - Go语言 Web 开发入门
java·开发语言·前端·python·sql·golang·前端框架
幼儿园的小霸王2 小时前
通过socket设置版本更新提示
前端·vue.js·webpack·typescript·前端框架·anti-design-vue
疯狂的沙粒2 小时前
对 TypeScript 中高级类型的理解?应该在哪些方面可以更好的使用!
前端·javascript·typescript