【问题标题】:How to display days in a grid by weeks in php?如何在php中按周显示网格中的天数?
【发布时间】:2019-06-22 02:18:17
【问题描述】:

我正在尝试以网格或表格形式显示一个月中的天数。我正在考虑使用 Bulma 或 bootstrap 来处理网格/表格。网格基于 5 行和 7 列。我不知道如何去实施一周中正确的日子。每周应按 div 分组,其中包含日期。这是我目前所拥有的:

  <?php

  $row = '';
  $startDate = 12/30/2018;
  $numDays = 35;
  $datesArr = array();
  $weekCounter = 1;

  for ($i = 0; $i <= numDays; i++) {
     $row .= '<div>';
     $date = date('m/j/Y', strtotime("$startDate +$i days"));
     $datesArr[] = $date;

     if ($i % 8 == 0) {
        $row .= '<p>Week ' . $weekCounter++ . '</p>';
     } else {
        $row .= '<p>'.$date . ' - ' . date('l'), strtotime($date)). '</p>';
     }

     $row .= '</div>';
  }
  echo $row;
 ?>

这是我当前的输出:

第 1 周

2018 年 12 月 31 日-星期一

01/1/2019-星期二

2019 年 1 月 2 日-星期三

2019 年 1 月 3 日-星期四

2019 年 1 月 4 日-星期五

01/5/2019-星期六

2019 年 1 月 6 日-星期日

第 2 周

01/8/2019-星期二

2019 年 1 月 9 日-星期三

2019 年 1 月 10 日-星期四

2019 年 1 月 11 日-星期五

2019 年 1 月 12 日-星期六

2019 年 1 月 13 日-星期日

2019 年 1 月 14 日-星期一

第 3 周

2019 年 1 月 16 日-星期三

2019 年 1 月 17 日-星期四

2019 年 1 月 18 日-星期五

01/19/2019-星期六

2019 年 1 月 20 日-星期日

2019 年 1 月 21 日-星期一

01/22/2019-星期二

第 4 周

01/24/2019-星期四

2019 年 1 月 25 日-星期五

01/26/2019-星期六

2019 年 1 月 27 日-星期日

2019 年 1 月 28 日-星期一

01/29/2019-星期二

2019 年 1 月 30 日-星期三

第 5 周

2019 年 2 月 1 日-星期五

2019 年 2 月 2 日-星期六

2019 年 2 月 3 日-星期日

【问题讨论】:

  • 欢迎来到 Stack Overflow。其中大部分将由 CSS 而不是 PHP 处理。我会建议一个表来构建视图。可能想看看 jQuery UI DatePicker,看看它是如何显示的。

标签: php


【解决方案1】:
<?php

$row = '';
$startDate = '12/30/2018';
$numDays = 35;
$datesArr = array();
$weekCounter = 1;

for ($i = 0; $i <= $numDays; $i++) {

    $date = date('m/j/Y', strtotime("$startDate +$i days"));
    $datesArr[] = $date;

    // New div at start of week
    if (date("l", strtotime($date)) == "Sunday") {
        $row .= "<div style=\"float: left; margin: 10px;\">";
        $row .= '<p>Week ' . $weekCounter++ . '</p>';
    }

    $row .= '<p>'. $date . ' - ' . date("l", strtotime($date)) . '</p>';

    // close div at end of week
    if (date("l", strtotime($date)) == "Saturday") {
        $row .= "</div>"; 
    }

}

echo $row;

?>

【讨论】:

  • 我认为我的实施不正确,我错过了第一周后一周的第一个星期一。
  • 我刚刚将其添加到我的答案中
  • 另外,我现在看到它只是一个包裹整个事物的大 div,而不是把它分成几个星期。寻找一种将每周包装在自己的 div 中的好方法。
  • 谢谢。你会建议一种不同的方式来实现这一点,还是你认为我的第一种方法是有效的?由于我的个人时间限制,我几乎试图尽快解决它。
  • 这应该是相当简单的,特别是如果你添加更多的条件,比如if (date("l", strtotime($date)) == "Monday"),然后在顶部添加一个 div,如果日期是星期日,则添加一个结束 div 标签。
【解决方案2】:

您也可以考虑使用 jQuery UI Datepicker。您可以使用 AJAX 获取开始日期和天数。然后绘制日历。

$(function() {
  function getDateInfo() {
    $.getJSON("dateInfo.php", function(data){
      drawCal(data.startDate, data.numDays, $(".calendar"));
    })
  }

  function drawCal(sd, nd, tObj) {
    var format = "mm/dd/yy";
    var min = $.datepicker.parseDate(format, sd);
    var max = new Date();
    max.setDate(min.getDay() + nd);
    console.log(sd, max);
    tObj.html("");
    tObj.datepicker({
      dateFormat: format,
      minDate: min,
      maxDate: max,
      numberOfMonths: [3, 1]
    });
  }

  drawCal("12/31/2018", 35, $(".calendar"));
});
.ui-datepicker-group {
  width: 100%;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="calendar"></div>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-12-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多