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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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:

    Code:
    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
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Stop jumbling your JavaScript with the HTML. Also stop thinking about using global variables in JavaScript - they are completely unnecessary.

    If you make your JavaScript completely separate from the HTML (get that onfocus out of the HTML and into the JavaScript where it belongs) then you can have the JavaScript interact with any web page simply by having id, class or name values in the HTML that the JavaScript knows to look for to attach itself to.

    Once you have all the code for a script together in JavaScript you can wrap it all in an anonymous function so as to remove it completely from the global namespace.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    But are separate, javascript file .js and html file. I not understant, sorry.

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by ganhaoh View Post
    But are separate, javascript file .js and html file. I not understant, sorry.
    onfocus is JavaScript but you have it in the HTML file and not in the JavaScript file.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Worse is

    if (document.all) { // all modern browsers support document.getElementById()

    and

    var dataS = new String(num); // There's very little practical use for String objects as created by new String("foo"). The only advantage a String object has over a primitive string value is that as an object it can store properties.

    But you can create a global variable simply by placing it outside of any function. Mkae sure you assign it a name which cannot clash with another one.

    var myglobalvariable; // global
    function whatever() {
    Last edited by Philip M; 10-03-2013 at 08:23 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #6
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,371
    Thanks
    11
    Thanked 591 Times in 572 Posts
    Code:
    showCalendarControl(fdata);
    should be
    Code:
    showCalendarControl(this);
    and then you can keep passing the form element to each internal function that needs it.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%


  •  

    Posting Permissions

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