SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help finding dates depending on selected drop-down options

    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
    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.
    Code:
    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

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    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.

    HTML 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" />
      <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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •