www.webdeveloper.com
Results 1 to 4 of 4

Thread: Calendar Script for entering dates in form

  1. #1
    Join Date
    Jul 2008
    Posts
    19

    Calendar Script for entering dates in form

    Hi,

    I downloaded a calendar script that allows a user to just click on the date and have it populate the form input field- the problem is it lets you enter dates previous to today. I would like it so it could not enter any dates less than today.

    Problem is, I know nothing about javascript. I am less than a noobie.

    Would some kind soul have a look and see if it would be possible to do and show me what to do.

    The code is below. There is also a css file which I did not include.

    Thanks muchly.


    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();
        }
    
        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;
        }
      }

  2. #2
    Join Date
    Jul 2008
    Posts
    19
    I had to post the script in two posts as I got a message it was to long. It is only 358 lines.

    Code:
      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>");

  3. #3
    Join Date
    Jul 2008
    Posts
    19
    Anyone?

  4. #4
    Join Date
    Jul 2008
    Posts
    19
    Anyone know of a forum where people actually respond and help?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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

"

"

X vBulletin 4.2.2 Debug Information

  • Page Generation 0.09564 seconds
  • Memory Usage 2,886KB
  • Queries Executed 13 (?)
More Information
Template Usage (33):
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (2)bbcode_code
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (4)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (4)postbit
  • (4)postbit_onlinestatus
  • (4)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (71):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates