?
Solved

javascript calender...date picker

Posted on 2005-04-04
11
Medium Priority
?
642 Views
Last Modified: 2010-05-18
Hiya,

I am looking for a cross platform calender popup for use in picking dates in a form. This popup should display 3 months at a time. The popup calenders i have seen all seem to only display one month. Due to time contrants I dont have the time to tweek and modify scripts without documentation. Does anyone have or know location to any calender/date picker that they KNOW can be easily modifed to show 3 months at a time?

thanks for the reply,

rich
0
Comment
Question by:razzzzer
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3
  • 3
11 Comments
 
LVL 22

Assisted Solution

by:RedKelvin
RedKelvin earned 200 total points
ID: 13703723
0
 
LVL 22

Assisted Solution

by:RedKelvin
RedKelvin earned 200 total points
ID: 13703726
And it has the code to alter it to show multiple months, right there on that page
http://www.dynamicdrive.com/dynamicindex7/basiccalendar.htm
0
 

Author Comment

by:razzzzer
ID: 13703844
Thats pretty much what i need except that that script is JUST for a calendar... it does not provide for picking dates ... unfortunatly i dont have the time to tweek these scripts :)   thanks tho.. will keep lookng... You dont happen to know of any other calendars that have the date picking function AND the three month display?


thanks!
rich
0
WordPress Tutorial 4: Recommended Plugins

Now that you have WordPress installed, understand the interface, and know how to install new parts, let’s take a look at our recommended plugins.

 

Author Comment

by:razzzzer
ID: 13703850
oh ya... I would also prefer a popup to keep my form size small.... :)


rich
0
 
LVL 22

Assisted Solution

by:RedKelvin
RedKelvin earned 200 total points
ID: 13703889
0
 

Author Comment

by:razzzzer
ID: 13703960
hmm... looks to me like finding something "out of the box" may not happen. I dont think i like the java one... basically javascript or ASP (not asp.net) would be best for my needs. I'll probably use something like the first temporarily until i can find what i need :)
0
 
LVL 4

Assisted Solution

by:ARCglide
ARCglide earned 200 total points
ID: 13711619
Javascript Date Picker(poens in a new Window)

USAGE:
show_calendar( PickerFormField , Month[0-11] , Year , DateFormat);

EXAMPLE:
<script src="date-picker.js"></script>
<form name="form1">
<table>
  <tr>
    <td>Pick-a-Date:</td>
    <td><input id="date1" style="width: 130px;" value="" type="text"/>
        <img src="btn_cal.gif" title="Select Date" onclick="show_calendar('form1.date1','3','2005','DD/MM/YYYY');" border="0" height="15" width="16"/></td>
  </tr>
</table>
</form>

-------------date-picker.js-------------
var weekend = [0,6];
var weekendColor = "#96B0D1";
var fontface = "Tahoma";
var fontsize = 1;

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;
Calendar.print = Calendar_print;

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_print() { ggWinCal.print(); }

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=0 BGCOLOR=\"" + this.gBGColor + "\" class=\"border\">";
      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 + "\">");

      // 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=0 CELLSPACING=0 CELLPADDING=2 BGCOLOR='#96B0D1' class='border'><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.wwriteA(this.gMonthName + " " + this.gYear + "</TD><TD ALIGN=center>");

//      this.wwrite("[<A HREF=\"javascript:window.print();\">Print</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='#96B0D1'><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.wwriteA("<div align='center'><FONT FACE='" + fontface + "' SIZE=2><B>");
      this.wwriteA(this.gMonthName + " " + this.gYear);
      this.wwriteA("</B><BR>");
*/
//      this.wwrite("[<A HREF=\"javascript:window.print();\">Print</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 BGCOLOR='" + this.gHeaderBackgroundColor + "'>";
      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="black";
      gCal.gHeaderBackgroundColor="#96B0D1";
      // 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 = "DD/MM/YYYY";
      else
            p_format = arguments[3];

      vWinCal = window.open("", "Calendar",
            "width=250,height=200,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=yes");
      vWinCal.opener = self;
      ggWinCal = vWinCal;

      Build(p_item, null, p_year, p_format);
}
-------------thats-all-folks-------------

All tested and working in MSIE6 and FF1.0

-ARCglide
0
 

Author Comment

by:razzzzer
ID: 13712005
Nice ARCglide... does this calender show perhaps 3months at a time???

rich
0
 
LVL 4

Assisted Solution

by:ARCglide
ARCglide earned 200 total points
ID: 13716527
hey Rich,

As this 'widget' is designed to be a small, easy to use, date-picker - this calender dynamically displays ONLY the current calender month (highlighting the current day) so that the end-user can intuitively select their desired date. The top row of the popup does allow the user to go forwards & backwards by year / month.

So, essentually I have provided a working interim solution - re:
< I'll probably use something like the first temporarily until i can find what i need >

As futher months (will quite possibly) overlap - displaying more than one month will possibly confuse the issue for the end-user and the presentation concerning month seperation - and the operation of the calender navigation (ie. moving by N months).

ALTERNATIVE:
You could implement something like the 'OO-based Dropdown Date Picker' - however this is not dynamically generated and will have a fixed operational date-range.
URL: http://www.codingforums.com/showthread.php?p=219639

------------------------
(Finally found the) URL reference for the posted code:
http://javascript.internet.com/calendars/popup-date-picker.html
0
 
LVL 4

Accepted Solution

by:
ARCglide earned 200 total points
ID: 13716549
This one will dynamically display 3 months ....

Basic Calendar - Displaying multiple calendar months
http://www.dynamicdrive.com/dynamicindex7/basiccalendar.htm

... or even "Display an entire year dynamically"

Hope this helps :-)

-ARCglide
0
 

Author Comment

by:razzzzer
ID: 13721392
Thanks for your inputs.  That basic calender (as noted above) is not a date picker but Brian does have a date picker on his site that i will use.  My only options at this point are to buy one (there are many that offer thier multi month date picker calender for a fee), or simply come up with one on my own :)  


I will split the points for you two and keep plugin' away... thanks!


rich
0

Featured Post

New benefit for Premium Members - Upgrade now!

Ready to get started with anonymous questions today? It's easy! Learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Suggested Courses

765 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question