Date picker!

Jeg har denne datepicker funktion, hvor at jeg åbnes en slags ramme. Når jeg vil have min dato, og dato man vælge retuneres til bage til form.
Jeg kunne godt tænke mig at funktionen kan åbnes til en startdato og en slutdato.

java script:

<script language=\"JavaScript1.2\" src=\"cframe.js\" type=\"text/javascript\"></script>
<SCRIPT>
var Now = new Date();
var NowMonth = Now.getMonth();
var NowYear = Now.getYear();

function NewDate() {
Calendar(NowMonth,NowYear);
document.all.newdate.style.display =\'block\';
}
function Calendar(Month,Year) {
    var output = \'\';
   
    output += \'<TABLE BGCOLOR=\"#F4F4F4\" BORDER=0><TR><TD ALIGN=LEFT WIDTH=400>\';
    output += \'<\\/TD><TD ALIGN=LEFT>\';
    output += \'<SELECT id=\"month\" style=\"font-size: 8 pt; font-family: Verdana\" NAME=\"Month\" onChange=\"changeMonth();\">\';
    for (month=0; month<12; month++) {
        if (month == Month) output += \'<OPTION VALUE=\"\' + month + \'\" SELECTED>\' + names[month] + \'<\\/OPTION>\';
        else                output += \'<OPTION VALUE=\"\' + month + \'\">\'          + names[month] + \'<\\/OPTION>\';
    }
    output += \'<\\/SELECT><SELECT id=\"year\" style=\"font-size: 8 pt; font-family: Verdana\" NAME=\"Year\" onChange=\"changeYear();\">\';
    for (year=2001; year<2049; year++) {
        if (year == Year) output += \'<OPTION VALUE=\"\' + year + \'\" SELECTED>\' + year + \'<\\/OPTION>\';
        else              output += \'<OPTION VALUE=\"\' + year + \'\">\'          + year + \'<\\/OPTION>\';
    }
    output += \'<\\/SELECT>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button style=\"font-size: 8 pt; font-family: Verdana\" onclick=\"unview()\">Luk</button><\\/TD><\\/TR><TR><TD ALIGN=CENTER COLSPAN=2>\';
    firstDay = new Date(Year,Month,1);
    startDay = firstDay.getDay();
    if (((Year % 4 == 0) && (Year % 100 != 0)) || (Year % 400 == 0))
        days[1] = 29;
    else
        days[1] = 28;
    output += \'<TABLE CALLSPACING=0 CELLPADDING=0 BORDERCOLORDARK=\"#F4F4F4\" BORDERCOLORLIGHT=\"#F4F4F4\" BORDER=1 ><TR>\';
    for (i=0; i<7; i++)
        output += \'<TD BORDERCOLORDARK=\"#C0C0C0\" BORDERCOLORLIGHT=\"#C0C0C0\" WIDTH=30 ALIGN=CENTER VALIGN=MIDDLE><FONT SIZE=-2 COLOR=\"#000000\" FACE=\"verdana\"><B>\' + dow[i] +\'<\\/B><\\/FONT><\\/TD>\';
    output += \'<\\/TR><TR ALIGN=CENTER VALIGN=MIDDLE>\';
    var column = 0;
    var lastMonth = Month - 1;
    if (lastMonth == -1) lastMonth = 11;
    for (i=0; i<startDay; i++, column++)
        output += \'<TD BORDERCOLORDARK=\"#F4F4F4\" BORDERCOLORLIGHT=\"#F4F4F4\" WIDTH=30 HEIGHT=15><FONT SIZE=-2 COLOR=\"#808080\" FACE=\"Verdana\">\' + (days[lastMonth]-startDay+i+1) + \'<\\/FONT><\\/TD>\';
    for (i=1; i<=days[Month]; i++, column++) {
        output += \'<TD BORDERCOLORDARK=\"#FFFFFF\" BORDERCOLORLIGHT=\"#C0C0C0\" WIDTH=30 HEIGHT=15>\' + \'<label onclick=\"java script:changeDay(\' + i + \')\"><FONT SIZE=-2 FACE=\"verdana\" COLOR=\"#0000FF\">\' + i + \'<\\/FONT><\\/Label>\' +\'<\\/TD>\';
        if (column == 6) {
            output += \'<\\/TR><TR ALIGN=CENTER VALIGN=MIDDLE>\';
            column = -1;
        }
    }
    if (column > 0) {
        for (i=1; column<7; i++, column++)
            output +=  \'<TD WIDTH=30 HEIGHT=15><FONT SIZE=-2 COLOR=\"#808080\" FACE=\"Verdana\">\' + i + \'<\\/FONT><\\/TD>\';
    }
    output += \'<\\/TR><\\/TABLE><\\/TD><\\/TR><\\/TABLE>\';
    document.all.newdate.innerHTML = output;
}
function unview() {document.all.newdate.style.display = \'none\';}
function changeDay(day) {
    document.all.newdate.style.display = \'none\';
    document.all.thedate.value = \'\' + padout(day) + \'-\' + padout(document.all.month.value - 0 + 1) + \'-\' + document.all.year.value;
}
function changeMonth() {
      Calendar(document.all.month.value,document.all.year.value);
}
function changeYear() {
    Calendar(document.all.month.value,document.all.year.value);
}
function makeArray0() {
    for (i = 0; i<makeArray0.arguments.length; i++)
        this[i] = makeArray0.arguments[i];
}
function padout(number) { return (number < 10) ? \'0\' + number : number; }
var names    = new makeArray0(\'Januar\',\'Februar\',\'Marts\',\'April\',\'Maj\',\'Juni\',\'Juli\',\'August\',\'September\',\'Oktober\',\'November\',\'December\');
var days      = new makeArray0(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
var dow      = new makeArray0(\'Søn\',\'Man\',\'Tir\',\'Ons\',\'Tor\',\'Fre\',\'Lør\');
</SCRIPT>


<INPUT class=font id=thedate readonly name=date size=10>&nbsp;&nbsp;
            <IMG align=top onclick=NewDate() border=0 height=25 src=\"calendar.gif\" width=26>
            </font></b>
<DIV class=newdate id=newdate
style=\"BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; DISPLAY: none\"></DIV>

          </div>