www.webdeveloper.com
Results 1 to 2 of 2

Thread: Javascript global variable!

Hybrid View

  1. #1
    Join Date
    Oct 2013
    Posts
    3

    Question Javascript global variable!

    Hello,
    I have a calendar javascript file who is used to fill a date field, in a form.
    After this the value of this date field it's copied to another second date field
    with diferent format.
    The calendar javascript file is called in a onFocus event. After chose the date
    the field is filled and a function called CopyIt() copy the date value changed
    to the second date field.
    The problem that I need to specify the id of the date fields to be used in CopyIt()
    funtion, in calendar javascript file, but I don't want.
    If I need to use this calendar javascript file in another form in the same page
    I need to duplicate the javascript file with other id date fields in CopyIt().
    What I want that to use only one calendar javascript file to more date fields
    only pass throuth the onFocus event the id of the date field respective.
    But I don't know how to create a "global" variable in javascript file with the
    id of the date field to be used in CopyIt() function.

    Any help????

    This the input form fields:

    <input name="fdata" size="12" maxlength="10" style="border:1px solid #003399; font-family: Verdana; font-size: 10px; padding-left:4px; padding-right:4px; padding-top:1px; padding-bottom:1px color:#999999px" onfocus="showCalendarControl(fdata);" value="" id="fdata" readonly>
    <input name="fdata2" size="15" value="" id="fdata2">

    This is the calendar javascript file:

    function formataData(num) {
    var dataS = new String(num);
    var dataPartes = dataS.split("-");

    var sDia = parseInt(dataPartes[0],10);
    if (sDia < 10){ sDia = "0" + sDia }
    var sMes = parseInt(dataPartes[1],10);
    if (sMes < 10){ sMes = "0" + sMes }
    var sAno = parseInt(dataPartes[2],10);
    var Data = sMes + "-" + sDia + "-" + sAno;
    return Data;
    }

    function copyIt() {
    cp = "fdata";
    var x = document.getElementById(cp).value;
    document.getElementById(cp + "2").value = formataData(x);
    }
    ...
    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 = ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro ','Dezembro'];
    var dateField = null;

    ...
    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 = day+"-"+month+"-"+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 class='previous'><a href='javascript:changeCalendarControlMonth(-1);'>&lt;</a></td>";
    table = table + " <td colspan='5' class='title'>" + months[currentMonth-1] + " " + currentYear + "</td>";
    table = table + " <td class='next'><a href='javascript:changeCalendarControlMonth(1);'>&gt;</a></td>";
    table = table + "</tr>";
    table = table + "<tr><th>D</th><th>S</th><th>T</th><th>Q</th><th>Q</th><th>S</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+");copyIt()\" >"+dayOfMonth+"</a></td>";
    dayOfMonth++;
    } else {
    table = table + "<td class='empty'>&nbsp;</td>";
    }
    }
    table = table + "</tr>";
    }
    return table;
    }

    this.show = show;
    function show(field) {
    can_hide = 0;

    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[0],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();

    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. #2
    Join Date
    Oct 2013
    Location
    Boston, MA
    Posts
    13
    Instead of passing the id of the element to the showCalendarControl function, pass "this". That way every time showCalendarControl is called it will have the instance of whatever input element was focused.

    Change:
    HTML Code:
    <input name="fdata" size="12" maxlength="10" style="border:1px solid #003399; font-family: Verdana; font-size: 10px; padding-left:4px; padding-right:4px; padding-top:1px; padding-bottom:1px color:#999999px" onfocus="showCalendarControl(fdata);" value="" id="fdata" readonly>
    <input name="fdata2" size="15" value="" id="fdata2">
    To:
    HTML Code:
    <input name="fdata" size="12" maxlength="10" style="border:1px solid #003399; font-family: Verdana; font-size: 10px; padding-left:4px; padding-right:4px; padding-top:1px; padding-bottom:1px color:#999999px" onfocus="showCalendarControl(this);" value="" id="fdata" readonly>
    <input name="fdata2" size="15" value="" id="fdata2">
    Then in your showCalendarControl function you can manipulate the input however you need to. This will also remove the need of any hard coded ID's in your javascript files.

Thread Information

Users Browsing this Thread

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

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



Recent Articles