javascript - 帮助 javascript 日期时间选择器验证

Question

这是我的一个小表单，它是一个提交按钮、一个文本框和一个 JavaScript 日期选择器。

它的作用是选择日期，单击提交，然后将所选日期放入查询字符串中，效果非常好。

如果日期格式不正确，我只想添加一条错误消息，格式应为 11-05-2010。

或者也许有一种方法可以让他们在单击日期时跳过将文本放入文本框然后单击“提交”的过程。他们可以只选择日期并自动链接到:

<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

我建议您使用Tigra Calendar，它是一个可以关联到任何input type='text' html的选择器日历。我创建了一些函数来调用 Tigra 日历(我已重命名为 isocalendar，因为我正在使用的日期格式):

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*/} 
}

通过修改日历 JavaScript，您可以自定义日历行为，通过修改 HTML 日历页面，您可以自定义演示文稿。

即使在 ASP.Net 中，您也可以使用 Tigra Calndar 并将其关联到您的页面，如下所示:

<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>