Help finding dates depending on selected drop-down options

JavaScript
1

Hi,

I’ve created a table in HTML which I’m wanting JavaScript to be able to add into the “Salary payment date of the month” field the last date of the month which is the last Friday. This depends on which month and year they select from the drop-down list. Any idea how to do this? Screenshot below.

Screenshot - http://i48.tinypic.com/34hc8sn.png

Also for the “Bonus date for the month field”, I’d like to show the 15th of the previous month (so if current month is Sept, show July), however if the 15th is a weekend, then show the Wednesday after the 15th. Any idea how to do this?

My table code


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style>
td {text-align:center;}
</style>

</head>

<body>
<table width="100%" border="0">
  <tr>
    <th width="11%">Name</th>
    <th width="11%">Department</th>
    <th width="17%">Month (please select)</th>
    <th width="15%">Year (please select)</th>
    <th width="10%">Monthly base salary</th>
    <th width="9%">Monthly bonus</th>
    <th width="16%">Salary payment date of the month</th>
    <th width="11%">Bonus date for previous month</th>
  </tr>
  <tr>
    <td>John Smith</td>
    <td>Marketing</td>
    <td><select>
        <option value="january">January</option>
        <option value="february">February</option>
        <option value="march">March</option>
        <option value="april">April</option>
        <option value="may">May</option>
        <option value="june">June</option>
        <option value="july">July</option>
        <option value="august">August</option>
        <option value="september">September</option>
        <option value="october">October</option>
        <option value="november">November</option>
        <option value="december">December</option>
      </select></td>
    <td><select>
        <option value="2008">2008</option>
        <option value="2009">2009</option>
        <option value="2010">2010</option>
        <option value="2011">2011</option>
        <option value="2012">2012</option>
      </select></td>
    <td>1500</td>
    <td>200</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Claire Jackson</td>
    <td>Sales</td>
    <td><select>
        <option value="january">January</option>
        <option value="february">February</option>
        <option value="march">March</option>
        <option value="april">April</option>
        <option value="may">May</option>
        <option value="june">June</option>
        <option value="july">July</option>
        <option value="august">August</option>
        <option value="september">September</option>
        <option value="october">October</option>
        <option value="november">November</option>
        <option value="december">December</option>
      </select></td>
    <td><select>
        <option value="2008">2008</option>
        <option value="2009">2009</option>
        <option value="2010">2010</option>
        <option value="2011">2011</option>
        <option value="2012">2012</option>
      </select></td>
    <td>1200</td>
    <td>160</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Sam Archer</td>
    <td>IT</td>
    <td><select>
        <option value="january">January</option>
        <option value="february">February</option>
        <option value="march">March</option>
        <option value="april">April</option>
        <option value="may">May</option>
        <option value="june">June</option>
        <option value="july">July</option>
        <option value="august">August</option>
        <option value="september">September</option>
        <option value="october">October</option>
        <option value="november">November</option>
        <option value="december">December</option>
      </select></td>
    <td><select>
        <option value="2008">2008</option>
        <option value="2009">2009</option>
        <option value="2010">2010</option>
        <option value="2011">2011</option>
        <option value="2012">2012</option>
      </select></td>
    <td>1300</td>
    <td>170</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>William Hill</td>
    <td>Finance</td>
    <td><select>
        <option value="january">January</option>
        <option value="february">February</option>
        <option value="march">March</option>
        <option value="april">April</option>
        <option value="may">May</option>
        <option value="june">June</option>
        <option value="july">July</option>
        <option value="august">August</option>
        <option value="september">September</option>
        <option value="october">October</option>
        <option value="november">November</option>
        <option value="december">December</option>
      </select></td>
    <td><select>
        <option value="2008">2008</option>
        <option value="2009">2009</option>
        <option value="2010">2010</option>
        <option value="2011">2011</option>
        <option value="2012">2012</option>
      </select></td>
    <td>1900</td>
    <td>240</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Sarah Stone</td>
    <td>IT</td>
    <td><select>
        <option value="january">January</option>
        <option value="february">February</option>
        <option value="march">March</option>
        <option value="april">April</option>
        <option value="may">May</option>
        <option value="june">June</option>
        <option value="july">July</option>
        <option value="august">August</option>
        <option value="september">September</option>
        <option value="october">October</option>
        <option value="november">November</option>
        <option value="december">December</option>
      </select></td>
    <td><select>
        <option value="2008">2008</option>
        <option value="2009">2009</option>
        <option value="2010">2010</option>
        <option value="2011">2011</option>
        <option value="2012">2012</option>
      </select></td>
    <td>2000</td>
    <td>280</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Bethany Rose</td>
    <td>Marketing</td>
    <td><select>
        <option value="january">January</option>
        <option value="february">February</option>
        <option value="march">March</option>
        <option value="april">April</option>
        <option value="may">May</option>
        <option value="june">June</option>
        <option value="july">July</option>
        <option value="august">August</option>
        <option value="september">September</option>
        <option value="october">October</option>
        <option value="november">November</option>
        <option value="december">December</option>
      </select></td>
    <td><select>
        <option value="2008">2008</option>
        <option value="2009">2009</option>
        <option value="2010">2010</option>
        <option value="2011">2011</option>
        <option value="2012">2012</option>
      </select></td>
    <td>2500</td>
    <td>320</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Mike Wills</td>
    <td>Sales</td>
    <td><select>
        <option value="january">January</option>
        <option value="february">February</option>
        <option value="march">March</option>
        <option value="april">April</option>
        <option value="may">May</option>
        <option value="june">June</option>
        <option value="july">July</option>
        <option value="august">August</option>
        <option value="september">September</option>
        <option value="october">October</option>
        <option value="november">November</option>
        <option value="december">December</option>
      </select></td>
    <td><select>
        <option value="2008">2008</option>
        <option value="2009">2009</option>
        <option value="2010">2010</option>
        <option value="2011">2011</option>
        <option value="2012">2012</option>
      </select></td>
    <td>1000</td>
    <td>130</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>George Peters</td>
    <td>Finance</td>
    <td><select>
        <option value="january">January</option>
        <option value="february">February</option>
        <option value="march">March</option>
        <option value="april">April</option>
        <option value="may">May</option>
        <option value="june">June</option>
        <option value="july">July</option>
        <option value="august">August</option>
        <option value="september">September</option>
        <option value="october">October</option>
        <option value="november">November</option>
        <option value="december">December</option>
      </select></td>
    <td><select>
        <option value="2008">2008</option>
        <option value="2009">2009</option>
        <option value="2010">2010</option>
        <option value="2011">2011</option>
        <option value="2012">2012</option>
      </select></td>
    <td>2100</td>
    <td>300</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Katie Manson</td>
    <td>IT</td>
    <td><select>
        <option value="january">January</option>
        <option value="february">February</option>
        <option value="march">March</option>
        <option value="april">April</option>
        <option value="may">May</option>
        <option value="june">June</option>
        <option value="july">July</option>
        <option value="august">August</option>
        <option value="september">September</option>
        <option value="october">October</option>
        <option value="november">November</option>
        <option value="december">December</option>
      </select></td>
    <td><select>
        <option value="2008">2008</option>
        <option value="2009">2009</option>
        <option value="2010">2010</option>
        <option value="2011">2011</option>
        <option value="2012">2012</option>
      </select></td>
    <td>1800</td>
    <td>230</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

I made a start, but doesn’t really seem to be working. Plus doesn’t work of the drop-down list.


function daysInMonth(iMonth, iYear)
{
    return 32 - new Date(iYear, iMonth, 32).getDate();
}


var dif = null;
d = new Date(); // Today's date
countDays = daysInMonth(d.getMonth(),d.getFullYear()); //Checking number of days in current month
d.setDate(countDays); //setting the date to last day of the month
dif = (d.getDay() + 6) % 7; // Number of days to subtract
d = new Date(d - dif * 24*60*60*1000); // Do the subtraction

<button onclick="alert(d.getDate(12, 2012));">Dec 2012</button>

Thanks in advance :slight_smile:

2

Hi there,

as long as you’re happy going with a library, date.js should do what you want.

I’ve made a standalone example (using jQuery, too) that will output the date of the final Friday of a selected month of a selected year.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script src="http://datejs.googlecode.com/svn/trunk/build/date.js" type="text/javascript"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
  <title>Find date of last friday in month</title>
</head>

<body>
  <select name="month" id="month">
    <option value="January">January</option>
    <option value="February">February</option>
    <option value="March">March</option>
    <option value="April">April</option>
    <option value="May">May</option>
    <option value="June">June</option>
    <option value="July">July</option>
    <option value="August">August</option>
    <option value="September">September</option>
    <option value="October">October</option>
    <option value="November">November</option>
    <option value="December">December</option> 
  </select>
  
  <select name="year" id="year">
    <option value="2012">2012</option>
    <option value="2011">2011</option>
    <option value="2010">2010</option>
    <option value="2009">2009</option>
    <option value="2008">2008</option>
    <option value="2007">2007</option>
    <option value="2006">2006</option>
    <option value="2005">2005</option>
    <option value="2004">2004</option>
    <option value="2003">2003</option>
    <option value="2002">2002</option>
    <option value="2001">2001</option>
    <option value="2000">2000</option>
  </select>
  
  <p>The last Friday of <span class="month"></span> <span class="year"></span> is: <span class="lastFriday"></span></p>

  <script>
    function updateFridayText(){
      var month = $('#month').val();
      var year = $('#year').val();
      var d = Date.parse(month + ' ' + year);
      var lastFriday = d.final().fri();
      $('span.month').html(month);
      $('span.year').html(year);
      $('span.lastFriday').html(lastFriday.toString('dddd, MMMM dS'));
    }
    
    $(document).ready(function () {
      $('#month').change(function() {
        updateFridayText()
      });
      
      $('#year').change(function() {
        updateFridayText()
      });
      
      updateFridayText();
    });
  </script>
</body>
</html>

Have a look at this, take a minute to understand how it works, and the rest should fall into place.

Also for the “Bonus date for the month field”, I’d like to show the 15th of the previous month (so if current month is Sept, show July), however if the 15th is a weekend, then show the Wednesday after the 15th. Any idea how to do this?

The date.js documentation (http://code.google.com/p/datejs/wiki/APIDocumentation) and a little bit of JavaScript logic should help you with this.

If you get stuck, then post back here.

P.S. Be sure to use the latest release of date.js for the functionality you require: http://datejs.googlecode.com/svn/trunk/build/date.js