help with javascript datetime picker validation

Question

This is a little form that I have that is a submit button a text box and a javascript date picker.

What it does is they pick the date, click submit and it places the date selected into a query string works great.

I just want to add an error message if the date is not in the correct format, the format should be 11-05-2010.

Or maybe is there a way so that when they click the date, it skips the process of putting the text into the textbox and then them clicking submit. Could they just pick the date and it autmatically link to :

<form name=dateform method="get"></br>
<p>Enter Date: <font size="1"><br></br>
ex:11-01-2010</font><br>
<input type="text" name="rundate" size="20"><a href="http://sfsdfsfsdfsfsf.com?action=home" onclick="location.href=this.href+'&rundate='+rundate;return false;"></a></li><input type="submit" value="Submit" name="B1">
            </form>
<script language="JavaScript" src="calendar_us.js"></script>
<link rel="stylesheet" href="calendar.css">
<script language="JavaScript">
new tcal ({
    // form name
    'formname': 'dateform',
    // input name
    'controlname': 'rundate'
});
</script>

Answer 1

I recommend you to use Tigra Calendar, It is a picker calendar that can be associated to any input type='text' html. I have created some functions to call the Tigra Calendar (I have renamed isocalendar, because the date format I'm using):

function showIsoCalendar(formName, txtInputName, calendar_page){
    try
    {
        var objtxt = document.forms[formName].elements[txtInputName];   
        showIsoCalendarBase(objtxt, calendar_page);
    } catch(err) {/*DO-NOTHING*/} 
}
function showIsoCalendarBase(objtxt, calendar_page){
    try
    {
        var isocal = new isocalendar(objtxt);
            isocal.year_scroll = true;
            isocal.time_comp = false;           
            isocal.calendar_page = (calendar_page != null ? calendar_page : 'isocalendar.html');
        var wnd = isocal.popup();   
        wnd.moveTo(450, 300);
    } catch(err) {/*DO-NOTHING*/} 
}

By modifying the Calendars JavaScript you can customize the calendars behavior, by modifying the HTML Calendars page you can customize the presentation.

Even in ASP.Net you can use the Tigra Calndar and associate it to your pages as follow:

<td style="width:130px;">                                   
    <asp:TextBox ID="TextFecha1" name="TextFecha1"
        runat="server" Width="90px"></asp:TextBox>
     <a href="javascript:showIsoCalendar('aspnetForm','ctl00$DefaultPlaceholder$TextFecha1');">
        <img src="images/calendar/calendar.gif" alt="calendario"/>
     </a>                                    
</td>