Link to home
Start Free TrialLog in
Avatar of jaggernat
jaggernat

asked on

javascript calendar with future dates disabled

hi experts

I have a requirment in my application where a user should be able to select a date from a pop-up calendar which needs to be todays date or a previous date BUT all future dates should be disabled meaning user should not be able to select tomorrows' or later date.

I really have no idea how to proceed.

any help with resources whould be greatly appreciated,

thanks
J
ASKER CERTIFIED SOLUTION
Avatar of Lakio
Lakio
Flag of Iceland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of jaggernat
jaggernat

ASKER

hi there ,

thanks very much for the code. I have  couple of questions though.

>>>>
AnchorPosition.js
date.js
PopupWindow.js
....


do i create seperate javascript files  for each of the above .js file you wrote.

>>>onClick="cal.select(document.forms['example'].date1,'anchor1','MM/dd/yyyy'); return false;"


Is 'date1'  the name of the field where the selected date gets populated. also what is 'anchor1'?
first I like to make it clear I did not write that, I just took it of a page and wanted you to read that page
http://www.mattkruse.com/javascript/calendarpopup

download CalendarPopup.js at http://www.mattkruse.com/javascript/calendarpopup/combined-compact/

and here is the improved version:
<HTML>
<HEAD>
      <TITLE>JavaScript Toolbox - Calendar Popup To Select Date</TITLE>
<SCRIPT LANGUAGE="JavaScript" SRC="CalendarPopup.js">
// Author: Matt Kruse <matt@-@mattkruse.com>
// WWW: http://www.mattkruse.com/
</SCRIPT>
      <SCRIPT LANGUAGE="JavaScript">
document.write(getCalendarStyles());
cal = new CalendarPopup("testdiv1");
date = new Date();
date = new Date(date.getFullYear(),date.getMonth(),date.getDate()+1);
cal.addDisabledDates(formatDate(date,"yyyy-MM-dd"),null);
      </SCRIPT>
</HEAD>
<BODY>

<FORM NAME="example">
(View Source of this page to see the example code)<br>
<INPUT TYPE="text" NAME="date1" VALUE="" SIZE=25>
<A HREF="#"
   onClick="cal.select(document.forms['example'].date1,'anchor1','MM/dd/yyyy'); return false;"
   NAME="anchor1" ID="anchor1">select</A>
</FORM>
<DIV ID="testdiv1" STYLE="position:absolute;visibility:hidden;background-color:white;"></DIV>
</BODY>
</HTML>
date = new Date();
date = new Date(date.getFullYear(),date.getMonth(),date.getDate()+1);
cal.addDisabledDates(formatDate(date,"yyyy-MM-dd"),null);

the middle one is invalid so use this:

date = new Date();
date = new Date(Date.parse(date)+86400000);
cal1.addDisabledDates(formatDate(date,"yyyy-MM-dd"),null);
thanks so  much . it works perfect.