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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Apr 2004
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    help on date picker javascript.

    i'm doing a booking page where the user can click a date on the calendar...
    BUT i found some glitches...which i'd be grateful if anyone could help me edit...
    1.i'm only doing monday-friday
    2.the date before today's date cannot be selected...
    this is my code.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <script language="javascript">var weekend = [0,6];
    var weekendColor = "#e0e0e0";
    var fontface = "Verdana";
    var fontsize = 2;

    var gNow = new Date();
    var ggWinCal;
    isNav = (navigator.appName.indexOf("Netscape") != -1) ? true : false;
    isIE = (navigator.appName.indexOf("Microsoft") != -1) ? true : false;

    Calendar.Months = ["January", "February", "March", "April", "May", "June",
    "July", "August", "September", "October", "November", "December"];

    // Non-Leap year Month days..
    Calendar.DOMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
    // Leap year Month days..
    Calendar.lDOMonth = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

    function Calendar(p_item, p_WinCal, p_month, p_year, p_format) {
    if ((p_month == null) && (p_year == null)) return;

    if (p_WinCal == null)
    this.gWinCal = ggWinCal;
    else
    this.gWinCal = p_WinCal;

    if (p_month == null) {
    this.gMonthName = null;
    this.gMonth = null;
    this.gYearly = true;
    } else {
    this.gMonthName = Calendar.get_month(p_month);
    this.gMonth = new Number(p_month);
    this.gYearly = false;
    }

    this.gYear = p_year;
    this.gFormat = p_format;
    this.gBGColor = "white";
    this.gFGColor = "black";
    this.gTextColor = "black";
    this.gHeaderColor = "black";
    this.gReturnItem = p_item;
    }

    Calendar.get_month = Calendar_get_month;
    Calendar.get_daysofmonth = Calendar_get_daysofmonth;
    Calendar.calc_month_year = Calendar_calc_month_year;


    function Calendar_get_month(monthNo) {
    return Calendar.Months[monthNo];
    }

    function Calendar_get_daysofmonth(monthNo, p_year) {
    /*
    Check for leap year ..
    1.Years evenly divisible by four are normally leap years, except for...
    2.Years also evenly divisible by 100 are not leap years, except for...
    3.Years also evenly divisible by 400 are leap years.
    */
    if ((p_year % 4) == 0) {
    if ((p_year % 100) == 0 && (p_year % 400) != 0)
    return Calendar.DOMonth[monthNo];

    return Calendar.lDOMonth[monthNo];
    } else
    return Calendar.DOMonth[monthNo];
    }

    function Calendar_calc_month_year(p_Month, p_Year, incr) {
    /*
    Will return an 1-D array with 1st element being the calculated month
    and second being the calculated year
    after applying the month increment/decrement as specified by 'incr' parameter.
    'incr' will normally have 1/-1 to navigate thru the months.
    */
    var ret_arr = new Array();

    if (incr == -1) {
    // B A C K W A R D
    if (p_Month == 0) {
    ret_arr[0] = 11;
    ret_arr[1] = parseInt(p_Year) - 1;
    }
    else {
    ret_arr[0] = parseInt(p_Month) - 1;
    ret_arr[1] = parseInt(p_Year);
    }
    } else if (incr == 1) {
    // F O R W A R D
    if (p_Month == 11) {
    ret_arr[0] = 0;
    ret_arr[1] = parseInt(p_Year) + 1;
    }
    else {
    ret_arr[0] = parseInt(p_Month) + 1;
    ret_arr[1] = parseInt(p_Year);
    }
    }

    return ret_arr;
    }


    function Calendar_calc_month_year(p_Month, p_Year, incr) {
    /*
    Will return an 1-D array with 1st element being the calculated month
    and second being the calculated year
    after applying the month increment/decrement as specified by 'incr' parameter.
    'incr' will normally have 1/-1 to navigate thru the months.
    */
    var ret_arr = new Array();

    if (incr == -1) {
    // B A C K W A R D
    if (p_Month == 0) {
    ret_arr[0] = 11;
    ret_arr[1] = parseInt(p_Year) - 1;
    }
    else {
    ret_arr[0] = parseInt(p_Month) - 1;
    ret_arr[1] = parseInt(p_Year);
    }
    } else if (incr == 1) {
    // F O R W A R D
    if (p_Month == 11) {
    ret_arr[0] = 0;
    ret_arr[1] = parseInt(p_Year) + 1;
    }
    else {
    ret_arr[0] = parseInt(p_Month) + 1;
    ret_arr[1] = parseInt(p_Year);
    }
    }

    return ret_arr;
    }

    // This is for compatibility with Navigator 3, we have to create and discard one object before the prototype object exists.
    new Calendar();

    Calendar.prototype.getMonthlyCalendarCode = function() {
    var vCode = "";
    var vHeader_Code = "";
    var vData_Code = "";

    // Begin Table Drawing code here..
    vCode = vCode + "<TABLE BORDER=1 BGCOLOR=\"" + this.gBGColor + "\">";

    vHeader_Code = this.cal_header();
    vData_Code = this.cal_data();
    vCode = vCode + vHeader_Code + vData_Code;

    vCode = vCode + "</TABLE>";

    return vCode;
    }

    Calendar.prototype.show = function() {
    var vCode = "";

    this.gWinCal.document.open();

    // Setup the page...
    this.wwrite("<html>");
    this.wwrite("<head><title>Calendar</title>");
    this.wwrite("</head>");

    this.wwrite("<body " +
    "link=\"" + this.gLinkColor + "\" " +
    "vlink=\"" + this.gLinkColor + "\" " +
    "alink=\"" + this.gLinkColor + "\" " +
    "text=\"" + this.gTextColor + "\">");
    this.wwriteA("<FONT FACE='" + fontface + "' SIZE=2><B>");
    this.wwriteA(this.gMonthName + " " + this.gYear);
    this.wwriteA("</B><BR>");

    // Show navigation buttons
    var prevMMYYYY = Calendar.calc_month_year(this.gMonth, this.gYear, -1);
    var prevMM = prevMMYYYY[0];
    var prevYYYY = prevMMYYYY[1];

    var nextMMYYYY = Calendar.calc_month_year(this.gMonth, this.gYear, 1);
    var nextMM = nextMMYYYY[0];
    var nextYYYY = nextMMYYYY[1];

    this.wwrite("<TABLE WIDTH='100%' BORDER=1 CELLSPACING=0 CELLPADDING=0 BGCOLOR='#e0e0e0'><TR><TD ALIGN=center>");
    this.wwrite("[<A HREF=\"" +
    "javascript:window.opener.Build(" +
    "'" + this.gReturnItem + "', '" + this.gMonth + "', '" + (parseInt(this.gYear)-1) + "', '" + this.gFormat + "'" +
    ");" +
    "\"><<<\/A>]</TD><TD ALIGN=center>");
    this.wwrite("[<A HREF=\"" +
    "javascript:window.opener.Build(" +
    "'" + this.gReturnItem + "', '" + prevMM + "', '" + prevYYYY + "', '" + this.gFormat + "'" +
    ");" +
    "\"><<\/A>]</TD><TD ALIGN=center>");
    this.wwrite("[<A HREF=\"" +
    "javascript:window.opener.Build(" +
    "'" + this.gReturnItem + "', '" + nextMM + "', '" + nextYYYY + "', '" + this.gFormat + "'" +
    ");" +
    "\">><\/A>]</TD><TD ALIGN=center>");
    this.wwrite("[<A HREF=\"" +
    "javascript:window.opener.Build(" +
    "'" + this.gReturnItem + "', '" + this.gMonth + "', '" + (parseInt(this.gYear)+1) + "', '" + this.gFormat + "'" +
    ");" +
    "\">>><\/A>]</TD></TR></TABLE><BR>");

    // Get the complete calendar code for the month..
    vCode = this.getMonthlyCalendarCode();
    this.wwrite(vCode);

    this.wwrite("</font></body></html>");
    this.gWinCal.document.close();
    }

    Calendar.prototype.showY = function() {
    var vCode = "";
    var i;
    var vr, vc, vx, vy; // Row, Column, X-coord, Y-coord
    var vxf = 285; // X-Factor
    var vyf = 200; // Y-Factor
    var vxm = 10; // X-margin
    var vym; // Y-margin
    if (isIE) vym = 75;
    else if (isNav) vym = 25;

    this.gWinCal.document.open();

    this.wwrite("<html>");
    this.wwrite("<head><title>Calendar</title>");
    this.wwrite("<style type='text/css'>\n<!--");
    for (i=0; i<12; i++) {
    vc = i % 3;
    if (i>=0 && i<= 2) vr = 0;
    if (i>=3 && i<= 5) vr = 1;
    if (i>=6 && i<= 8) vr = 2;
    if (i>=9 && i<= 11) vr = 3;

    vx = parseInt(vxf * vc) + vxm;
    vy = parseInt(vyf * vr) + vym;

    this.wwrite(".lclass" + i + " {position:absolute;top:" + vy + ";left:" + vx + ";}");
    }
    this.wwrite("-->\n</style>");
    this.wwrite("</head>");

    this.wwrite("<body " +
    "link=\"" + this.gLinkColor + "\" " +
    "vlink=\"" + this.gLinkColor + "\" " +
    "alink=\"" + this.gLinkColor + "\" " +
    "text=\"" + this.gTextColor + "\">");
    this.wwrite("<FONT FACE='" + fontface + "' SIZE=2><B>");
    this.wwrite("Year : " + this.gYear);
    this.wwrite("</B><BR>");

    // Show navigation buttons
    var prevYYYY = parseInt(this.gYear) - 1;
    var nextYYYY = parseInt(this.gYear) + 1;

    this.wwrite("<TABLE WIDTH='100%' BORDER=1 CELLSPACING=0 CELLPADDING=0 BGCOLOR='#e0e0e0'><TR><TD ALIGN=center>");
    this.wwrite("[<A HREF=\"" +
    "javascript:window.opener.Build(" +
    "'" + this.gReturnItem + "', null, '" + prevYYYY + "', '" + this.gFormat + "'" +
    ");" +
    "\" alt='Prev Year'><<<\/A>]</TD><TD ALIGN=center>");
    this.wwrite("[<A HREF=\"" +
    "javascript:window.opener.Build(" +
    "'" + this.gReturnItem + "', null, '" + nextYYYY + "', '" + this.gFormat + "'" +
    ");" +
    "\">>><\/A>]</TD></TR></TABLE><BR>");

    // Get the complete calendar code for each month..
    var j;
    for (i=11; i>=0; i--) {
    if (isIE)
    this.wwrite("<DIV ID=\"layer" + i + "\" CLASS=\"lclass" + i + "\">");
    else if (isNav)
    this.wwrite("<LAYER ID=\"layer" + i + "\" CLASS=\"lclass" + i + "\">");

    this.gMonth = i;
    this.gMonthName = Calendar.get_month(this.gMonth);
    vCode = this.getMonthlyCalendarCode();
    this.wwrite(this.gMonthName + "/" + this.gYear + "<BR>");
    this.wwrite(vCode);

    if (isIE)
    this.wwrite("</DIV>");
    else if (isNav)
    this.wwrite("</LAYER>");
    }

    this.wwrite("</font><BR></body></html>");
    this.gWinCal.document.close();
    }

    Calendar.prototype.wwrite = function(wtext) {
    this.gWinCal.document.writeln(wtext);
    }

    Calendar.prototype.wwriteA = function(wtext) {
    this.gWinCal.document.write(wtext);
    }

    Calendar.prototype.cal_header = function() {
    var vCode = "";

    vCode = vCode + "<TR>";
    vCode = vCode + "<TD WIDTH='14%'><FONT SIZE='2' FACE='" + fontface + "' COLOR='" + this.gHeaderColor + "'><B>Sun</B></FONT></TD>";
    vCode = vCode + "<TD WIDTH='14%'><FONT SIZE='2' FACE='" + fontface + "' COLOR='" + this.gHeaderColor + "'><B>Mon</B></FONT></TD>";
    vCode = vCode + "<TD WIDTH='14%'><FONT SIZE='2' FACE='" + fontface + "' COLOR='" + this.gHeaderColor + "'><B>Tue</B></FONT></TD>";
    vCode = vCode + "<TD WIDTH='14%'><FONT SIZE='2' FACE='" + fontface + "' COLOR='" + this.gHeaderColor + "'><B>Wed</B></FONT></TD>";
    vCode = vCode + "<TD WIDTH='14%'><FONT SIZE='2' FACE='" + fontface + "' COLOR='" + this.gHeaderColor + "'><B>Thu</B></FONT></TD>";
    vCode = vCode + "<TD WIDTH='14%'><FONT SIZE='2' FACE='" + fontface + "' COLOR='" + this.gHeaderColor + "'><B>Fri</B></FONT></TD>";
    vCode = vCode + "<TD WIDTH='16%'><FONT SIZE='2' FACE='" + fontface + "' COLOR='" + this.gHeaderColor + "'><B>Sat</B></FONT></TD>";
    vCode = vCode + "</TR>";

    return vCode;
    }

    Calendar.prototype.cal_data = function() {
    var vDate = new Date();
    vDate.setDate(1);
    vDate.setMonth(this.gMonth);
    vDate.setFullYear(this.gYear);

    var vFirstDay=vDate.getDay();
    var vDay=1;
    var vLastDay=Calendar.get_daysofmonth(this.gMonth, this.gYear);
    var vOnLastDay=0;
    var vCode = "";

    /*
    Get day for the 1st of the requested month/year..
    Place as many blank cells before the 1st day of the month as necessary.
    */

    vCode = vCode + "<TR>";
    for (i=0; i<vFirstDay; i++) {
    vCode = vCode + "<TD WIDTH='14%'" + this.write_weekend_string(i) + "><FONT SIZE='2' FACE='" + fontface + "'> </FONT></TD>";
    }

    // Write rest of the 1st week
    for (j=vFirstDay; j<7; j++) {
    vCode = vCode + "<TD WIDTH='14%'" + this.write_weekend_string(j) + "><FONT SIZE='2' FACE='" + fontface + "'>" +
    "<A HREF='#' " +
    "onClick=\"self.opener.document." + this.gReturnItem + ".value='" +
    this.format_data(vDay) +
    "';window.close();\">" +
    this.format_day(vDay) +
    "</A>" +
    "</FONT></TD>";
    vDay=vDay + 1;
    }
    vCode = vCode + "</TR>";

    // Write the rest of the weeks
    for (k=2; k<7; k++) {
    vCode = vCode + "<TR>";

    for (j=0; j<7; j++) {
    vCode = vCode + "<TD WIDTH='14%'" + this.write_weekend_string(j) + "><FONT SIZE='2' FACE='" + fontface + "'>" +
    "<A HREF='#' " +
    "onClick=\"self.opener.document." + this.gReturnItem + ".value='" +
    this.format_data(vDay) +
    "';window.close();\">" +
    this.format_day(vDay) +
    "</A>" +
    "</FONT></TD>";
    vDay=vDay + 1;

    if (vDay > vLastDay) {
    vOnLastDay = 1;
    break;
    }
    }

    if (j == 6)
    vCode = vCode + "</TR>";
    if (vOnLastDay == 1)
    break;
    }

    // Fill up the rest of last week with proper blanks, so that we get proper square blocks
    for (m=1; m<(7-j); m++) {
    if (this.gYearly)
    vCode = vCode + "<TD WIDTH='14%'" + this.write_weekend_string(j+m) +
    "><FONT SIZE='2' FACE='" + fontface + "' COLOR='gray'> </FONT></TD>";
    else
    vCode = vCode + "<TD WIDTH='14%'" + this.write_weekend_string(j+m) +
    "><FONT SIZE='2' FACE='" + fontface + "' COLOR='gray'>" + m + "</FONT></TD>";
    }

    return vCode;
    }

    Calendar.prototype.format_day = function(vday) {
    var vNowDay = gNow.getDate();
    var vNowMonth = gNow.getMonth();
    var vNowYear = gNow.getFullYear();

    if (vday == vNowDay && this.gMonth == vNowMonth && this.gYear == vNowYear)
    return ("<FONT COLOR=\"RED\"><B>" + vday + "</B></FONT>");
    else
    return (vday);
    }

    Calendar.prototype.write_weekend_string = function(vday) {
    var i;

    // Return special formatting for the weekend day.
    for (i=0; i<weekend.length; i++) {
    if (vday == weekend[i])
    return (" BGCOLOR=\"" + weekendColor + "\"");
    }

    return "";
    }

    Calendar.prototype.format_data = function(p_day) {
    var vData;
    var vMonth = 1 + this.gMonth;
    vMonth = (vMonth.toString().length < 2) ? "0" + vMonth : vMonth;
    var vMon = Calendar.get_month(this.gMonth).substr(0,3).toUpperCase();
    var vFMon = Calendar.get_month(this.gMonth).toUpperCase();
    var vY4 = new String(this.gYear);
    var vY2 = new String(this.gYear.substr(2,2));
    var vDD = (p_day.toString().length < 2) ? "0" + p_day : p_day;

    switch (this.gFormat) {
    case "MM\/DD\/YYYY" :
    vData = vMonth + "\/" + vDD + "\/" + vY4;
    break;
    case "MM\/DD\/YY" :
    vData = vMonth + "\/" + vDD + "\/" + vY2;
    break;
    case "MM-DD-YYYY" :
    vData = vMonth + "-" + vDD + "-" + vY4;
    break;
    case "MM-DD-YY" :
    vData = vMonth + "-" + vDD + "-" + vY2;
    break;

    case "DD\/MON\/YYYY" :
    vData = vDD + "\/" + vMon + "\/" + vY4;
    break;
    case "DD\/MON\/YY" :
    vData = vDD + "\/" + vMon + "\/" + vY2;
    break;
    case "DD-MON-YYYY" :
    vData = vDD + "-" + vMon + "-" + vY4;
    break;
    case "DD-MON-YY" :
    vData = vDD + "-" + vMon + "-" + vY2;
    break;

    case "DD\/MONTH\/YYYY" :
    vData = vDD + "\/" + vFMon + "\/" + vY4;
    break;
    case "DD\/MONTH\/YY" :
    vData = vDD + "\/" + vFMon + "\/" + vY2;
    break;
    case "DD-MONTH-YYYY" :
    vData = vDD + "-" + vFMon + "-" + vY4;
    break;
    case "DD-MONTH-YY" :
    vData = vDD + "-" + vFMon + "-" + vY2;
    break;

    case "DD\/MM\/YYYY" :
    vData = vDD + "\/" + vMonth + "\/" + vY4;
    break;
    case "DD\/MM\/YY" :
    vData = vDD + "\/" + vMonth + "\/" + vY2;
    break;
    case "DD-MM-YYYY" :
    vData = vDD + "-" + vMonth + "-" + vY4;
    break;
    case "DD-MM-YY" :
    vData = vDD + "-" + vMonth + "-" + vY2;
    break;

    default :
    vData = vMonth + "\/" + vDD + "\/" + vY4;
    }

    return vData;
    }

    function Build(p_item, p_month, p_year, p_format) {
    var p_WinCal = ggWinCal;
    gCal = new Calendar(p_item, p_WinCal, p_month, p_year, p_format);

    // Customize your Calendar here..
    gCal.gBGColor="white";
    gCal.gLinkColor="black";
    gCal.gTextColor="black";
    gCal.gHeaderColor="darkgreen";

    // Choose appropriate show function
    if (gCal.gYearly) gCal.showY();
    else gCal.show();
    }

    function show_calendar() {
    /*
    p_month : 0-11 for Jan-Dec; 12 for All Months.
    p_year : 4-digit year
    p_format: Date format (mm/dd/yyyy, dd/mm/yy, ...)
    p_item : Return Item.
    */

    p_item = arguments[0];
    if (arguments[1] == null)
    p_month = new String(gNow.getMonth());
    else
    p_month = arguments[1];
    if (arguments[2] == "" || arguments[2] == null)
    p_year = new String(gNow.getFullYear().toString());
    else
    p_year = arguments[2];
    if (arguments[3] == null)
    p_format = "MM/DD/YYYY";
    else
    p_format = arguments[3];

    vWinCal = window.open("", "Calendar",
    "width=250,height=250,status=no,resizable=no,top=200,left=200");
    vWinCal.opener = self;
    ggWinCal = vWinCal;

    Build(p_item, p_month, p_year, p_format);
    }
    /*
    Yearly Calendar Code Starts here
    */
    function show_yearly_calendar(p_item, p_year, p_format) {
    // Load the defaults..
    if (p_year == null || p_year == "")
    p_year = new String(gNow.getFullYear().toString());
    if (p_format == null || p_format == "")
    p_format = "MM/DD/YYYY";

    var vWinCal = window.open("", "Calendar", "scrollbars=no");
    vWinCal.opener = self;
    ggWinCal = vWinCal;

    Build(p_item, null, p_year, p_format);
    }
    </script>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>

    <body><form name=calform>
    <input type=text name="datebox" size=15><a href="javascript:show_calendar('calform.datebox');" onmouseover="window.status='Date Picker';return true;" onmouseout="window.status='';return true;"><img src="show-calendar.gif" width=24 height=22 border=0></a>
    </form>
    </body>
    </html>

  • #2
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Using the Popup Calendar script from http://javascript.internet.com as an external file as intended, and without without making any changes to that script, below you will find a way to validate that the picked date is between monday-friday and that the date is not prior to the current date.

    Code:
    <script type="text/javascript" src="scripts/date-pic.js"></script>
    <script type="text/javascript">
    // This script and many more are available free online at  //;
    // The JavaScript Source!! http://javascript.internet.com  //;
    // Date Validation written by: WillyDuitt@hotmail.com 25/04/2004 //;
    
    function insertDate(date){ 
     var newDate = date.split('/');
     var newMonth= Calendar.Months[newDate[0]-1];
     var newYear = newDate[2];
     var newDay  = newDate[1];
     var theDate = new Date(newMonth+" "+newDay+" "+newYear);
     var theDay  = theDate.getDay();
    
      if(theDate<new Date() || theDay==0 || theDay==6){
         alert("Not a Valid Date");
         setTimeout('show_calendar()','10');
      }
    
      else{ document.getElementById('myDate').value = date };
    }
    </script>
    </head>
    
    <body>
    <form name="myForm">
    <input type="text" name="myDate"  id="myDate" size="15">
    <a href="javascript:show_calendar();" 
    onmouseover="window.status='Date Picker';return true;" 
    onmouseout="window.status='';return true;">
    <img src="show-calendar.gif" width="24" height="22" border="0"></a>
    </form>
    .....Willy
    Attached Files Attached Files


  •  

    Posting Permissions

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