SitePoint Sponsor

User Tag List

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

    highlite date when selected in my calendar .

    Hi i want date to be highlited when user selects date from the calendar.here is my code works in firefox when user selects manual option calendar gets displayed can anyone help with code thanks.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
      <title>htmlDatePicker Test Page (CFML)</title>
      <script language="Javascript" type="text/javascript">
      
    /***************************************************************************************/
    var HighlightToday  = true;   
                         // use true or false to have the current day highlighted
    var DisablePast    = true;                        // use true or false to allow past dates to be selectable
    var MonthNames = new Array("January","February","March","April","May","June","July","August","September","October","November","December"); // The month names in your native language can be substituted below
    var now = new Date();                            // Global Vars
    var dest = null;
    var ny = now.getFullYear();                     // Today's Date
    var nm = now.getMonth();
    var nd = now.getDate();
    var sy = 0;                                     // currently Selected date
    var sm = 0;
    var sd = 0;
    var y = now.getFullYear();                         // Working Date
    var m = now.getMonth();
    var d = now.getDate();
    var l = 0;
    var t = 0;
    var MonthLengths = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
    
    /*
      Function: GetDate(control)
    
      Arguments:
        control = ID of destination control
    */
    function GetDate() {
      
      EnsureCalendarExists();
      //DestroyCalendar();
      // One arguments is required, the rest are optional
      // First arguments must be the ID of the destination control
      if(arguments[0] == null || arguments[0] == "") {                // arguments not defined, so display error and quit
        alert("ERROR: Destination control required in funciton call GetDate()");
        return;
      } else {
        dest = arguments[0];                                        // copy argument
      }
      y = now.getFullYear();
      m = now.getMonth();
      d = now.getDate();
      sm = 0;
      sd = 0;
      sy = 0;
      var cdval = dest.value;
      if(/\d{1,2}.\d{1,2}.\d{4}/.test(dest.value)) {                // element contains a date, so set the shown date
        var vParts = cdval.split("/");                                 // assume mm/dd/yyyy
        sm = vParts[0] - 1;
        sd = vParts[1];
        sy = vParts[2];
        m=sm;
        d=sd;
        y=sy;
    
        }
     
    //  l = dest.offsetLeft; // + dest.offsetWidth;
    //  t = dest.offsetTop - 125;   // Calendar is displayed 125 pixels above the destination element
    //  if(t<0) { t=0; }      // or (somewhat) over top of it. ;)/>/>
    
      /* Calendar is displayed 125 pixels above the destination element
      or (somewhat) over top of it. ;)/>/>*/
      //l = dest.offsetLeft + dest.offsetParent.offsetLeft;
      //t = dest.offsetTop - 125;
      //if(t < 0) t = 0; // >
     // DrawCalendar();
    myFunction();
      }
    
    /*
      function DestoryCalendar()
      
      Purpose: Destory any already drawn calendar so a new one can be drawn
    */
    function DestroyCalendar() {
      var cal = document.getElementById("dpCalendar");
      if(cal != null) {
        cal.innerHTML = null;
        cal.style.display = "none";
      }
      return
    }
    
    function PrevMonth() {
      m--;
      if(m==-1) {
        m = 11;
        y--;
      }
     //DrawCalendar();
     myFunction();
    }
    
    
    
    function NextMonth() {
      m++;
      if(m==12) {
        m = 0;
        y++;
      }
      //DrawCalendar();
    myFunction();
    }
    
    
    function PreviousYear() {
      
      if(y) {
       
        y--;
      }
      //DrawCalendar();
    myFunction();
    }
    
    function NextYear() {
      
      if(y) {
     
        y++;
      }
      //DrawCalendar();
    myFunction();
    }
    
    function ReturnDay(day) {
      cDest = document.getElementById(dest);
      dest.value = (m+1)+"/"+day+"/"+y;
      document.getElementById("txtDate").value = dest.value;
      //DestroyCalendar();
    }
    
    function EnsureCalendarExists() {
      if(document.getElementById("demo") == null) {
        var eCalendar = document.createElement("div");
        eCalendar.setAttribute("id", "demo");
        document.body.appendChild(eCalendar);
      }
    }
    
    function isLeapYear(dTest) {
      var y = dTest.getYear();
      var bReturn = false;
      
      if(y % 4 == 0) {
        if(y % 100 != 0) {
          bReturn = true;
        } else {
          if (y % 400 == 0) {
            bReturn = true;
          }
        }
      }
      
      return bReturn;
    }  
    function myFunction()
    {
    //function ReturnDay(day);
    //GetDate(this);
    //DestroyCalendar();
    var str = document.getElementById("dpCalendar");
    var sCal = "<table border=0>.<tr><td class=\"cellButton\">&nbsp;<a href=\"javascript: PrevMonth();\"  title=\"Previous Month\">&lt;&lt;</a>&nbsp;</td>"+
        "<td class=\"cellMonth\" width=\"45%\" colspan=\"3\">&nbsp;&nbsp;&nbsp;&nbsp;"+MonthNames[m]+"  &nbsp;</td>"+
       
        
        "<td class=\"cellButton\"></td></tr>"+
        "<td class=\"cellButton\"><a href=\"javascript: PreviousYear();\" title=\"Next Month\">&gt;&gt;</a>&nbsp;"+y+"</td>"+
        "<td class=\"cellButton\"><a href=\"javascript: NextYear();\" title=\"Next Month\">&gt;&gt;</a>&nbsp;</td></tr>"+
        "<tr><td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td></tr>";
    var wDay = 1;
    var wDate = new Date(y,m,wDay);
      if(isLeapYear(wDate)) 
      {
        MonthLengths[1] = 29;
      } else 
      {
        MonthLengths[1] = 28;
      }
      var dayclass = "";
      var isToday = false;
      for(var r=1; r<7; r++) 
      {
        sCal = sCal + "<tr>";
        for(var c=0; c<7; c++) 
        {
          var wDate = new Date(y,m,wDay);
          if(wDate.getDay() == c && wDay<=MonthLengths[m]) 
          {
            if(wDate.getDate()==sd && wDate.getMonth()==sm && wDate.getFullYear()==sy) {
              dayclass = "cellSelected";
              isToday = true;  // only matters if the selected day IS today, otherwise ignored.
            } else if(wDate.getDate()==nd && wDate.getMonth()==nm && wDate.getFullYear()==ny && HighlightToday) {
              dayclass = "cellToday";
              isToday = true;
            } else {
              dayclass = "cellDay";
              isToday = false;
            }
            if(((now > wDate) && !DisablePast) || (now <= wDate) || isToday) { // >
              // user wants past dates selectable
              sCal = sCal + "<td class=\""+dayclass+"\"><a href=\"javascript: ReturnDay("+wDay+");\">"+wDay+"</a></td>";
            } else {
              // user wants past dates to be read only
              sCal = sCal + "<td class=\""+dayclass+"\">"+wDay+"</td>";
            }
            wDay++;
          } else {
            sCal = sCal + "<td class=\"unused\"></td>";
          }
        }
        sCal = sCal + "</tr>";
     
     }
    
    document.getElementById("demo").innerHTML = sCal;
    
    } 
    function showDate() { 
    document.getElementById("txtDate").value = new Date(); 
    
    } 
    function toggleview(element1) {
       showDate();
       GetDate(this);
       element1 = document.getElementById(element1);
       if (element1.style.display == 'block' || element1.style.display == '')
          element1.style.display = 'none';
       else
          element1.style.display = 'block';
       return;
    }
    </script>
    
    <style type="text/css">
    /* The day of the month cell that is selected */
    #dpCalendar .cellSelected {
      border: 1px solid green;
      background-color: #ffdddd;
      color: black;
      text-align: center;
    }
    </style>
    </head>
    <body>
    <form name="frmMain" id="frmMain" action="#" method="get">
     
    Automatic <input type="textbox" size="60" id="txtDate" name="date" value=""> 
    <input type="submit">
    </form>
    <select id="colorselector">
     
        <option>select</option>
        <option value="red" onclick="toggleview('demo')">Automatic </option>
        <option value="demo" onclick="toggleview('demo')" >Manual</option>
    </select>
    <br>
    <br>
    <br>
    
    <div id="demo"></div>
    </body>
    </html>
    Last edited by spikeZ; Mar 7, 2014 at 15:04.


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
  •