javascript calendar problem

Discussion in 'JavaScript' started by pero2000, Feb 15, 2007.

  1. #1
    Hi,
    I have page with a java calendar for picking two dates -
    date_from and date_to. This is a part af an .asp page that searches database records.
    When user chose date from a calendar, it displays in input field.
    What I need is a function that checks if choosen date_from
    is not in the past (smaller than today) and date_to is not smaller
    then date_from. I'm not so good in java, so if anybody can help...

    This part is in <head>

    <script language = "Javascript">

    <!--Kalendar
    var months = new Array("Sijecanj", "Veljaca", "Ozujak", "Travanj", "Svibanj", "Lipanj", "Srpanj", "Kolovoz", "Rujan", "Listopad", "Studeni", "Prosinac");
    var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
    var days = new Array("N", "P", "U", "S", "C", "P", "S");

    today = new getToday();
    var element_id;

    function getDays(month, year)
    {
    // Provjera prijestupne godine
    if (1 == month)
    return ((0 == year % 4) && (0 != (year % 100))) ||
    (0 == year % 400) ? 29 : 28;
    else
    return daysInMonth[month];
    }

    function getToday()
    {
    // Danasnji datum
    this.now = new Date();
    this.year = this.now.getFullYear() ; // Vraca godinu XXXX
    this.month = this.now.getMonth();
    this.day = this.now.getDate();
    }


    function newCalendar()
    {
    var parseYear = parseInt(document.all.year [document.all.year.selectedIndex].text);

    var newCal = new Date(parseYear , document.all.month.selectedIndex, 1);
    var day = -1;
    var startDay = newCal.getDay();
    var daily = 0;

    today = new getToday(); // 1st call
    if ((today.year == newCal.getFullYear() ) && (today.month == newCal.getMonth()))
    day = today.day;
    // Cache the calendar table's tBody section, dayList.
    var tableCal = document.all.calendar.tBodies.dayList;

    var intDaysInMonth =
    getDays(newCal.getMonth(), newCal.getFullYear() );

    for (var intWeek = 0; intWeek < tableCal.rows.length; intWeek++)
    for (var intDay = 0;
    intDay < tableCal.rows[intWeek].cells.length;
    intDay++)
    {
    var cell = tableCal.rows[intWeek].cells[intDay];

    // Start counting days.
    if ((intDay == startDay) && (0 == daily))
    daily = 1;

    // Highlight the current day.
    cell.style.color = (day == daily) ? "red" : "";
    if(day == daily)
    {
    document.all.todayday.innerText= "Danas: " + day + "/" +
    (newCal.getMonth()+1) + "/" + newCal.getFullYear() ;
    }
    // Output the day number into the cell.
    if ((daily > 0) && (daily <= intDaysInMonth))
    cell.innerText = daily++;
    else
    cell.innerText = "";
    }

    }

    function getTodayDay()
    {
    document.all[element_id].value = today.day + "/" + (today.month+1) +
    "/" + today.year;
    //document.all.calendar.style.visibility="hidden";
    document.all.calendar.style.display="none";
    document.all.year.selectedIndex =100;
    document.all.month.selectedIndex = today.month;
    }

    function getDate()
    {
    // This code executes when the user clicks on a day
    // in the calendar.
    if ("TD" == event.srcElement.tagName)
    // Test whether day is valid.
    if ("" != event.srcElement.innerText)
    {
    var mn = document.all.month.selectedIndex+1;
    var Year = document.all.year [document.all.year.selectedIndex].text;
    document.all[element_id].value=event.srcElement.innerText+"/"+mn +"/" +Year;
    //document.all.calendar.style.visibility="hidden";
    document.all.calendar.style.display="none";
    }
    }

    function GetBodyOffsetX(el_name, shift)
    {
    var x;
    var y;
    x = 0;
    y = 0;

    var elem = document.all[el_name];
    do
    {
    x += elem.offsetLeft;
    y += elem.offsetTop;
    if (elem.tagName == "BODY")
    break;
    elem = elem.offsetParent;
    } while (1 > 0);

    shift[0] = x;
    shift[1] = y;
    return x;
    }

    function SetCalendarOnElement(el_name)
    {
    if (el_name=="")
    el_name = element_id;
    var shift = new Array(2);
    GetBodyOffsetX(el_name, shift);
    document.all.calendar.style.pixelLeft = shift[0]; // - document.all.calendar.offsetLeft;
    document.all.calendar.style.pixelTop = shift[1] + 25 ;
    }



    function ShowCalendar(elem_name)
    {
    if (elem_name=="")
    elem_name = element_id;

    element_id = elem_name; // element_id is global variable
    newCalendar();
    SetCalendarOnElement(element_id);
    //document.all.calendar.style.visibility = "visible";
    document.all.calendar.style.display="inline";
    }

    function HideCalendar()
    {
    //document.all.calendar.style.visibility="hidden";
    document.all.calendar.style.display="none";
    }

    function toggleCalendar(elem_name)
    {
    //if (document.all.calendar.style.visibility == "hidden")
    if(document.all.calendar.style.display=="none")
    ShowCalendar(elem_name);
    else
    HideCalendar();
    }

    function search()
    {
    valid=true;
    var dat1 = document.frmL.datum1;
    var dat2 = document.frmL.datum2;

    if (dat1 > dat2)
    {
    alert ('Molimo, unesite ispravan "Datum do" !');
    dat2.focus();
    return false;
    }

    else
    frmL.action = "rezultati-rez.asp"
    method = "POST"
    frmL.submit()

    }
    -->
    </SCRIPT>

    ...this is where dates are shown

    <div align="center"><font face="Arial, Helvetica, sans-serif" size="2">Datum
    od: </font></div>
    </td>
    <td width="48%">
    <INPUT id=datum1 name=datum1 size=15 readonly value="<% Response.Write (Day(Date)& "/" & Month(date) & "/" & year(date)) %>">

    <a href="JavaScript:;" onClick="toggleCalendar('datum1')"><img src="slike/kalendar.gif" width="20" height="17"> </a></td>
    </tr>
    <tr>
    <td width="52%">
    <div align="center"><font face="Arial, Helvetica, sans-serif" size="2">Datum
    do:</font></div>
    </td>
    <td width="48%">
    <%
    dtDanas=Day(date)
    dtSutra=dtDanas + 1
    %>
    <INPUT id=datum2 name=datum2 size=15 readonly value = "<% Response.Write (dtSutra & "/" & Month(date) & "/" & year(date)) %>" >
    <a href="JavaScript:;" onClick="toggleCalendar('datum2')"><img src="slike/kalendar.gif" width="20" height="17"></a> </td>
    </tr>



    ... and in body

    <SELECT id=month onchange=newCalendar()>
    <SCRIPT language=JavaScript>
    // Output months into the document.
    // Select current month.
    for (var intLoop = 0; intLoop < months.length; intLoop++)
    document.write("<OPTION " + (today.month == intLoop ? "Selected" : "") + ">" + months[intLoop]);
    </SCRIPT>
    </SELECT>
    <!-- Year combo box -->
    <SELECT id=year onchange=newCalendar()>
    <SCRIPT language=JavaScript>
    // Output years into the document.
    // Select current year.
    for (var intLoop = (today.year); intLoop < (today.year+2); intLoop++)
    document.write("<OPTION " + (today.year == intLoop ? "Selected" : "") + ">" + intLoop);
    </SCRIPT>
    </SELECT>

    </TD>
    </TR>



    <TR class=days>
    <!-- Generate column for each day. -->
    <SCRIPT language=JavaScript>
    // Output days.
    for (var intLoop = 0; intLoop < days.length; intLoop++)
    document.write("<TD>" + days[intLoop] + "</TD>");
    </SCRIPT>
    </TR>


    <TBODY class=dates id=dayList onclick="getDate('')" vAlign=center>
    <!-- Generate grid for individual days. -->
    <SCRIPT language=JavaScript>
    for (var intWeeks = 0; intWeeks < 6; intWeeks++)
    {
    document.write("<TR>");
    for (var intDays = 0; intDays < days.length; intDays++)
    document.write("<TD></TD>");
    document.write("</TR>");
    }
    </SCRIPT>

    <!-- Generate today day. --></TBODY>
    <TBODY>
    <TR>
    <TD class=today colSpan=5 id=todayday onclick=getTodayDay()></TD>
    <TD align=right colSpan=2><A href="javascript:HideCalendar();"><SPAN style="COLOR: black; FONT-SIZE: 10px"><B>Hide</B></SPAN></A></TD>
    </TR>
     
    pero2000, Feb 15, 2007 IP
  2. pero2000

    pero2000 Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    The code was downloaded from

    http://www.java-scripts.net/javascripts/Calendar-Popup.phtml
     
    pero2000, Feb 16, 2007 IP