Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Sep 2008
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Calendar problem - Next & Previous month selections not working

    I have a popup date selection calendar that works fine in older versions of Firefox, but the calendar's previous month and next month selections, do not work in Firefox 3. When you click on the forward or backward arrows, instead of showing the next month, the calendar just closes.

    Does anyone know why this would not function in Firefox 3?


    Here's the calendar code.
    Code:
    <div style="display: block; position: absolute; z-index: 1000;" id="cal_start_date" class="calendar"><table cellspacing="1" cellpadding="0" class="minical"><tbody>
    <tr nowrap=""><th onmouseout="window.status=''; return true;" onmouseover="window.status='Go back one month'; return true;" onclick="Build('null', '7', '2008', 'MM/DD/YYYY');" class="arrows top"><a onclick="Build('null', '7', '2008', 'MM/DD/YYYY');" href="javascript:void(0);"><<</a></th><th colspan="5" class="title top">September 2008</th><th onmouseout="window.status=''; return true;" onmouseover="window.status='Go back one month'; return true;" onclick="Build('null', '9', '2008', 'MM/DD/YYYY');" class="arrows top"><a onclick="Build('null', '9', '2008', 'MM/DD/YYYY');" href="javascript:void(0);">>></a></th></tr>
    
    <tr><th class="days">S</th><th class="days">M</th><th class="days">T</th><th class="days">W</th><th class="days">T</th><th class="days">F</th><th class="days">S</th></tr><tr><td class="we"> </td><td onclick="set_date('start_date','09/01/2008');show_hide_layer('all');control_select('visible');return true;" onmouseover="this.style.cursor='pointer'; return true;" style="cursor: pointer;">1</td><td onclick="set_date('start_date','09/02/2008');show_hide_layer('all');control_select('visible');return true;" onmouseover="this.style.cursor='pointer'; return true;">2</td><td onclick="set_date('start_date','09/03/2008');show_hide_layer('all');control_select('visible');return true;" onmouseover="this.style.cursor='pointer'; return true;">3</td><td onclick="set_date('start_date','09/04/2008');show_hide_layer('all');control_select('visible');return true;" onmouseover="this.style.cursor='pointer'; return true;">4</td><td onclick="set_date('start_date','09/05/2008');show_hide_layer('all');control_select('visible');return true;" onmouseover="this.style.cursor='pointer'; return true;">5</td><td onclick="set_date('start_date','09/06/2008');show_hide_layer('all');control_select('visible');return true;" onmouseover="this.style.cursor='pointer'; return true;">6</td></tr><tr><td onclick="set_date('start_date','09/07/2008');show_hide_layer('all');control_select('visible');return true;" onmouseover="this.style.cursor='pointer'; return true;">7</td><td onclick="set_date('start_date','09/08/2008');show_hide_layer('all');control_select('visible');return true;" onmouseover="this.style.cursor='pointer'; return true;" style="cursor: pointer;">8</td><td onclick="set_date('start_date','09/09/2008');show_hide_layer('all');control_select('visible');return true;" onmouseover="this.style.cursor='pointer'; return true;">9</td><td onclick="set_date('start_date','09/10/2008');show_hide_layer('all');control_select('visible');return true;" onmouseover="this.style.cursor='pointer'; return true;">10</td><td onclick="set_date('start_date','09/11/2008');show_hide_layer('all');control_select('visible');return true;" onmouseover="this.style.cursor='pointer'; return true;">11</td><td onclick="set_date('start_date','09/12/2008');show_hide_layer('all');control_select('visible');return true;" onmouseover="this.style.cursor='pointer'; return true;" class="today">12</td><td onclick="set_date('start_date','09/13/2008');show_hide_layer('all');control_select('visible');return true;" onmouseover="this.style.cursor='pointer'; return true;">13</td></tr><tr><td onclick="set_date('start_date','09/14/2008');show_hide_layer('all');control_select('visible');return true;" onmouseover="this.style.cursor='pointer'; return true;" style="cursor: pointer;">14</td><td onclick="set_date('start_date','09/15/2008');show_hide_layer('all');control_select('visible');return true;" onmouseover="this.style.cursor='pointer'; return true;">15</td><td onclick="set_date('start_date','09/16/2008');show_hide_layer('all');control_select('visible');return true;" onmouseover="this.style.cursor='pointer'; return true;">16</td><td onclick="set_date('start_date','09/17/2008');show_hide_layer('all');control_select('visible');return true;" onmouseover="this.style.cursor='pointer'; return true;">17</td><td onclick="set_date('start_date','09/18/2008');show_hide_layer('all');control_select('visible');return true;" onmouseover="this.style.cursor='pointer'; return true;">18</td><td onclick="set_date('start_date','09/19/2008');show_hide_layer('all');control_select('visible');return true;" onmouseover="this.style.cursor='pointer'; return true;">19</td><td onclick="set_date('start_date','09/20/2008');show_hide_layer('all');control_select('visible');return true;" onmouseover="this.style.cursor='pointer'; return true;">20</td></tr><tr><td onclick="set_date('start_date','09/21/2008');show_hide_layer('all');control_select('visible');return true;" onmouseover="this.style.cursor='pointer'; return true;">21</td><td onclick="set_date('start_date','09/22/2008');show_hide_layer('all');control_select('visible');return true;" onmouseover="this.style.cursor='pointer'; return true;">22</td><td onclick="set_date('start_date','09/23/2008');show_hide_layer('all');control_select('visible');return true;" onmouseover="this.style.cursor='pointer'; return true;">23</td><td onclick="set_date('start_date','09/24/2008');show_hide_layer('all');control_select('visible');return true;" onmouseover="this.style.cursor='pointer'; return true;">24</td><td onclick="set_date('start_date','09/25/2008');show_hide_layer('all');control_select('visible');return true;" onmouseover="this.style.cursor='pointer'; return true;">25</td><td onclick="set_date('start_date','09/26/2008');show_hide_layer('all');control_select('visible');return true;" onmouseover="this.style.cursor='pointer'; return true;">26</td><td onclick="set_date('start_date','09/27/2008');show_hide_layer('all');control_select('visible');return true;" onmouseover="this.style.cursor='pointer'; return true;">27</td></tr><tr><td onclick="set_date('start_date','09/28/2008');show_hide_layer('all');control_select('visible');return true;" onmouseover="this.style.cursor='pointer'; return true;">28</td><td onclick="set_date('start_date','09/29/2008');show_hide_layer('all');control_select('visible');return true;" onmouseover="this.style.cursor='pointer'; return true;">29</td><td onclick="set_date('start_date','09/30/2008');show_hide_layer('all');control_select('visible');return true;" onmouseover="this.style.cursor='pointer'; return true;">30</td><td class="we"> </td><td class="we"> </td><td class="we"> </td><td class="we"> </td></tr><tr><td class="we"> </td><td class="we"> </td><td class="we"> </td><td class="we"> </td><td class="we"> </td><td class="we"> </td><td class="we"> </td></tr></tbody></table></div>

    Here's the js for the calendar.
    Code:
    <script language="javascript" type="text/javascript">
      // initialize variables
    var fullDate = new String();
    
    // untility date function to fill months 1-9 with a leading zero
    function leadingZero(nr)
    {
      if (nr < 10) nr = "0" + nr;
      return nr;
    }
    
    // set start, end, and range_start dates to current date if nothing has been entered yet
    function init()
    {
      
    var sdate = document.getElementById('start_date').value;
      if (sdate != '')
        return;
      var currentTime = new Date()
      var month = leadingZero(currentTime.getMonth() + 1);
      var day = currentTime.getDate();
      var year = currentTime.getFullYear();
      fullDate = month + "/" + day + "/" + year;
      document.getElementById('start_date').value = fullDate;
      document.getElementById('end_date').value = fullDate;
      document.getElementById('range_start_date').value = fullDate;
    }
    
    
    // check if end date is after start date
    function check_end_date()
    {
      var sdate = document.getElementById('start_date').value;
      var edate = document.getElementById('end_date').value
      if (sdate == '' || edate == '')
        return true;
    
      if (Date.parse(edate) < Date.parse(sdate))
      {
        alert('End date cannot come before start date');
        document.getElementById('end_date').value = '';
        document.getElementById('end_date').focus();
        return false;
      }
    }
    
    // check if the no end time checkbox has been selected
    function check_no_end(obj)
    {
      if (obj.checked === true)
      {
        document.getElementById('start_time').value = '';
        document.getElementById('start_time').disabled = true;
        document.getElementById('end_time').value = '';
        document.getElementById('end_time').disabled = true;
      }
      else
      {
        document.getElementById('start_time').disabled = false;
        document.getElementById('end_time').disabled = false;
      }
    }
    
    
    // show repeating options based on user selection
    function show_repeat_layer()
    {
      var arr = new Array(4);
      arr[0] = 'monthly';
      arr[1] = 'weekly';
      arr[2] = 'range';
      arr[3] = 'daily';
    
      var sel = document.getElementById('repeat_selection').options[document.getElementById('repeat_selection').selectedIndex].value;
    
      // Hide all others
      for(var z = 0; z <= arr.length; z++)
      {
        if (arr[z] != sel && arr[z] != undefined)
        {
          document.getElementById(arr[z]).style.display='none';
        }
      }
    
      // If a repeating event show its options
      if (sel != '')
      {
        document.getElementById('repeat_block').style.backgroundColor="#eaeaea";
        document.getElementById(sel).style.display='block';
        document.getElementById('range').style.display='block';
      }
    }
    
    
    // shows calendar or time floating div based on user click and hides all others
    function show_hide_layer(div_id)
    {
      var arr = new Array(5);
      arr[0] = 'cal_start_date';
      arr[1] = 'cal_end_date';
      arr[2] = 'start_time_box';
      arr[3] = 'end_time_box';
      arr[4] = 'cal_range_end_date';
    
      // Hide all others
      for(var z = 0; z <= arr.length; z++)
      {
        if (arr[z] != div_id && arr[z] != undefined)
        {
          document.getElementById(arr[z]).style.display='none';
        }
      }
    
      // if not hiding all layers, show this one
      if (div_id != 'all')
        document.getElementById(div_id).style.display='block';
    }
    
    
    // will hide all date and time elements if that particular element has not been clicked on
    // this allows the date/time layers to hide if another element in the page is focused on
    function hide_datetime_layer(e)
    {  
      var arr = new Array(5);
      arr[0] = 'start_date';
      arr[1] = 'end_date';
      arr[2] = 'start_time';
      arr[3] = 'end_time';
      arr[4] = 'range_end_date';
      var targ;
      var x;
      if (!e) var e = window.event
      if (e.target) targ = e.target.id
      else if (e.srcElement) targ = e.srcElement.id    
      
      for (x in arr)
      {
        if (arr[x] == targ) return;
      }
      
      control_select('visible');  
      show_hide_layer('all');
    }
    
    
    // generate the calendar
    function show_cal(div_id, field_id)
    {
      control_select('hidden'); // hide all select boxes if brower is msie
      show_hide_layer(div_id);
      show_calendar('','','','',field_id,div_id);
    }
    
    
    // ajax callback that check form for errors
    function event_validate(frm, response)
    {
      if (response != '') // response mode
      {
        err_cont = document.getElementById('error_container');
        err_msg = document.getElementById('error_message');
        bg = document.getElementById('input');
        frm = document.forms[0]
        el = frm.elements;
    
        if (response != 'ok') {
          err_cont.className = 'error-container-modal';
          err_msg.innerHTML = response;
          w = (screen.width / 2) - 350;
          h = (screen.height / 2) + 160;
          err_cont.style.left = w + "px";
          err_cont.style.top = h + "px";
          bg.className = 'disabled';
          for (i=0, ii=el.length; i<ii; i++) {
            el[i].disabled = true;
          }
        } else {
          frm.submit();
        }
      }
      else // input mode
      {
        var title = escape(frm.title.value);
        var event_what = escape(frm.event_what.value);
        var event_city = frm.event_city.value;
        var start_date = frm.start_date.value;
        var category1 = frm.category1.selectedIndex;
    
        var url = '/system_ee/extensions/ajax/event_validate.php?title=' + title + '&event_what=' + event_what + '&event_city=' + event_city + '&start_date=' + start_date + '&category1=' + category1;
    
        loadXMLDoc(url);
      }
    }
    
    
    // enables all form elements after the error box "ok" button has been clicked
    function enable()
    {
      err_cont = document.getElementById('error_container');
      el = document.forms[0].elements;
      bg = document.getElementById('input');
    
      err_cont.className = 'hidden';
      bg.className = '';
      for (i=0, ii=el.length; i<ii; i++) {
        el[i].disabled = false;
      }
    }
    
    
    // Change the selected index on a select menu
    function changeSelect(el, val)
    {
      var x=document.getElementById(el);
      for (var i = 0; i < x.options.length; i++)
      {
        if (x.options[i].value == val) {
          x.selectedIndex = i;
          break;			
        }
      }
    }
    
    
    // Change the selected index on a select menu
    function checkBoxes(el, val)
    {
      var x=document.forms[0].elements[el];
      for (var i = 0; i < x.length; i++)
      {
        if (x[i].value == val) {
          x[i].checked = true;
          break;			
        }
      }
    }
    
    
    // moved from common/ajax_js
    var req;
    
    function loadXMLDoc(url) 
    {
      var dom = new RegExp("http(s)?://");
      if (!dom.test(url)) {
        url = "http://" + document.domain + url;
      } 
        
      if (window.XMLHttpRequest) { // branch for native XMLHttpRequest object
        req = new XMLHttpRequest();   
      }
      else if (window.ActiveXObject) { // branch for IE/Windows ActiveX version
        req = new ActiveXObject("Microsoft.XMLHTTP");
      }
         
      if (!req) return false;
      
      req.onreadystatechange = processReqChange;
      try {
        req.open("GET", url, true);
      } catch (e) {}
      finally {
        req.send(null);
      }
    }
    
    function processReqChange() 
    {  
      if (req.readyState != 4) return;
      
      switch (req.status)
      {
        case 200: // OK     
        response  = req.responseXML.documentElement;
        method = response.getElementsByTagName('method')[0].firstChild.data;
        result = response.getElementsByTagName('result')[0].firstChild.data;
        eval(method + '(\'\', result)');
        break;
          
        default:     
          alert("There was a problem retrieving the XML data:\n" + req.statusText);    
      }    
    }
    
    </script>

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,918
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Have you tried using FireBug?

  • #3
    New to the CF scene
    Join Date
    Sep 2008
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I should have mentioned I'm not a js programmer. My knowledge of js is novice at best.

    I did look in firebug and don't see that it's throwing an error.

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,075
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Question More information ...

    From the code provide in post #1 the 'Build()' function is not defined.

    Can't help much without it.

    Also, it is much easier to read and debug if you put
    [ php ] and [ / php ] tags (without the spaces) around the scripts, like this:
    PHP Code:
    <html>
    <
    head>
    <
    title>Calendar Code</title>

    <
    script language="javascript" type="text/javascript">
    // initialize variables
    var fullDate = new String();

    // untility date function to fill months 1-9 with a leading zero
    function leadingZero(nr) {
      if (
    nr 10nr "0" nr;
      return 
    nr;
    }

    // set start, end, and range_start dates to current date if nothing has been entered yet
    function init() {
      
    var 
    sdate document.getElementById('start_date').value;
      if (
    sdate != '') return;
      var 
    currentTime = new Date()
      var 
    month leadingZero(currentTime.getMonth() + 1);
      var 
    day currentTime.getDate();
      var 
    year currentTime.getFullYear();
      
    fullDate month "/" day "/" year;
      
    document.getElementById('start_date').value fullDate;
      
    document.getElementById('end_date').value fullDate;
      
    document.getElementById('range_start_date').value fullDate;
    }


    // check if end date is after start date
    function check_end_date() {
      var 
    sdate document.getElementById('start_date').value;
      var 
    edate document.getElementById('end_date').value
      
    if (sdate == '' || edate == '') return true;

      if (
    Date.parse(edate) < Date.parse(sdate)) {
        
    alert('End date cannot come before start date');
        
    document.getElementById('end_date').value '';
        
    document.getElementById('end_date').focus();
        return 
    false;
      }
    }

    // check if the no end time checkbox has been selected
    function check_no_end(obj) {
      if (
    obj.checked === true) {
        
    document.getElementById('start_time').value '';
        
    document.getElementById('start_time').disabled true;
        
    document.getElementById('end_time').value '';
        
    document.getElementById('end_time').disabled true;
      } else {
        
    document.getElementById('start_time').disabled false;
        
    document.getElementById('end_time').disabled false;
      }
    }

    // show repeating options based on user selection
    function show_repeat_layer() {
      var 
    arr = new Array(4);
      
    arr[0] = 'monthly';
      
    arr[1] = 'weekly';
      
    arr[2] = 'range';
      
    arr[3] = 'daily';

      var 
    sel document.getElementById('repeat_selection').options[document.getElementById('repeat_selection').selectedIndex].value;

      
    // Hide all others
      
    for(var 0<= arr.lengthz++) {
        if (
    arr[z] != sel && arr[z] != undefined) {
          
    document.getElementById(arr[z]).style.display='none';
        }
      }

      
    // If a repeating event show its options
      
    if (sel != '') {
        
    document.getElementById('repeat_block').style.backgroundColor="#eaeaea";
        
    document.getElementById(sel).style.display='block';
        
    document.getElementById('range').style.display='block';
      }
    }


    // shows calendar or time floating div based on user click and hides all others
    function show_hide_layer(div_id) {
      var 
    arr = new Array(5);
      
    arr[0] = 'cal_start_date';
      
    arr[1] = 'cal_end_date';
      
    arr[2] = 'start_time_box';
      
    arr[3] = 'end_time_box';
      
    arr[4] = 'cal_range_end_date';

      
    // Hide all others
      
    for(var 0<= arr.lengthz++) {
        if (
    arr[z] != div_id && arr[z] != undefined) {
          
    document.getElementById(arr[z]).style.display='none';
        }
      }

      
    // if not hiding all layers, show this one
      
    if (div_id != 'all'document.getElementById(div_id).style.display='block';
    }


    // will hide all date and time elements if that particular element has not been clicked on
    // this allows the date/time layers to hide if another element in the page is focused on
    function hide_datetime_layer(e) {  
      var 
    arr = new Array(5);
      
    arr[0] = 'start_date';
      
    arr[1] = 'end_date';
      
    arr[2] = 'start_time';
      
    arr[3] = 'end_time';
      
    arr[4] = 'range_end_date';
      var 
    targ;
      var 
    x;
      if (!
    e) var window.event
      
    if (e.targettarg e.target.id
      
    else if (e.srcElementtarg e.srcElement.id    
      
      
    for (x in arr) {
        if (
    arr[x] == targ) return;
      }
      
      
    control_select('visible');  
      
    show_hide_layer('all');
    }


    // generate the calendar
    function show_cal(div_idfield_id) {
      
    control_select('hidden'); // hide all select boxes if brower is msie
      
    show_hide_layer(div_id);
      
    show_calendar('','','','',field_id,div_id);
    }


    // ajax callback that check form for errors
    function event_validate(frmresponse) {
      if (
    response != ''// response mode
      
    {
        
    err_cont document.getElementById('error_container');
        
    err_msg document.getElementById('error_message');
        
    bg document.getElementById('input');
        
    frm document.forms[0]
        
    el frm.elements;

        if (
    response != 'ok') {
          
    err_cont.className 'error-container-modal';
          
    err_msg.innerHTML response;
          
    = (screen.width 2) - 350;
          
    = (screen.height 2) + 160;
          
    err_cont.style.left "px";
          
    err_cont.style.top "px";
          
    bg.className 'disabled';
          for (
    i=0ii=el.lengthi<iii++) {
            
    el[i].disabled true;
          }
        } else {
          
    frm.submit();
        }
      }
      else 
    // input mode
      
    {
        var 
    title escape(frm.title.value);
        var 
    event_what escape(frm.event_what.value);
        var 
    event_city frm.event_city.value;
        var 
    start_date frm.start_date.value;
        var 
    category1 frm.category1.selectedIndex;

        var 
    url '/system_ee/extensions/ajax/event_validate.php?title=' title '&event_what=' event_what '&event_city=' event_city '&start_date=' start_date '&category1=' category1;

        
    loadXMLDoc(url);
      }
    }


    // enables all form elements after the error box "ok" button has been clicked
    function enable() {
      
    err_cont document.getElementById('error_container');
      
    el document.forms[0].elements;
      
    bg document.getElementById('input');

      
    err_cont.className 'hidden';
      
    bg.className '';
      for (
    i=0ii=el.lengthi<iii++) {
        
    el[i].disabled false;
      }
    }


    // Change the selected index on a select menu
    function changeSelect(elval) {
      var 
    x=document.getElementById(el);
      for (var 
    0x.options.lengthi++) {
        if (
    x.options[i].value == val) {
          
    x.selectedIndex i;
          break;            
        }
      }
    }


    // Change the selected index on a select menu
    function checkBoxes(elval) {
      var 
    x=document.forms[0].elements[el];
      for (var 
    0x.lengthi++) {
        if (
    x[i].value == val) {
          
    x[i].checked true;
          break;            
        }
      }
    }


    // moved from common/ajax_js
    var req;

    function 
    loadXMLDoc(url) {
      var 
    dom = new RegExp("http(s)?://");
      if (!
    dom.test(url)) {
        
    url "http://" document.domain url;
      } 
        
      if (
    window.XMLHttpRequest) { // branch for native XMLHttpRequest object
        
    req = new XMLHttpRequest();   
      }
      else if (
    window.ActiveXObject) { // branch for IE/Windows ActiveX version
        
    req = new ActiveXObject("Microsoft.XMLHTTP");
      }
         
      if (!
    req) return false;
      
      
    req.onreadystatechange processReqChange;
      try {
        
    req.open("GET"urltrue);
      } catch (
    e) {}
      
    finally {
        
    req.send(null);
      }
    }

    function 
    processReqChange() {  
      if (
    req.readyState != 4) return;
      
      switch (
    req.status) {
        case 
    200// OK     
          
    response  req.responseXML.documentElement;
          
    method response.getElementsByTagName('method')[0].firstChild.data;
          
    result response.getElementsByTagName('result')[0].firstChild.data;
          eval(
    method '(\'\', result)');
          break;
          
        default:     
          
    alert("There was a problem retrieving the XML data:\n" req.statusText);    
      }    
    }

    </script>
    </head>

    <body>
    <div style="display: block; position: absolute; z-index: 1000;" id="cal_start_date" class="calendar">
    <table cellspacing="1" cellpadding="0" class="minical">
    <tbody>
    <tr nowrap="">
     <th onmouseout="window.status=''; return true;" onmouseover="window.status='Go back one month'; return true;"
         onclick="Build('null', '7', '2008', 'MM/DD/YYYY');" class="arrows top">
      <a onclick="Build('null', '7', '2008', 'MM/DD/YYYY');" href="javascript:void(0);"><<</a>
    </th>
    <th colspan="5" class="title top">September 2008</th>
    <th onmouseout="window.status=''; return true;" onmouseover="window.status='Go back one month'; return true;"
         onclick="Build('null', '9', '2008', 'MM/DD/YYYY');" class="arrows top">
      <a onclick="Build('null', '9', '2008', 'MM/DD/YYYY');" href="javascript:void(0);">>></a>
     </th>
    </tr>

    <tr>
     <th class="days">S</th>
     <th class="days">M</th>
     <th class="days">T</th>
     <th class="days">W</th>
     <th class="days">T</th>
     <th class="days">F</th>
     <th class="days">S</th>
    </tr>
    <tr>
     <td class="we"> </td>
     <td onclick="set_date('start_date','09/01/2008');show_hide_layer('all');control_select('visible');return true;"
         onmouseover="this.style.cursor='pointer'; return true;" style="cursor: pointer;">1</td>
     <td onclick="set_date('start_date','09/02/2008');show_hide_layer('all');control_select('visible');return true;"
         onmouseover="this.style.cursor='pointer'; return true;">2</td>
         <td onclick="set_date('start_date','09/03/2008');show_hide_layer('all');control_select('visible');return true;"
          onmouseover="this.style.cursor='pointer'; return true;">3</td>
     <td onclick="set_date('start_date','09/04/2008');show_hide_layer('all');control_select('visible');return true;"
         onmouseover="this.style.cursor='pointer'; return true;">4</td>
     <td onclick="set_date('start_date','09/05/2008');show_hide_layer('all');control_select('visible');return true;"
         onmouseover="this.style.cursor='pointer'; return true;">5</td>
     <td onclick="set_date('start_date','09/06/2008');show_hide_layer('all');control_select('visible');return true;"
         onmouseover="this.style.cursor='pointer'; return true;">6</td>
     </tr>
     <tr>
     <td onclick="set_date('start_date','09/07/2008');show_hide_layer('all');control_select('visible');return true;"
         onmouseover="this.style.cursor='pointer'; return true;">7</td>
     <td onclick="set_date('start_date','09/08/2008');show_hide_layer('all');control_select('visible');return true;"
         onmouseover="this.style.cursor='pointer'; return true;" style="cursor: pointer;">8</td>
     <td onclick="set_date('start_date','09/09/2008');show_hide_layer('all');control_select('visible');return true;"
         onmouseover="this.style.cursor='pointer'; return true;">9</td>
     <td onclick="set_date('start_date','09/10/2008');show_hide_layer('all');control_select('visible');return true;"
         onmouseover="this.style.cursor='pointer'; return true;">10</td>
     <td onclick="set_date('start_date','09/11/2008');show_hide_layer('all');control_select('visible');return true;"
         onmouseover="this.style.cursor='pointer'; return true;">11</td>
     <td onclick="set_date('start_date','09/12/2008');show_hide_layer('all');control_select('visible');return true;"
          onmouseover="this.style.cursor='pointer'; return true;" class="today">12</td>
     <td onclick="set_date('start_date','09/13/2008');show_hide_layer('all');control_select('visible');return true;"
         onmouseover="this.style.cursor='pointer'; return true;">13</td>
     </tr>
     <tr>
     <td onclick="set_date('start_date','09/14/2008');show_hide_layer('all');control_select('visible');return true;"
         onmouseover="this.style.cursor='pointer'; return true;" style="cursor: pointer;">14</td>
     <td onclick="set_date('start_date','09/15/2008');show_hide_layer('all');control_select('visible');return true;"
         onmouseover="this.style.cursor='pointer'; return true;">15</td>
     <td onclick="set_date('start_date','09/16/2008');show_hide_layer('all');control_select('visible');return true;"
         onmouseover="this.style.cursor='pointer'; return true;">16</td>
     <td onclick="set_date('start_date','09/17/2008');show_hide_layer('all');control_select('visible');return true;"
         onmouseover="this.style.cursor='pointer'; return true;">17</td>
     <td onclick="set_date('start_date','09/18/2008');show_hide_layer('all');control_select('visible');return true;"
         onmouseover="this.style.cursor='pointer'; return true;">18</td>
     <td onclick="set_date('start_date','09/19/2008');show_hide_layer('all');control_select('visible');return true;"
         onmouseover="this.style.cursor='pointer'; return true;">19</td>
     <td onclick="set_date('start_date','09/20/2008');show_hide_layer('all');control_select('visible');return true;"
         onmouseover="this.style.cursor='pointer'; return true;">20</td>
     </tr>
     <tr>
     <td onclick="set_date('start_date','09/21/2008');show_hide_layer('all');control_select('visible');return true;"
         onmouseover="this.style.cursor='pointer'; return true;">21</td>
     <td onclick="set_date('start_date','09/22/2008');show_hide_layer('all');control_select('visible');return true;"
         onmouseover="this.style.cursor='pointer'; return true;">22</td>
     <td onclick="set_date('start_date','09/23/2008');show_hide_layer('all');control_select('visible');return true;"
         onmouseover="this.style.cursor='pointer'; return true;">23</td>
     <td onclick="set_date('start_date','09/24/2008');show_hide_layer('all');control_select('visible');return true;"
         onmouseover="this.style.cursor='pointer'; return true;">24</td>
     <td onclick="set_date('start_date','09/25/2008');show_hide_layer('all');control_select('visible');return true;"
         onmouseover="this.style.cursor='pointer'; return true;">25</td>
     <td onclick="set_date('start_date','09/26/2008');show_hide_layer('all');control_select('visible');return true;"
         onmouseover="this.style.cursor='pointer'; return true;">26</td>
     <td onclick="set_date('start_date','09/27/2008');show_hide_layer('all');control_select('visible');return true;"
         onmouseover="this.style.cursor='pointer'; return true;">27</td>
     </tr>
     <tr>
     <td onclick="set_date('start_date','09/28/2008');show_hide_layer('all');control_select('visible');return true;"
         onmouseover="this.style.cursor='pointer'; return true;">28</td>
     <td onclick="set_date('start_date','09/29/2008');show_hide_layer('all');control_select('visible');return true;"
         onmouseover="this.style.cursor='pointer'; return true;">29</td>
     <td onclick="set_date('start_date','09/30/2008');show_hide_layer('all');control_select('visible');return true;"
         onmouseover="this.style.cursor='pointer'; return true;">30</td>
     <td class="we"> </td><td class="we"> </td><td class="we"> </td><td class="we"> </td>
     </tr>
     <tr>
     <td class="we"> </td>
     <td class="we"> </td>
     <td class="we"> </td>
     <td class="we"> </td>
     <td class="we"> </td>
     <td class="we"> </td>
     <td class="we"> </td>
     </tr>
     </tbody>
     </table>
     </div>
    </body>
    </html> 

  • Users who have thanked jmrker for this post:

    lupper (09-14-2008)

  • #5
    New to the CF scene
    Join Date
    Sep 2008
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Further information - datepicker.js

    doh! I should have included this code in my original post. It's the datepicker js.

    jmrker, the build function is defined in it.

    PHP Code:
    var weekend = [0,6];
    var 
    weekendColor "white";
    var 
    fontface "arial";
    var 
    fontsize 8;     // in "pt" units; used with "font-size" style element

    var gNow = new Date();
    var 
    ggWinContent;
    var 
    ggPosX = -1;
    var 
    ggPosY = -1;

    // Get Browser
    var navigator.userAgent.toLowerCase();
    var 
    i6 = (a.indexOf("msie 6.")!=-1);
    var 
    = (a.indexOf('msie')!=-1);
    var 
    = (a.indexOf('konqueror')!=-1);
    var 
    = (a.indexOf('safari') != -1) || (a.indexOf('konqueror') != -1);
    var 
    = !&& !&& (a.indexOf('mozilla') != -1);
    var 
    = !!window.opera;

    Calendar.Months = ["January""February""March""April""May""June",
    "July""August""September""October""November""December"];

    // Non-Leap year Month days..
    Calendar.DOMonth = [312831303130313130313031];
    // Leap year Month days..
    Calendar.lDOMonth = [312931303130313130313031];

    function 
    Calendar(p_itemp_monthp_yearp_format) {
      if ((
    p_month == null) && (p_year == null))  return;

      if (
    p_month == null) {
        
    this.gMonthName null;
        
    this.gMonth null;
        
    this.gYearly true;
      } else {
        
    this.gMonthName Calendar.get_month(p_month);
        
    this.gMonth = new Number(p_month);
        
    this.gYearly false;
      }

      
    this.gYear p_year;
      
    this.gFormat p_format;
      
    this.gBGColor "white";
      
    this.gFGColor "black";
      
    this.gTextColor "black";
      
    this.gHeaderColor "black";
      
    this.gReturnItem p_item;
    }

    Calendar.get_month Calendar_get_month;
    Calendar.get_daysofmonth Calendar_get_daysofmonth;
    Calendar.calc_month_year Calendar_calc_month_year;

    function 
    Calendar_get_month(monthNo) {
      return 
    Calendar.Months[monthNo];
    }

    function 
    Calendar_get_daysofmonth(monthNop_year) {
      
    /*
      Check for leap year ..
      1.Years evenly divisible by four are normally leap years, except for...
      2.Years also evenly divisible by 100 are not leap years, except for...
      3.Years also evenly divisible by 400 are leap years.
      */
      
    if ((p_year 4) == 0) {
        if ((
    p_year 100) == && (p_year 400) != 0)
          return 
    Calendar.DOMonth[monthNo];

        return 
    Calendar.lDOMonth[monthNo];
      } else
        return 
    Calendar.DOMonth[monthNo];
    }

    function 
    Calendar_calc_month_year(p_Monthp_Yearincr) {
      
    /*
      Will return an 1-D array with 1st element being the calculated month
      and second being the calculated year
      after applying the month increment/decrement as specified by 'incr' parameter.
      'incr' will normally have 1/-1 to navigate thru the months.
      */
      
    var ret_arr = new Array();

      if (
    incr == -1) {
        
    // B A C K W A R D
        
    if (p_Month == 0) {
          
    ret_arr[0] = 11;
          
    ret_arr[1] = parseInt(p_Year) - 1;
        }
        else {
          
    ret_arr[0] = parseInt(p_Month) - 1;
          
    ret_arr[1] = parseInt(p_Year);
        }
      } else if (
    incr == 1) {
        
    // F O R W A R D
        
    if (p_Month == 11) {
          
    ret_arr[0] = 0;
          
    ret_arr[1] = parseInt(p_Year) + 1;
        }
        else {
          
    ret_arr[0] = parseInt(p_Month) + 1;
          
    ret_arr[1] = parseInt(p_Year);
        }
      }

      return 
    ret_arr;
    }

    // This is for compatibility with Navigator 3, we have to create and discard one object before the prototype object exists.
    new Calendar();

    Calendar.prototype.getMonthlyCalendarCode = function() {
      var 
    vCode "";
      var 
    vHeader_Code "";
      var 
    vData_Code "";

      
    // Begin Table Drawing code here..
    //  vCode += ("<div align=center><TABLE BORDER=1 cellpadding=0 cellspacing=0 BGCOLOR=\"" + this.gBGColor + "\" style='font-size:" + fontsize + "pt;'>");
      //vCode += ("<div align=center><TABLE BORDER=0 cellpadding=0 cellspacing=2 BGCOLOR=\"#F4F2EF\" style='font-size: 10px; margin-bottom: 5px;'>");

      
    vHeader_Code this.cal_header();
      
    vData_Code this.cal_data();
      
    vCode += (vHeader_Code vData_Code);

      
    //vCode += "</TABLE></div>";

      
    return vCode;
    }

    Calendar.prototype.show = function() {
      var 
    vCode "";

      
    // build content into global var ggWinContent
     // ggWinContent += ("");

      // Show navigation buttons
      
    var prevMMYYYY Calendar.calc_month_year(this.gMonththis.gYear, -1);
      var 
    prevMM prevMMYYYY[0];
      var 
    prevYYYY prevMMYYYY[1];

      var 
    nextMMYYYY Calendar.calc_month_year(this.gMonththis.gYear1);
      var 
    nextMM nextMMYYYY[0];
      var 
    nextYYYY nextMMYYYY[1];

      
    //ggWinContent += ("<table align=center cellpadding=3 border=0><tr>");
      // Start calendar table
      //ggWinContent += ("<div class=\"calendar\">");
      
    ggWinContent += ("<table class=\"minical\" cellpadding=\"0\" cellspacing=\"1\">");

      
    // Previous month
      //ggWinContent += ("<td valign=middle align=center " +
        
    ggWinContent += ("<tr nowrap><th class=\"arrows top\" " +
        
    "onClick=\"Build('" this.gReturnItem "', '" prevMM "', '" prevYYYY "', '" this.gFormat "'" ");\" " +
        
    "onMouseOver=\"window.status='Go back one month'; return true;\" " +
        
    "onMouseOut=\"window.status=''; return true;\"" +
        
    "><A HREF=\"javascript:void(0);\" " +
        
    "onClick=\"Build('" this.gReturnItem "', '" prevMM "', '" prevYYYY "', '" this.gFormat "'" ");\">" +
        
    "&lt;&lt;<\/A></th>");

      
    // Month name
      
    ggWinContent += ("<th class=\"title top\" colspan=\"5\">" this.gMonthName " " this.gYear "</th>");

      
    // Next month
      //ggWinContent += ("<td valign=middle align=center " +
      
    ggWinContent += ("<th class=\"arrows top\" " +
        
    "onClick=\"Build('" this.gReturnItem "', '" nextMM "', '" nextYYYY "', '" this.gFormat "'" ");\" " +
        
    "onMouseOver=\"window.status='Go back one month'; return true;\" " +
        
    "onMouseOut=\"window.status=''; return true;\"" +
        
    "><A HREF=\"javascript:void(0);\" " +
        
    "onClick=\"Build('" this.gReturnItem "', '" nextMM "', '" nextYYYY "', '" this.gFormat "'" ");\">" +
        
    "&gt;&gt;<\/A></th>");

      
    ggWinContent += ("</tr>");

      
    // Get the complete calendar code for the month, and add it to the
      //  content var
      
    vCode this.getMonthlyCalendarCode();
      
    ggWinContent += vCode;
    }

    Calendar.prototype.cal_header = function() {
      var 
    vCode "";
      
    vCode vCode "<tr>";
      
    vCode vCode "<th class=\"days\">S</th>";
      
    vCode vCode "<th class=\"days\">M</th>";
      
    vCode vCode "<th class=\"days\">T</th>";
      
    vCode vCode "<th class=\"days\">W</th>";
      
    vCode vCode "<th class=\"days\">T</th>";
      
    vCode vCode "<th class=\"days\">F</th>";
      
    vCode vCode "<th class=\"days\">S</th>";
      
    vCode vCode "</tr>";
      return 
    vCode;
    }

    Calendar.prototype.cal_data = function() {

      var 
    vDate = new Date();
      
    vDate.setDate(1);
      
    vDate.setMonth(this.gMonth);
      
    vDate.setFullYear(this.gYear);

      var 
    vFirstDay=vDate.getDay();
      var 
    vDay=1;
      var 
    vLastDay=Calendar.get_daysofmonth(this.gMonththis.gYear);
      var 
    vOnLastDay=0;
      var 
    vCode "";
      var 
    vWeeks=0;

      
    /*
      Get day for the 1st of the requested month/year..
      Place as many blank cells before the 1st day of the month as necessary.
      */
      
    vCode vCode "<tr>";
      for (
    i=0i<vFirstDayi++) {
        
    vCode vCode "<td class=\"we\">&nbsp;</td>";
      }

      
    // Write rest of the 1st week
      
    for (j=vFirstDayj<7j++) {
        
    vCode vCode "<td ";
        if (
    this.is_today(vDay)){
          
    vCode vCode "class=\"today\"";
        }

        
    vCode vCode +
        
    "onMouseOver=\"this.style.cursor='pointer'; return true;\" " +
        
    //"onBlur=\"fill_date();return true;\" " +
        
    "onClick=\"set_date('" field_id "','" this.format_data(vDay) + "');" +
        
    "show_hide_layer('all');control_select('visible');return true;\"";
        
    vCode vCode ">" vDay "</td>";
        
    vDay=vDay 1;
      }
      
    vCode vCode "</tr>";

      
    vWeeks++;

      
    // Write the rest of the weeks
      
    for (k=2k<7k++) {
        
    vCode vCode "<tr>";
        
    vWeeks++;
        for (
    j=0j<7j++) {
          
    vCode vCode "<td ";

          if (
    this.is_today(vDay)){
            
    vCode vCode "class=\"today\"";
          }

          
    vCode vCode +
          
    "onMouseOver=\"this.style.cursor='pointer'; return true;\" " +
          
    //"onBlur=\"fill_date();return true;\" " +
          
    "onClick=\"set_date('" field_id "','" this.format_data(vDay) + "');" +
          
    "show_hide_layer('all');control_select('visible');return true;\"";
          
    vCode vCode ">" vDay "</td>";
          
    vDay=vDay 1;

          if (
    vDay vLastDay) {
            
    vOnLastDay 1;
            break;
          }
        }

        if (
    == 6)
          
    vCode vCode "</tr>";
        if (
    vOnLastDay == 1)
          break;
      }


      
    // Fill up the rest of last week with proper blanks, so that we get proper square blocks
      
    for (m=1m<(7-j); m++) {
        
    vCode vCode "<td class=\"we\">&nbsp;</td>";
      }

      
    /* Add an extra line of days at the bottom, if needed, to keep the vertical size consistent. */
      
    while (vWeeks<6){
        
    vCode vCode "<tr>";
        for (
    i=0i<7i++) {
          
    vCode vCode "<td class=\"we\">&nbsp;</td>";
        }
        
    vCode vCode "</tr>";
        
    vWeeks++;
      }

      
    vCode += "</table>";
      return 
    vCode;
    }

    Calendar.prototype.is_today = function(vday) {
      var 
    vNowDay gNow.getDate();
      var 
    vNowMonth gNow.getMonth();
      var 
    vNowYear gNow.getFullYear();

      if (
    vday == vNowDay && this.gMonth == vNowMonth && this.gYear == vNowYear)
        return 
    true;
      return 
    false;
    }

    Calendar.prototype.is_weekend = function(vday) {
      var 
    i;
      for (
    i=0i<weekend.lengthi++) {
        if (
    vday == weekend[i])
          return 
    true;
      }
      return 
    false;
    }

    Calendar.prototype.format_data = function(p_day) {
      var 
    vData;
      var 
    vMonth this.gMonth;
      
    vMonth = (vMonth.toString().length 2) ? "0" vMonth vMonth;
      var 
    vMon Calendar.get_month(this.gMonth).substr(0,3).toUpperCase();
      var 
    vFMon Calendar.get_month(this.gMonth).toUpperCase();
      var 
    vY4 = new String(this.gYear);
      var 
    vY2 = new String(this.gYear.substr(2,2));
      var 
    vDD = (p_day.toString().length 2) ? "0" p_day p_day;

      switch (
    this.gFormat) {
        case 
    "MM\/DD\/YYYY" :
          
    vData vMonth "\/" vDD "\/" vY4;
          break;
        case 
    "MM\/DD\/YY" :
          
    vData vMonth "\/" vDD "\/" vY2;
          break;
        case 
    "MM-DD-YYYY" :
          
    vData vMonth "-" vDD "-" vY4;
          break;
        case 
    "YYYY-MM-DD" :
          
    vData vY4 "-" vMonth "-" vDD;
          break;
        case 
    "MM-DD-YY" :
          
    vData vMonth "-" vDD "-" vY2;
          break;
        case 
    "DD\/MON\/YYYY" :
          
    vData vDD "\/" vMon "\/" vY4;
          break;
        case 
    "DD\/MON\/YY" :
          
    vData vDD "\/" vMon "\/" vY2;
          break;
        case 
    "DD-MON-YYYY" :
          
    vData vDD "-" vMon "-" vY4;
          break;
        case 
    "DD-MON-YY" :
          
    vData vDD "-" vMon "-" vY2;
          break;
        case 
    "DD\/MONTH\/YYYY" :
          
    vData vDD "\/" vFMon "\/" vY4;
          break;
        case 
    "DD\/MONTH\/YY" :
          
    vData vDD "\/" vFMon "\/" vY2;
          break;
        case 
    "DD-MONTH-YYYY" :
          
    vData vDD "-" vFMon "-" vY4;
          break;
        case 
    "DD-MONTH-YY" :
          
    vData vDD "-" vFMon "-" vY2;
          break;
        case 
    "DD\/MM\/YYYY" :
          
    vData vDD "\/" vMonth "\/" vY4;
          break;
        case 
    "DD\/MM\/YY" :
          
    vData vDD "\/" vMonth "\/" vY2;
          break;
        case 
    "DD-MM-YYYY" :
          
    vData vDD "-" vMonth "-" vY4;
          break;
        case 
    "DD-MM-YY" :
          
    vData vDD "-" vMonth "-" vY2;
          break;
        case 
    "MONTH DD, YYYY" :
          
    vData vFMon.substring(0,1).toUpperCase() + vFMon.substring(1,vFMon.length).toLowerCase() + " " vDD ", " vY4;
    //      vData = vFMon.toLowerCase().ucFirst() + " " + vDD + ", " + vY4;
          
    break;
        default :
          
    vData vMonth "\/" vDD "\/" vY4;
      }

      return 
    vData;
    }

    function 
    Build(p_itemp_monthp_yearp_format) {
      
    gCal = new Calendar(p_itemp_monthp_yearp_format);

      
    // Customize your Calendar here..
      
    gCal.gBGColor="white";
      
    gCal.gLinkColor="black";
      
    gCal.gTextColor="black";
      
    gCal.gHeaderColor="black";

      
    // initialize the content string
      
    ggWinContent "";
      
    gCal.show();

      
    // Print the calendar inside appropriate division
      
    document.getElementById(calDiv).innerHTML ggWinContent;
      
    //overlib(ggWinContent, STICKY, FULLHTML, FIXX, xpos, FIXY, ypos, OFFSETX, -1, OFFSETY, -1);
    }

    function 
    control_select(val)
    {
      if (!
    i6 && !i) return;
      for (var 
    0document.event_new.elements.lengthi++) {
        var 
    document.event_new.elements[i];
        if (
    e.type == 'select-one') {
          
    e.style.visibility=val;
        }
      }
    }


    function 
    set_date(field_idday)
    {
      
    document.getElementById(field_id).value=day;
      
    //if (field_id == 'end_date')
        
    fill_date(day);
        
    check_end_date();
    }


    // fill range start date with contents of when start date.
    function fill_date(day)
    {
     if (
    calDiv != 'cal_start_date')
       return;

     
    document.getElementById('range_start_date').value day;
     
    // if a value hasn't been set for when end date, mirror the when start date
     
    var val document.getElementById('end_date').value;
     if (
    val == '' || val == fullDate)
       
    document.getElementById('end_date').value day;

     return;
    }


    function 
    fill_end_time(objtime_field)
    {
      if (
    time_field != 'start_time')
        return;

     var 
    etimesuffix;
     var 
    String(obj.innerHTML);
     if (
    v.match("am"))
       
    suffix "am";
     else
       
    suffix "pm";

     var 
    num v.split(':');
     var 
    first num[0];
     var 
    last num[1].replace(suffix"");
     var 
    num parseInt(v.replace(/:/, ""));

     if (
    first == '11')
     {
       if (
    suffix == 'am')
         
    suffix 'pm'
       
    else
         
    suffix 'am';
     }
     if (
    num == '1200') {
      
    etime '1:00';
     }
     else if (
    num == '1230') {
       
    etime '1:30';
     }
     else {
       
    etime String(num 100);
       if (
    etime.length == 3)
       {
         var 
    nfirst etime.substring(0,1);
         var 
    nlast etime.substring(1);
       }
       else
       {
         var 
    nfirst etime.substring(0,2);
         var 
    nlast etime.substring(2);
       }
       
    etime nfirst ":" nlast;
     }
     
    etime etime suffix;
     
    document.getElementById('end_time').value etime;
    }

    function 
    set_time(objtime_field)
    {
     
    fill_end_time(objtime_field);

     
    document.getElementById(time_field).value obj.innerHTML;
     
    show_hide_layer('all');
     
    control_select('visible');
    }

    function 
    show_time(time_idtime_field)
    {
      var 
    box '<div style="overflow: auto; display: block; position: absolute; width: 80px; height: 120px; z-index: 2;">'
      
    '<div id="time-inner-box">'
      
    '<div onClick="set_time(this, \'' time_field '\');" >6:00am</div>'
      
    '<div onClick="set_time(this, \'' time_field '\');" >6:30am</div>'
      
    '<div onClick="set_time(this, \'' time_field '\');" >7:00am</div>'
      
    '<div onClick="set_time(this, \'' time_field '\');" >7:30am</div>'
      
    '<div onClick="set_time(this, \'' time_field '\');" >8:00am</div>'
      
    '<div onClick="set_time(this, \'' time_field '\');" >8:30am</div>'
      
    '<div onClick="set_time(this, \'' time_field '\');" >9:00am</div>'
      
    '<div onClick="set_time(this, \'' time_field '\');" >9:30am</div>'
      
    '<div onClick="set_time(this, \'' time_field '\');" >10:00am</div>'
      
    '<div onClick="set_time(this, \'' time_field '\');" >10:30am</div>'
      
    '<div onClick="set_time(this, \'' time_field '\');" >11:00am</div>'
      
    '<div onClick="set_time(this, \'' time_field '\');" >11:30am</div>'
      
    '<div onClick="set_time(this, \'' time_field '\');" >12:00pm</div>'
      
    '<div onClick="set_time(this, \'' time_field '\');" >12:30pm</div>'
      
    '<div onClick="set_time(this, \'' time_field '\');" >1:00pm</div>'
      
    '<div onClick="set_time(this, \'' time_field '\');" >1:30pm</div>'
      
    '<div onClick="set_time(this, \'' time_field '\');" >2:00pm</div>'
      
    '<div onClick="set_time(this, \'' time_field '\');" >2:30pm</div>'
      
    '<div onClick="set_time(this, \'' time_field '\');" >3:00pm</div>'
      
    '<div onClick="set_time(this, \'' time_field '\');" >3:30pm</div>'
      
    '<div onClick="set_time(this, \'' time_field '\');" >4:00pm</div>'
      
    '<div onClick="set_time(this, \'' time_field '\');" >4:30pm</div>'
      
    '<div onClick="set_time(this, \'' time_field '\');" >5:00pm</div>'
      
    '<div onClick="set_time(this, \'' time_field '\');" >5:30pm</div>'
      
    '<div onClick="set_time(this, \'' time_field '\');" >6:00pm</div>'
      
    '<div onClick="set_time(this, \'' time_field '\');" >6:30pm</div>'
      
    '<div onClick="set_time(this, \'' time_field '\');" >7:00pm</div>'
      
    '<div onClick="set_time(this, \'' time_field '\');" >7:30pm</div>'
      
    '<div onClick="set_time(this, \'' time_field '\');" >8:00pm</div>'
      
    '<div onClick="set_time(this, \'' time_field '\');" >8:30pm</div>'
      
    '<div onClick="set_time(this, \'' time_field '\');" >9:00pm</div>'
      
    '<div onClick="set_time(this, \'' time_field '\');" >9:30pm</div>'
      
    '<div onClick="set_time(this, \'' time_field '\');" >10:00pm</div>'
      
    '<div onClick="set_time(this, \'' time_field '\');" >10:30pm</div>'
      
    '<div onClick="set_time(this, \'' time_field '\');" >11:00pm</div>'
      
    '<div onClick="set_time(this, \'' time_field '\');" >11:30pm</div>'
      
    '<div onClick="set_time(this, \'' time_field '\');" >12:00am</div>'
      
    '<div onClick="set_time(this, \'' time_field '\');" >12:30am</div>'
      
    '<div onClick="set_time(this, \'' time_field '\');" >1:00am</div>'
      
    '<div onClick="set_time(this, \'' time_field '\');" >1:30am</div>'
      
    '<div onClick="set_time(this, \'' time_field '\');" >2:00am</div>'
      
    '<div onClick="set_time(this, \'' time_field '\');" >2:30am</div>'
      
    '<div onClick="set_time(this, \'' time_field '\');" >3:00am</div>'
      
    '<div onClick="set_time(this, \'' time_field '\');" >3:30am</div>'
      
    '<div onClick="set_time(this, \'' time_field '\');" >4:00am</div>'
      
    '<div onClick="set_time(this, \'' time_field '\');" >4:30am</div>'
      
    '<div onClick="set_time(this, \'' time_field '\');" >5:00am</div>'
      
    '<div onClick="set_time(this, \'' time_field '\');" >5:30am</div>'
      
    '</div>'
      
    '</div>';

      
    control_select('hidden');
      
    show_hide_layer(time_id);
      
    document.getElementById(time_id).innerHTML box;
    }

    function 
    show_calendar() {

      
    field_id = new String(arguments[4]);
      
    calDiv = new String(arguments[5]);
      
    /*
        arguments:
        1: p_month : 0-11 for Jan-Dec; 12 for All Months.
        2: p_year : 4-digit year
        3: x position of calendar
        4: y position of calendar
        5: field_id: id of form field to populate with date
        5: calDiv: document division to write calendar to
      */

      
    p_item null;
      
    p_format "MONTH DD, YYYY";
      
    p_format "MM/DD/YYYY";
      if (
    arguments[0] == "" || arguments[0] == null)
        
    p_month = new String(gNow.getMonth());
      else
        
    p_month arguments[0];

      if (
    arguments[1] == "" || arguments[1] == null)
        
    p_year = new String(gNow.getFullYear().toString());
      else
        
    p_year arguments[1];


      if (
    arguments[2] == "" || arguments[2] == null)
        
    ggPosX 10;
      else
        
    ggPosX arguments[2];

      if (
    arguments[3] == "" || arguments[3] == null)
        
    ggPosY 10;
      else
        
    ggPosY arguments[3];

      
    Build(p_itemp_monthp_yearp_format);


  • #6
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,075
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Question Link to problem?

    Do you have a link to a page that uses all the script?

    I have been unable to create the problem yet with the parts given.

    I can see the calendar for September 2008 with the '<<' and '>>' links
    but I'm getting a 'field_id' is not defined error regardless of where I put
    the additional script of the last page.

  • #7
    New to the CF scene
    Join Date
    Sep 2008
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    example

    Here's a test page with an example of the date selection fields. As I mentioned the previous & next month links cause the calendar to close in FF3.

    http://www.trianglesource.com/dev/cal.html

  • #8
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,075
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Arrow Something to consider ...

    I don't know if this is the problem, but it does look suspicious:
    PHP Code:
      ggWinContent += ("<table class=\"minical\" cellpadding=\"0\" cellspacing=\"1\">");

      
    // Previous month
      //ggWinContent += ("<td valign=middle align=center " +
        
    ggWinContent += ("<tr nowrap><th class=\"arrows top\" " +
        
    "onClick=\"Build('" this.gReturnItem "', '" prevMM "', '" prevYYYY "', '" this.gFormat "'" ");\" " +
        
    "onMouseOver=\"window.status='Go back one month'; return true;\" " +
        
    "onMouseOut=\"window.status=''; return true;\"" +
        
    "><A HREF=\"javascript:void(0);\" " +
        
    "onClick=\"Build('" this.gReturnItem "', '" prevMM "', '" prevYYYY "', '" this.gFormat "'" ");\">" +
        
    "&lt;&lt;<\/A></th>");

      
    // Month name
      
    ggWinContent += ("<th class=\"title top\" colspan=\"5\">" this.gMonthName " " this.gYear "</th>");

      
    // Next month
      //ggWinContent += ("<td valign=middle align=center " +
      
    ggWinContent += ("<th class=\"arrows top\" " +
        
    "onClick=\"Build('" this.gReturnItem "', '" nextMM "', '" nextYYYY "', '" this.gFormat "'" ");\" " +
        
    "onMouseOver=\"window.status='Go back one month'; return true;\" " +
        
    "onMouseOut=\"window.status=''; return true;\"" +
        
    "><A HREF=\"javascript:void(0);\" " +
        
    "onClick=\"Build('" this.gReturnItem "', '" nextMM "', '" nextYYYY "', '" this.gFormat "'" ");\">" +
        
    "&gt;&gt;<\/A></th>");

      
    ggWinContent += ("</tr>"); 
    The back-to-back calls to the Build() function confuse me so I could understand how the computer might become so also.

    I'm also not sure that the <TD> tag has an onclick() function associated with it, but I haven't look this up yet.
    If it does, then I'm not sure which action takes precedence, the <TH> or the <A>.

    Again, I'm not sure this is the problem but it might be a start place in the code to investigate further.
    Might try to eliminate one call to the 'Built()' function and then the other to see if it makes a difference.
    Last edited by jmrker; 09-14-2008 at 03:33 PM.


  •  

    Posting Permissions

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