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 7 of 7
  1. #1
    New Coder
    Join Date
    Sep 2010
    Posts
    69
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Pop up calendar code

    So i have some code that will show a pop up calendar for a date field in my web form. After the date is selected from the calendar it displays in the input box in the form mm-dd-yyyy. I need it to be in the form yyyy-mm-dd, i've looked through the code and tried to figure it out but havent had any luck yet.

    Any ideas?

    Code:
    function positionInfo(object) {
    
      var p_elm = object;
    
      this.getElementLeft = getElementLeft;
      function getElementLeft() {
        var x = 0;
        var elm;
        if(typeof(p_elm) == "object"){
          elm = p_elm;
        } else {
          elm = document.getElementById(p_elm);
        }
        while (elm != null) {
          if(elm.style.position == 'relative') {
            break;
          }
          else {
            x += elm.offsetLeft;
            elm = elm.offsetParent;
          }
        }
        return parseInt(x);
      }
    
      this.getElementWidth = getElementWidth;
      function getElementWidth(){
        var elm;
        if(typeof(p_elm) == "object"){
          elm = p_elm;
        } else {
          elm = document.getElementById(p_elm);
        }
        return parseInt(elm.offsetWidth);
      }
    
      this.getElementRight = getElementRight;
      function getElementRight(){
        return getElementLeft(p_elm) + getElementWidth(p_elm);
      }
    
      this.getElementTop = getElementTop;
      function getElementTop() {
        var y = 0;
        var elm;
        if(typeof(p_elm) == "object"){
          elm = p_elm;
        } else {
          elm = document.getElementById(p_elm);
        }
        while (elm != null) {
          if(elm.style.position == 'relative') {
            break;
          }
          else {
            y+= elm.offsetTop;
            elm = elm.offsetParent;
          }
        }
        return parseInt(y);
      }
    
      this.getElementHeight = getElementHeight;
      function getElementHeight(){
        var elm;
        if(typeof(p_elm) == "object"){
          elm = p_elm;
        } else {
          elm = document.getElementById(p_elm);
        }
        return parseInt(elm.offsetHeight);
      }
    
      this.getElementBottom = getElementBottom;
      function getElementBottom(){
        return getElementTop(p_elm) + getElementHeight(p_elm);
      }
    }
    
    function CalendarControl() {
    
      var calendarId = 'CalendarControl';
      var currentYear = 0;
      var currentMonth = 0;
      var currentDay = 0;
    
      var selectedYear = 0;
      var selectedMonth = 0;
      var selectedDay = 0;
    
      var months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
      var dateField = null;
    
      function getProperty(p_property){
        var p_elm = calendarId;
        var elm = null;
    
        if(typeof(p_elm) == "object"){
          elm = p_elm;
        } else {
          elm = document.getElementById(p_elm);
        }
        if (elm != null){
          if(elm.style){
            elm = elm.style;
            if(elm[p_property]){
              return elm[p_property];
            } else {
              return null;
            }
          } else {
            return null;
          }
        }
      }
    
      function setElementProperty(p_property, p_value, p_elmId){
        var p_elm = p_elmId;
        var elm = null;
    
        if(typeof(p_elm) == "object"){
          elm = p_elm;
        } else {
          elm = document.getElementById(p_elm);
        }
        if((elm != null) && (elm.style != null)){
          elm = elm.style;
          elm[ p_property ] = p_value;
        }
      }
    
      function setProperty(p_property, p_value) {
        setElementProperty(p_property, p_value, calendarId);
      }
    
      function getDaysInMonth(year, month) {
        return [31,((!(year % 4 ) && ( (year % 100 ) || !( year % 400 ) ))?29:28),31,30,31,30,31,31,30,31,30,31][month-1];
      }
    
      function getDayOfWeek(year, month, day) {
        var date = new Date(year,month-1,day)
        return date.getDay();
      }
    
      this.clearDate = clearDate;
      function clearDate() {
        dateField.value = '';
        hide();
      }
    
      this.setDate = setDate;
      function setDate(year, month, day) {
        if (dateField) {
          if (month < 10) {month = "0" + month;}
          if (day < 10) {day = "0" + day;}
    
          var dateString = month+"-"+day+"-"+year;
          dateField.value = dateString;
          hide();
        }
        return;
      }
    
      this.changeMonth = changeMonth;
      function changeMonth(change) {
        currentMonth += change;
        currentDay = 0;
        if(currentMonth > 12) {
          currentMonth = 1;
          currentYear++;
        } else if(currentMonth < 1) {
          currentMonth = 12;
          currentYear--;
        }
    
        calendar = document.getElementById(calendarId);
        calendar.innerHTML = calendarDrawTable();
      }
    
      this.changeYear = changeYear;
      function changeYear(change) {
        currentYear += change;
        currentDay = 0;
        calendar = document.getElementById(calendarId);
        calendar.innerHTML = calendarDrawTable();
      }
    
      function getCurrentYear() {
        var year = new Date().getYear();
        if(year < 1900) year += 1900;
        return year;
      }
    
      function getCurrentMonth() {
        return new Date().getMonth() + 1;
      } 
    
      function getCurrentDay() {
        return new Date().getDate();
      }
    
      function calendarDrawTable() {
    
        var dayOfMonth = 1;
        var validDay = 0;
        var startDayOfWeek = getDayOfWeek(currentYear, currentMonth, dayOfMonth);
        var daysInMonth = getDaysInMonth(currentYear, currentMonth);
        var css_class = null; //CSS class for each day
    
        var table = "<table cellspacing='0' cellpadding='0' border='0'>";
        table = table + "<tr class='header'>";
        table = table + "  <td colspan='2' class='previous'><a href='javascript:changeCalendarControlMonth(-1);'>&lt;</a> <a href='javascript:changeCalendarControlYear(-1);'>&laquo;</a></td>";
        table = table + "  <td colspan='3' class='title'>" + months[currentMonth-1] + "<br>" + currentYear + "</td>";
        table = table + "  <td colspan='2' class='next'><a href='javascript:changeCalendarControlYear(1);'>&raquo;</a> <a href='javascript:changeCalendarControlMonth(1);'>&gt;</a></td>";
        table = table + "</tr>";
        table = table + "<tr><th>S</th><th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th>S</th></tr>";
    
        for(var week=0; week < 6; week++) {
          table = table + "<tr>";
          for(var dayOfWeek=0; dayOfWeek < 7; dayOfWeek++) {
            if(week == 0 && startDayOfWeek == dayOfWeek) {
              validDay = 1;
            } else if (validDay == 1 && dayOfMonth > daysInMonth) {
              validDay = 0;
            }
    
            if(validDay) {
              if (dayOfMonth == selectedDay && currentYear == selectedYear && currentMonth == selectedMonth) {
                css_class = 'current';
              } else if (dayOfWeek == 0 || dayOfWeek == 6) {
                css_class = 'weekend';
              } else {
                css_class = 'weekday';
              }
    
              table = table + "<td><a class='"+css_class+"' href=\"javascript:setCalendarControlDate("+currentYear+","+currentMonth+","+dayOfMonth+")\">"+dayOfMonth+"</a></td>";
              dayOfMonth++;
            } else {
              table = table + "<td class='empty'>&nbsp;</td>";
            }
          }
          table = table + "</tr>";
        }
    
        table = table + "<tr class='header'><th colspan='7' style='padding: 3px;'><a href='javascript:clearCalendarControl();'>Clear</a> | <a href='javascript:hideCalendarControl();'>Close</a></td></tr>";
        table = table + "</table>";
    
        return table;
      }
    
      this.show = show;
      function show(field) {
        can_hide = 0;
      
        // If the calendar is visible and associated with
        // this field do not do anything.
        if (dateField == field) {
          return;
        } else {
          dateField = field;
        }
    
        if(dateField) {
          try {
            var dateString = new String(dateField.value);
            var dateParts = dateString.split("-");
            
            selectedMonth = parseInt(dateParts[0],10);
            selectedDay = parseInt(dateParts[1],10);
            selectedYear = parseInt(dateParts[2],10);
          } catch(e) {}
        }
    
        if (!(selectedYear && selectedMonth && selectedDay)) {
          selectedMonth = getCurrentMonth();
          selectedDay = getCurrentDay();
          selectedYear = getCurrentYear();
        }
    
        currentYear = selectedYear;
    	currentMonth = selectedMonth;
        currentDay = selectedDay;
    
        if(document.getElementById){
    
          calendar = document.getElementById(calendarId);
          calendar.innerHTML = calendarDrawTable(currentYear, currentMonth);
    
          setProperty('display', 'block');
    
          var fieldPos = new positionInfo(dateField);
          var calendarPos = new positionInfo(calendarId);
    
          var x = fieldPos.getElementLeft();
          var y = fieldPos.getElementBottom();
    
          setProperty('left', x + "px");
          setProperty('top', y + "px");
     
          if (document.all) {
            setElementProperty('display', 'block', 'CalendarControlIFrame');
            setElementProperty('left', x + "px", 'CalendarControlIFrame');
            setElementProperty('top', y + "px", 'CalendarControlIFrame');
            setElementProperty('width', calendarPos.getElementWidth() + "px", 'CalendarControlIFrame');
            setElementProperty('height', calendarPos.getElementHeight() + "px", 'CalendarControlIFrame');
          }
        }
      }
    
      this.hide = hide;
      function hide() {
        if(dateField) {
          setProperty('display', 'none');
          setElementProperty('display', 'none', 'CalendarControlIFrame');
          dateField = null;
        }
      }
    
      this.visible = visible;
      function visible() {
        return dateField
      }
    
      this.can_hide = can_hide;
      var can_hide = 0;
    }
    
    var calendarControl = new CalendarControl();
    
    function showCalendarControl(textField) {
      // textField.onblur = hideCalendarControl;
      calendarControl.show(textField);
    }
    
    function clearCalendarControl() {
      calendarControl.clearDate();
    }
    
    function hideCalendarControl() {
      if (calendarControl.visible()) {
        calendarControl.hide();
      }
    }
    
    function setCalendarControlDate(year, month, day) {
      calendarControl.setDate(year, month, day);
    }
    
    function changeCalendarControlYear(change) {
      calendarControl.changeYear(change);
    }
    
    function changeCalendarControlMonth(change) {
      calendarControl.changeMonth(change);
    }
    
    document.write("<iframe id='CalendarControlIFrame' src='javascript:false;' frameBorder='0' scrolling='no'></iframe>");
    document.write("<div id='CalendarControl'></div>");

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,017
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    Split the date at the hyphen

    var dateSplit = mydate.split("-");
    so dateSplit[0] = mm
    dateSplit[1] = dd
    dateSplit[2] = yyyy

    Then reconstruct the format:

    newDate = dateSplit[2] + "/" + dateSplit[0] + "/" + dateSplit [1];


    Quizmaster: In Shakespeare's Hamlet, a famous quotation is "Get thee to a ......" what?
    Contestant: Church on time.

  • #3
    Regular Coder
    Join Date
    Jul 2002
    Location
    Kansas, USA
    Posts
    487
    Thanks
    0
    Thanked 54 Times in 53 Posts
    Change is in this function:
    Code:
      function setDate(year, month, day) {
        if (dateField) {
          if (month < 10) {month = "0" + month;}
          if (day < 10) {day = "0" + day;}
    
          //var dateString = month+"-"+day+"-"+year;
          var dateString = year+"-"+month+"-"+day;
          dateField.value = dateString;
          hide();
        }
        return;
      }

  • Users who have thanked kansel for this post:

    KatieK (12-20-2010)

  • #4
    New Coder
    Join Date
    Sep 2010
    Posts
    69
    Thanks
    8
    Thanked 0 Times in 0 Posts
    okay, now it comes up in the right format but if i select a date and then try to change my selection it displays the month as 'undefined' and puts the day where the year should go

    ??


  • #5
    New Coder
    Join Date
    Mar 2007
    Posts
    98
    Thanks
    24
    Thanked 4 Times in 4 Posts
    Hiya,

    You need to change the order of the selected fields as follows:

    Change:

    Code:
        if(dateField) {
          try {
            var dateString = new String(dateField.value);
            var dateParts = dateString.split("-");
            
            selectedMonth = parseInt(dateParts[0],10);
            selectedDay = parseInt(dateParts[1],10);
            selectedYear = parseInt(dateParts[2],10);
          } catch(e) {}
        }
    to:

    Code:
        if(dateField) {
          try {
            var dateString = new String(dateField.value);
            var dateParts = dateString.split("-");
            
            selectedMonth = parseInt(dateParts[1],10);
            selectedDay = parseInt(dateParts[2],10);
            selectedYear = parseInt(dateParts[0],10);
          } catch(e) {}
        }

  • Users who have thanked longman for this post:

    KatieK (12-21-2010)

  • #6
    New Coder
    Join Date
    Sep 2010
    Posts
    69
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Hmm.. now when i try to click on one of the dates it doesn't do anything. Tried changing the following code as well but still doesn't work

    from this
    Code:
    dateSplit[0] = mm
    dateSplit[1] = dd
    dateSplit[2] = yyyy 
    newDate = dateSplit[2] + "/" + dateSplit[0] + "/" + dateSplit [1];
    to this
    Code:
    dateSplit[1] = mm
    dateSplit[2] = dd
    dateSplit[0] = yyyy
    newDate = dateSplit[0] + "/" + dateSplit[1] + "/" + dateSplit [2];
    This error message comes up in corner: mydate is undefined on line 158.

    here's line 158
    Code:
    var dateSplit = mydate.split("-");
    Last edited by KatieK; 12-21-2010 at 05:00 PM. Reason: add code

  • #7
    New Coder
    Join Date
    Sep 2010
    Posts
    69
    Thanks
    8
    Thanked 0 Times in 0 Posts
    nevermind, i got it to work now! had some old code i had put in that was messing things up

    Here's the final code
    Code:
    function positionInfo(object) {
    
      var p_elm = object;
    
      this.getElementLeft = getElementLeft;
      function getElementLeft() {
        var x = 0;
        var elm;
        if(typeof(p_elm) == "object"){
          elm = p_elm;
        } else {
          elm = document.getElementById(p_elm);
        }
        while (elm != null) {
          if(elm.style.position == 'relative') {
            break;
          }
          else {
            x += elm.offsetLeft;
            elm = elm.offsetParent;
          }
        }
        return parseInt(x);
      }
    
      this.getElementWidth = getElementWidth;
      function getElementWidth(){
        var elm;
        if(typeof(p_elm) == "object"){
          elm = p_elm;
        } else {
          elm = document.getElementById(p_elm);
        }
        return parseInt(elm.offsetWidth);
      }
    
      this.getElementRight = getElementRight;
      function getElementRight(){
        return getElementLeft(p_elm) + getElementWidth(p_elm);
      }
    
      this.getElementTop = getElementTop;
      function getElementTop() {
        var y = 0;
        var elm;
        if(typeof(p_elm) == "object"){
          elm = p_elm;
        } else {
          elm = document.getElementById(p_elm);
        }
        while (elm != null) {
          if(elm.style.position == 'relative') {
            break;
          }
          else {
            y+= elm.offsetTop;
            elm = elm.offsetParent;
          }
        }
        return parseInt(y);
      }
    
      this.getElementHeight = getElementHeight;
      function getElementHeight(){
        var elm;
        if(typeof(p_elm) == "object"){
          elm = p_elm;
        } else {
          elm = document.getElementById(p_elm);
        }
        return parseInt(elm.offsetHeight);
      }
    
      this.getElementBottom = getElementBottom;
      function getElementBottom(){
        return getElementTop(p_elm) + getElementHeight(p_elm);
      }
    }
    
    function CalendarControl() {
    
      var calendarId = 'CalendarControl';
      var currentYear = 0;
      var currentMonth = 0;
      var currentDay = 0;
    
      var selectedYear = 0;
      var selectedMonth = 0;
      var selectedDay = 0;
    
      var months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
      var dateField = null;
    
      function getProperty(p_property){
        var p_elm = calendarId;
        var elm = null;
    
        if(typeof(p_elm) == "object"){
          elm = p_elm;
        } else {
          elm = document.getElementById(p_elm);
        }
        if (elm != null){
          if(elm.style){
            elm = elm.style;
            if(elm[p_property]){
              return elm[p_property];
            } else {
              return null;
            }
          } else {
            return null;
          }
        }
      }
    
      function setElementProperty(p_property, p_value, p_elmId){
        var p_elm = p_elmId;
        var elm = null;
    
        if(typeof(p_elm) == "object"){
          elm = p_elm;
        } else {
          elm = document.getElementById(p_elm);
        }
        if((elm != null) && (elm.style != null)){
          elm = elm.style;
          elm[ p_property ] = p_value;
        }
      }
    
      function setProperty(p_property, p_value) {
        setElementProperty(p_property, p_value, calendarId);
      }
    
      function getDaysInMonth(year, month) {
        return [31,((!(year % 4 ) && ( (year % 100 ) || !( year % 400 ) ))?29:28),31,30,31,30,31,31,30,31,30,31][month-1];
      }
    
      function getDayOfWeek(year, month, day) {
        var date = new Date(year,month-1,day)
        return date.getDay();
      }
    
      this.clearDate = clearDate;
      function clearDate() {
        dateField.value = '';
        hide();
      }
    
      this.setDate = setDate;
      function setDate(year, month, day) {
        if (dateField) {
          if (month < 10) {month = "0" + month;}
          if (day < 10) {day = "0" + day;}
    
          var dateString = year+"-"+month+"-"+day;
          dateField.value = dateString;
          hide();
        }
        return;
      }
    
      this.changeMonth = changeMonth;
      function changeMonth(change) {
        currentMonth += change;
        currentDay = 0;
        if(currentMonth > 12) {
          currentMonth = 1;
          currentYear++;
        } else if(currentMonth < 1) {
          currentMonth = 12;
          currentYear--;
        }
    
        calendar = document.getElementById(calendarId);
        calendar.innerHTML = calendarDrawTable();
      }
    
      this.changeYear = changeYear;
      function changeYear(change) {
        currentYear += change;
        currentDay = 0;
        calendar = document.getElementById(calendarId);
        calendar.innerHTML = calendarDrawTable();
      }
    
      function getCurrentYear() {
        var year = new Date().getYear();
        if(year < 1900) year += 1900;
        return year;
      }
    
      function getCurrentMonth() {
        return new Date().getMonth() + 1;
      } 
    
      function getCurrentDay() {
        return new Date().getDate();
      }
    
      function calendarDrawTable() {
    
        var dayOfMonth = 1;
        var validDay = 0;
        var startDayOfWeek = getDayOfWeek(currentYear, currentMonth, dayOfMonth);
        var daysInMonth = getDaysInMonth(currentYear, currentMonth);
        var css_class = null; //CSS class for each day
    
        var table = "<table cellspacing='0' cellpadding='0' border='0'>";
        table = table + "<tr class='header'>";
        table = table + "  <td colspan='2' class='previous'><a href='javascript:changeCalendarControlMonth(-1);'>&lt;</a> <a href='javascript:changeCalendarControlYear(-1);'>&laquo;</a></td>";
        table = table + "  <td colspan='3' class='title'>" + months[currentMonth-1] + "<br>" + currentYear + "</td>";
        table = table + "  <td colspan='2' class='next'><a href='javascript:changeCalendarControlYear(1);'>&raquo;</a> <a href='javascript:changeCalendarControlMonth(1);'>&gt;</a></td>";
        table = table + "</tr>";
        table = table + "<tr><th>S</th><th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th>S</th></tr>";
    
        for(var week=0; week < 6; week++) {
          table = table + "<tr>";
          for(var dayOfWeek=0; dayOfWeek < 7; dayOfWeek++) {
            if(week == 0 && startDayOfWeek == dayOfWeek) {
              validDay = 1;
            } else if (validDay == 1 && dayOfMonth > daysInMonth) {
              validDay = 0;
            }
    
            if(validDay) {
              if (dayOfMonth == selectedDay && currentYear == selectedYear && currentMonth == selectedMonth) {
                css_class = 'current';
              } else if (dayOfWeek == 0 || dayOfWeek == 6) {
                css_class = 'weekend';
              } else {
                css_class = 'weekday';
              }
    
              table = table + "<td><a class='"+css_class+"' href=\"javascript:setCalendarControlDate("+currentYear+","+currentMonth+","+dayOfMonth+")\">"+dayOfMonth+"</a></td>";
              dayOfMonth++;
            } else {
              table = table + "<td class='empty'>&nbsp;</td>";
            }
          }
          table = table + "</tr>";
        }
    
        table = table + "<tr class='header'><th colspan='7' style='padding: 3px;'><a href='javascript:clearCalendarControl();'>Clear</a> | <a href='javascript:hideCalendarControl();'>Close</a></td></tr>";
        table = table + "</table>";
    
        return table;
      }
    
      this.show = show;
      function show(field) {
        can_hide = 0;
      
        // If the calendar is visible and associated with
        // this field do not do anything.
        if (dateField == field) {
          return;
        } else {
          dateField = field;
        }
    
        if(dateField) {
          try {
            var dateString = new String(dateField.value);
            var dateParts = dateString.split("-");
            
            selectedMonth = parseInt(dateParts[1],10);
            selectedDay = parseInt(dateParts[2],10);
            selectedYear = parseInt(dateParts[0],10);
          } catch(e) {}
        }
    
        if (!(selectedYear && selectedMonth && selectedDay)) {
          selectedMonth = getCurrentMonth();
          selectedDay = getCurrentDay();
          selectedYear = getCurrentYear();
        }
    
        currentMonth = selectedMonth;
        currentDay = selectedDay;
        currentYear = selectedYear;
    
        if(document.getElementById){
    
          calendar = document.getElementById(calendarId);
          calendar.innerHTML = calendarDrawTable(currentYear, currentMonth);
    
          setProperty('display', 'block');
    
          var fieldPos = new positionInfo(dateField);
          var calendarPos = new positionInfo(calendarId);
    
          var x = fieldPos.getElementLeft();
          var y = fieldPos.getElementBottom();
    
          setProperty('left', x + "px");
          setProperty('top', y + "px");
     
          if (document.all) {
            setElementProperty('display', 'block', 'CalendarControlIFrame');
            setElementProperty('left', x + "px", 'CalendarControlIFrame');
            setElementProperty('top', y + "px", 'CalendarControlIFrame');
            setElementProperty('width', calendarPos.getElementWidth() + "px", 'CalendarControlIFrame');
            setElementProperty('height', calendarPos.getElementHeight() + "px", 'CalendarControlIFrame');
          }
        }
      }
    
      this.hide = hide;
      function hide() {
        if(dateField) {
          setProperty('display', 'none');
          setElementProperty('display', 'none', 'CalendarControlIFrame');
          dateField = null;
        }
      }
    
      this.visible = visible;
      function visible() {
        return dateField
      }
    
      this.can_hide = can_hide;
      var can_hide = 0;
    }
    
    var calendarControl = new CalendarControl();
    
    function showCalendarControl(textField) {
      // textField.onblur = hideCalendarControl;
      calendarControl.show(textField);
    }
    
    function clearCalendarControl() {
      calendarControl.clearDate();
    }
    
    function hideCalendarControl() {
      if (calendarControl.visible()) {
        calendarControl.hide();
      }
    }
    
    function setCalendarControlDate(year, month, day) {
      calendarControl.setDate(year, month, day);
    }
    
    function changeCalendarControlYear(change) {
      calendarControl.changeYear(change);
    }
    
    function changeCalendarControlMonth(change) {
      calendarControl.changeMonth(change);
    }
    
    document.write("<iframe id='CalendarControlIFrame' src='javascript:false;' frameBorder='0' scrolling='no'></iframe>");
    document.write("<div id='CalendarControl'></div>");
    thanks to everyone!


  •  

    Posting Permissions

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