PHP - Months In Selected Date Range.

I am currently working on a date range script and wondering if anybody think of an easier way to do this, doing up to next 8 weeks?  This one starts on a Sunday. I also need to do one starting on a Monday (will figure that one later)

$thisweek = date("Y-m-d");
$week = date('w', strtotime($thisweek));
$date = new DateTime($thisweek);
$firstWeek = $date->modify("-".$week." day")->format("M d");
$endWeek = $date->modify("+6 day")->format("M d");
echo $firstWeek." - ";
echo $endWeek;

$nextweek = date(("Y-m-d"), strtotime("+7 Days"));
$week1 = date('w', strtotime($nextweek));
$date1 = new DateTime($nextweek);
$firstWeek1 = $date1->modify("-".$week1." day")->format("M d");
$endWeek1 = $date1->modify("+6 day")->format("M d");
echo $firstWeek1." - ";
echo $endWeek1;

Hi i have the following code

$sql= "SELECT * FROM income WHERE month(date) between '04' and '12' and year(date) between 2020 and 2020";
 

This obviously selects all the information from April 2020 to December 2020

How do i change this to add a date as well for example if i wanted to display all the information from April 6th 2020 to December 5th 2020 ?

$criteria = array('FamilyName', 'FirstName', 'OtherNames', 'NRCNo', 'PassportNo', 'Gender', 'IncidenceCountryID', 'Status', 'OffenceKeyword', 'AgencyID', 'CountryID', 'IncidenceCountryID' );
    $likes = "";
    $url_criteria = '';
    foreach ( $criteria AS $criterion ) {
            if ( ! empty($_POST[$criterion]) ) {
                    $value = ($_POST[$criterion]);
                    $likes .= " AND `$criterion` LIKE '%$value%'";
                    $url_criteria .= '&'.$criterion.'='.htmlentities($_POST[$criterion]);
            } elseif ( ! empty($_GET[$criterion]) ) {
                    $value = mysql_real_escape_string($_GET[$criterion]);
                    $likes .= " AND `$criterion` LIKE '%$value%'";
                    $url_criteria .= '&'.$criterion.'='.htmlentities($_GET[$criterion]);
            } //var_dump($likes);
    }
    $sql = "SELECT * FROM t_persons WHERE PersonID>0" . $likes . " ORDER BY PersonID DESC";

SELECT
report_daily_id,
report_date,
emp_id,
emp_fullname,
emp_dept,
emp_branch
prod_line
calls,
tk_time,
hld_time,
ac_time,
tran_calls,
work_time,
tran_rate,
ah_time
FROM daily_report
GROUP BY emp_id, emp_fullname, emp_branch, emp_dept, prod_line

SUM(calls) AS 'Total Calls'
SUM(tk_time) / SUM(calls) AS 'Talk Time'
SUM(hld_time) / SUM(calls) AS 'Held Time'
SUM(ac_time) / SUM(calls) AS 'AC Time'
SUM(tran_calls) AS 'Total Trans'
SUM(tran_calls) / SUM(calls) AS 'Tran Rate'
SUM(ah_time) / SUM(calls) AS 'AH Time'

I'm creating a line graph using ChartJs. I wanted to display my data according to the month selected by the user. For example, if the user select "2021-03" all the order that is made in the month of March will be plotted in the graph. It works well for the current month, but it does not work for the selected month. 

I use Ajax to get the data but i do not know why my graph does not shown when i click on my `loadchart();` button. Can anyone enlighten me how can i do it? Because i do not know what mistake did i made here. Any kind of explanation will be appreciated. Thanks!

This is the where i place my `loadchart()` button and also the javascript to plot the graph.

  <div class="col-md-12 form-group">
            <div class="card" style="box-shadow: 0 0 8px rgb(0,0,0,0.3)">
                <div class="row">
                   <div class="col col-lg-1"></div>
                  <div class="col-2 my-auto">
                    <input type="month" id="month" class="form-control" value="<?php echo date('Y-m'); ?>">
                  </div>

                   <div class="col-2 my-auto">
                    <button type="button" class="btn btn-info" onclick="loadchart();">
                      <i class="nc-icon nc-zoom-split"></i>
                    </button>
                  </div>
                </div>
                <div id="loadchart">
              <h6 class="text-muted text-center p-3"><i class="fa fa-line-chart"></i> Daily Gross Sales (Current Month)</h6>
              <div  class="card-body">
                <canvas id="attChart"></canvas>
              </div>
            </div>
            </div>
          </div>

        </div>
      </div>
      
    </div>
  </div>
  
  <!-- Chart JS -->
  <script src="./assets/js/plugins/chartjs.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <?php
  $days = array();
  $gross_sales = array();
  $average_sales = array();

  $type = CAL_GREGORIAN;
  $month = date('n'); // Month ID, 1 through to 12.
  $year = date('Y'); // Year in 4 digit 2009 format.
  $day_count = cal_days_in_month($type, $month, $year); // Get the amount of days

  //loop through all days
  for ($i = 1; $i <= $day_count; $i++) {
    $sql = "SELECT *, SUM(purchase_price) as purchase_price FROM ordered_items WHERE DAY(order_datetime) = '$i' AND MONTH(order_datetime) = MONTH(NOW()) AND YEAR(order_datetime) = YEAR(NOW()) AND order_status = 5 ";
    $query = $conn->query($sql);
    $total = $query->num_rows;
    $row = $query->fetch_assoc();

      
    if($row['purchase_price'] != 0)
    {      
      $gross_sales[] = $row['purchase_price'];
    }
      
    else if ($row['purchase_price'] == 0 && $i <= date('d')) {
      $gross_sales[] = 0;
    }

    $average_sales[] =  $row['purchase_price'] / $day_count;

    $day =  $i.'/'.$month; //format date
    array_push($days, $day);
  }

  $days = json_encode($days);
  $daily_gross_sales = json_encode($gross_sales);
  $average_gross_sales =  json_encode($average_sales);

?>
  <script>
    const colors = {
      colorcode: {
        fill: '#51cbce',
        stroke: '#51cbce',
      },
    
    };
    var ctx2 = document.getElementById("attChart").getContext("2d");
    const attChart = new Chart(ctx2, {
      type: 'line',
      data: {
        labels: <?php echo $days; ?>,
        
        //labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        datasets: [{
          label: "Gross Sales: RM",
          fill: true,
          //backgroundColor: colors.colorcode.fill,
          pointBackgroundColor: colors.colorcode.stroke,
          borderColor: colors.colorcode.stroke,
          pointHighlightStroke: colors.colorcode.stroke,
          borderCapStyle: 'dot',
          pointRadius: 5,
          pointHoverRadius: 5,
          pointStyle: 'dot',
          data: <?php echo $daily_gross_sales; ?>,
          showLine: true
        },
        {
          label: "Average Sales: RM",
          fill: true,
          //backgroundColor: colors.colorcode.fill,
          pointBackgroundColor:   '#FF0000',
          borderColor: ' #FF0000 ',
          pointHighlightStroke: colors.colorcode.stroke,
          borderCapStyle: 'dot',
          pointRadius: 5,
          pointHoverRadius: 5,
          pointStyle: 'dot',
          data: <?php echo $average_gross_sales; ?>,
          showLine: true
        }

        ]
      },

      options: {
        responsive: true,
        
        // Can't just just `stacked: true` like the docs say
        scales: {
          yAxes: [{
            stacked: false,
            gridLines: {
              display: true,
              color: "#dee2e6"
            },
            ticks: {
              stepSize: 100000,
              callback: function(tick) {
                return 'RM'+tick.toString();
              }
            }
          }],
          
          xAxes: [{
            stacked: false,
            gridLines: {
              display: false
            },
          }]
          
        },
        animation: {
          duration: 3000,
        },
        
        legend:{
          display: false,
        }
      }
    });
  </script>

This is my AJAX method 

   <script type="text/javascript">
    function loadchart()
    {
     $('#spin1').show();
     var month= $('#month').val();
     //alert(date);
      var data = {     // create object
        month: month,
        
      }
      $.ajax({
        method:"GET",
        data:data,
        url:"includes/loadchart.php",
        success:function(data)
        {
            $('#loadchart').html(data);
        }
      });

    }
  </script>

This is where i use to load the graph whenever a month is selected. (loadchart.php)

<?php
include '../session.php';
if(isset($_GET['month']))
{
	$months = $_GET['month'];
?>

 <h6 class="text-muted text-center p-3"><i class="fa fa-line-chart"></i> Daily Gross Sales (<?php echo $months ?>)</h6>
              <div id="loadchart" class="card-body">
                <canvas id="attChart"></canvas>
              </div>
            </div>
          </div>

        </div>
      </div>
      
    </div>
  </div>
  
  <!-- Chart JS -->
  <script src="./assets/js/plugins/chartjs.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

  <?php
  $days = array();
  $gross_sales = array();
  $average_sales = array();

  $type = CAL_GREGORIAN; // Gregorian (localized) calendar
  $month = date('n'); // Month ID, 1 through to 12.
  $year = date('Y'); // Year in 4 digit 2009 format.
 
  $day_count = cal_days_in_month($type, $month, $year); // Get the amount of days

  //loop through all days
  for ($i = 1; $i <= $day_count; $i++) {
      $sql = "SELECT *, SUM(purchase_price) as purchase_price FROM ordered_items WHERE DAY(order_datetime) = '$i' AND MONTH(order_datetime) = MONTH('".$months."') AND YEAR(order_datetime) = YEAR('".$months."') AND order_status = 5 ";
    $query = $conn->query($sql);
    $total = $query->num_rows;
    $row = $query->fetch_assoc();

      
    if($row['purchase_price'] != 0)
    {      
      $gross_sales[] = $row['purchase_price'];
    }
      
    else if ($row['purchase_price'] == 0 && $i <= date('d')) {
      $gross_sales[] = 0;
    }

    $average_sales[] =  $row['purchase_price'] / $day_count;

    $day =  $i.'/'.$month; //format date
    array_push($days, $day);
  }

  $days = json_encode($days);
  $daily_gross_sales = json_encode($gross_sales);
  $average_gross_sales =  json_encode($average_sales);

?>
  <script>
    const colors = {
      colorcode: {
        fill: '#51cbce',
        stroke: '#51cbce',
      },
    
    };
    var ctx2 = document.getElementById("attChart").getContext("2d");
    const attChart = new Chart(ctx2, {
      type: 'line',
      data: {
        labels: <?php echo $days; ?>,
        
        //labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        datasets: [{
          label: "Gross Sales: RM",
          fill: true,
          //backgroundColor: colors.colorcode.fill,
          pointBackgroundColor: colors.colorcode.stroke,
          borderColor: colors.colorcode.stroke,
          pointHighlightStroke: colors.colorcode.stroke,
          borderCapStyle: 'dot',
          pointRadius: 5,
          pointHoverRadius: 5,
          pointStyle: 'dot',
          data: <?php echo $daily_gross_sales; ?>,
          showLine: true
        },
        {
          label: "Average Sales: RM",
          fill: true,
          //backgroundColor: colors.colorcode.fill,
          pointBackgroundColor:   '#FF0000',
          borderColor: ' #FF0000 ',
          pointHighlightStroke: '#FF0000',
          borderCapStyle: 'dot',
          pointRadius: 5,
          pointHoverRadius: 5,
          pointStyle: 'dot',
          data: <?php echo $average_gross_sales; ?>,
          showLine: true
        }

        ]
      },

      options: {
        responsive: true,
        
        // Can't just just `stacked: true` like the docs say
        scales: {
          yAxes: [{
            stacked: false,
            gridLines: {
              display: true,
              color: "#dee2e6"
            },
            ticks: {
              stepSize: 100000,
              callback: function(tick) {
                return 'RM'+tick.toString();
              }
            }
          }],
          
          xAxes: [{
            stacked: false,
            gridLines: {
              display: false
            },
          }]
          
        },
        animation: {
          duration: 3000,
        },
        
        legend:{
          display: false,
        }
      }
    });
  </script>
  
<?php	
}
?>

I have this function where i want to pass the month and year according to the date drop down that is chosen by the user. But can't seem to get the selected month and year. But instead, i got the month and year for now (which is April 2020). Can any one show me how can i achive this? I mean how can i pass the month and year selected to my `allreport-summary.php` page. It would be better if you guys can show me examples of codes on how can i implement this. Any help will be appreciated. Thank you so much. cheers! 

  <div class="row">
                  <div class="col-4 my-auto">
                    <input type="month" id="month" class="form-control" value="<?php echo date('Y-m'); ?>">
                  </div>
                  <div class="col-4 my-auto">
                    <select class="form-control" id="seller">
                      <option value="">Select All</option>
                      <?php
                      $sql = "SELECT * FROM sellers ORDER BY seller_registered";
                      $query = $conn->query($sql);
                      while ($row = $query->fetch_assoc()) {
                      ?>
                      <option value="<?php echo $row['id'];?>"><?php echo $row['seller_fullname'];?></option>
                      <?php } ?>
                    </select>
                 
                  </div>
                  <div class="col-4">
                    <button type="button" class="btn btn-info" onclick="loadreports();">
                      <i class="nc-icon nc-zoom-split"></i>
                    </button>
                  <a href="allreport-summary.php?month=<?php echo date('Y-m');?>">
                    <button type="button" class="btn btn-info" style="height: 40px;">
                      <i class="fa fa-file-excel-o"></i> &nbsp;  &nbsp;Export All Report
                    </button>
                   </a>
                      </div>

how can i pass that `<a href="allreport-summary.php?month=<?php echo date('Y-m');?>">` according to the selection of `  <input type="month" id="month" class="form-control" value="<?php echo date('Y-m'); ?>">` ?