Add calendar date into datatable headers

Question

I was able to add a week picker using this Git repository:

https://github.com/trco/bootstrap-weekpicker#getweek

When the user selects a week, the selected week is sent to a PHP script which runs a query and returns data to a datatable:

The datatable just shows where a particular rep will be located during that selected week.

What I need to do now is add the dates for each of the headers in the datatable.

For example, in the image above, the headers would look like this for week 30:

Monday - 7/22 | Tuesday - 7/23 | Wednesday - 7/24 | Thursday - 7/25 | Friday - 7/26

And of course, when week 31 is selected, the headers should change to the corresponding dates.

In the HTML, I have added some span classes to the datatable:

<table id="example1">
  <thead>
    <tr>
      <th>Monday - <span class="date_mon"></span></th>
      <th>Tuesday - <span class="date_tue"></span></th>
      <th>Wednesday - <span class="date_wed"></span></th>
      <th>Thursday - <span class="date_thu"></span></th>
      <th>Friday - <span class="date_fri"></span></th>
    </tr>
  </thead>
</table>

I was thinking I could grab the weekly dates (somehow) and insert said dates into the respective span classes.

I had suggested to my team that the database gets updated to include the weekly dates. That way I could just grab the dates from the same query that brings back the data. However, that idea was opposed, even though I know that would be the simplest way to get this to work.

With that said, is there is a way to grab the dates from the same Git repository, or any other method?

Edit

So I found this:

Get week number (in the year) from a date PHP

The answer there seems close to what I'm looking for. I just need to be able to extract the dates from the week selected.

I think you can add it by a php code.. create an algorithm or google one then on each datatable you can use `` in your HTML code instead of just `Monday -` — Youssef Hossam, Jul 25 '19 at 14:27

John Beasley · Accepted Answer · 2019-07-25T15:44:37.453

I was able to solve this using a modification of the answer found here:

PHP get start and end date of a week by weeknumber

Here is how the modification looks:

<?php
  if(isset($_POST['selcriteria']))
  {
    $value = $_POST['selcriteria'];

    $week = $value['week'];
    $year = $value['year'];

    function getStartAndEndDate($week, $year) 
    {
      $dto = new DateTime();
      $dto->setISODate($year, $week);
      $ret['monday'] = $dto->format('m-d');
      $dto->modify('+1 days');
      $ret['tuesday'] = $dto->format('m-d');
      $dto->modify('+1 days');
      $ret['wednesday'] = $dto->format('m-d');
      $dto->modify('+1 days');
      $ret['thursday'] = $dto->format('m-d');
      $dto->modify('+1 days');
      $ret['friday'] = $dto->format('m-d');
      return $ret;
    }

    $week_array = getStartAndEndDate($week,$year);

    echo json_encode($week_array);
  }
?>

Then on the JQuery side, I just pass over the object selcriteria which contains week and year:

$.post('process/getWeeklyDate.php', {selcriteria:selcriteria}, function(data)
{
    var obj = JSON.parse(data); 
    var monday = obj.monday;
    var tuesday = obj.tuesday;
    var wednesday = obj.wednesday;
    var thursday = obj.thursday;
    var friday = obj.friday;

    $('.date_mon').text(monday);
    $('.date_tue').text(tuesday);
    $('.date_wed').text(wednesday);
    $('.date_thu').text(thursday);
    $('.date_fri').text(friday);
});

In short, I was able to set the text to the spans in the headers of the datatable.

Nice.

Well its kinda the same thing as I have mentioned before but GJ mate :) — Youssef Hossam, Jul 25 '19 at 16:55

Add calendar date into datatable headers

Edit

1 Answers1