Kenichi Uang Kenichi Uang - 3 months ago 10
PHP Question

Javascript week range forward button and backward button

I need some help here with my code. I have a forward button and backward button to supposedly dynamically display one week to the next and vice versa. I have the current week displayed on load. Problem is I can't seem to figure out how to make the forward and backward button continuously move from one week range to another. Here's my code:

<html>
<head>
<link rel="stylesheet" type="text/css" href="calendar.css">
<title>Calendar</title>
</head>
<body onload="dateRange()">
<script>

function dateRange(){
var start_date = "<?php echo $start_date = date("F d Y",strtotime('monday this week')); ?>";
var end_date = "<?php echo $end_date = date("F d Y",strtotime("sunday this week"));; ?>";
document.getElementById('date_range').innerHTML = start_date + " - " + end_date;
}
function forward(){
var start_date = "<?php echo $start_date = date('F d Y', strtotime('+1 weeks', strtotime($start_date))); ?>";
var end_date = "<?php echo date('F d Y', strtotime('+1 weeks', strtotime($end_date))); ?>";
document.getElementById('date_range').innerHTML = start_date + " - " + end_date;
}
function backward(){
var start_date = "<?php echo date('F d Y', strtotime('-1 weeks', strtotime($start_date))); ?>";
var end_date = "<?php echo date('F d Y', strtotime('-1 weeks', strtotime($end_date))); ?>";
document.getElementById('date_range').innerHTML = start_date + " - " + end_date;
}
</script>
<h1 id="date_range"></h1>
<div>
<input type="button" onClick="forward()" name="forward" value=">">
<input type="button" onClick="backward()" name="backward" value="<">
</div>


Could really use the help please and its very much appreciated.

Answer

First thing: It's not good practice to use PHP to populate your javascript. PHP is a server-side language, javascript (in this case) runs in the client's browser. This is going to make your code very difficult to maintain and debug, because you'll need to dig into the script to see how PHP output it.

You can do this all with javascript:

HTML

<body>
  <h1 id="date_range"></h1>
  <div>
    <input type="button" onClick="backward()" name="backward" value="<">
    <input type="button" onClick="forward()" name="forward" value=">">
  </div>  
</body>

Javascript

var range = document.getElementById('date_range');
var offset = 0;
var today = new Date();
var dayOfWeekOffset = today.getDay();


function getWeek(offset) {
  offset = offset || 0; // if the function did not supply a new offset, the offset is 0
  var firstDay = new Date();
  firstDay.setDate(firstDay.getDate() - dayOfWeekOffset + (offset * 7));
    // .setDate() sets the date (1-31) of the current month.
    // The beginning of the week is:
    //    today's date (firstDay.getDate())
    //    minus the day of week offset to get us back to sunday (dayOfWeekOffset)
    //    plus the number of days we need to offset for future / past weeks (offset * 7) 

  var lastDay = new Date(firstDay);
  lastDay.setDate(lastDay.getDate() + 6);
    // the last day is the first day plus 6

  console.log(makeDateString(firstDay), makeDateString(lastDay));
  range.innerHTML = 'week of ' + makeDateString(firstDay) + ' - ' + makeDateString(lastDay);
}


function makeDateString(date) {
  var dd = date.getDate();
  var mm = date.getMonth() + 1;
  var y = date.getFullYear();

  var dateString = mm + '/'+ dd + '/'+ y;
  return dateString;

}

function backward() {
  offset = offset - 1;
  getWeek(offset);
}

function forward() {
  offset = offset + 1;
  getWeek(offset);
}

window.onload = function() {
  getWeek();
}

Working JSBin here: http://jsbin.com/lawuyawoka/

Comments