如何校验Telerik RadDatePicker的无效日期输入？

问题场景 #

页面中放置2个Telerik RadDatePicker控件和1个搜索按钮，相关代码如下：

<table class="moss2Search">
    <tr>
        <td>
            <div runat="server">
                <telerik:RadDatePicker RenderMode="Lightweight" ID="RadDatePicker1" width="100%"  runat="server" DateInput-Label="Boarding Start Date">
                </telerik:RadDatePicker>
             </div>
        </td>
        <td>
            <div runat="server">
                <telerik:RadDatePicker RenderMode="Lightweight" ID="RadDatePicker2" width="100%"  runat="server" DateInput-Label="Boarding End Date">
                </telerik:RadDatePicker>
            </div>
        </td>
        <td>
            <div> 
              <asp:CheckBox ID="chkMerActive" runat="server" Checked="true"/>Active
            </div>
        </td>
        <td>
            <%--<asp:Button ID="btnSeacrh" runat="server" Text="Search" OnClick="btnSearch_Click" OnClientClick="return dateValidation();"/> <br />--%>
            <telerik:RadButton RenderMode="Lightweight" runat="server" Text="Search" ID="Button1" OnClick="btnSearch_Click" OnClientClicked="validateDates" AutoPostBack="false"></telerik:RadButton>
        </td>
    </tr>
</table>

用户可在控件输入框手动键入非日期类字符串，需要校验两个控件的输入/选中值为合法有效日期。

实现方案 #

采用客户端前置校验+服务端兜底校验的双层方案，覆盖所有输入场景，避免非法值提交到后端。

1. 客户端校验逻辑（绑定按钮的validateDates事件） #

RadDatePicker客户端实例提供get_selectedDate()方法，输入非法日期时该方法返回空值，可直接用于判断，代码如下：

function validateDates(sender, args) {
    // 获取两个日期选择器实例
    const startPicker = $find("<%= RadDatePicker1.ClientID %>");
    const endPicker = $find("<%= RadDatePicker2.ClientID %>");
    const startDate = startPicker.get_selectedDate();
    const endDate = endPicker.get_selectedDate();

    // 校验日期合法性
    if (!startDate) {
        alert("请输入有效的登机开始日期");
        startPicker.focus();
        args.set_cancel(true);
        return;
    }
    if (!endDate) {
        alert("请输入有效的登机结束日期");
        endPicker.focus();
        args.set_cancel(true);
        return;
    }

    // 可选逻辑：校验开始日期不晚于结束日期
    if (startDate.getTime() > endDate.getTime()) {
        alert("开始日期不能晚于结束日期");
        args.set_cancel(true);
        return;
    }

    // 校验通过，手动触发后端提交
    sender.click();
}

2. 控件内置属性配置（减少自定义校验代码） #

可直接利用控件原生能力降低非法输入概率：

• 配置DateInput-DateFormat属性指定输入格式，比如yyyy-MM-dd，控件会自动拦截不符合格式的输入
• 配置MinDate、MaxDate限定合理日期范围，避免输入超出业务边界的日期
• 可搭配ASP.NET原生校验控件做无JS兜底的静态校验，示例：

<asp:CompareValidator runat="server" 
    ControlToValidate="RadDatePicker1" 
    Type="Date" Operator="DataTypeCheck" 
    ErrorMessage="开始日期格式无效" 
    Display="Dynamic" />

3. 服务端校验（必须实现，防止客户端校验被绕过） #

不要信任任何客户端提交的数据，在后端按钮点击事件中必须做二次校验：

protected void btnSearch_Click(object sender, EventArgs e)
{
    // 校验日期是否合法
    if (!RadDatePicker1.SelectedDate.HasValue)
    {
        pageMsg.Text = "登机开始日期无效，请重新输入";
        return;
    }
    if (!RadDatePicker2.SelectedDate.HasValue)
    {
        pageMsg.Text = "登机结束日期无效，请重新输入";
        return;
    }

    DateTime boardStart = RadDatePicker1.SelectedDate.Value;
    DateTime boardEnd = RadDatePicker2.SelectedDate.Value;
    // 校验日期范围逻辑
    if (boardStart > boardEnd)
    {
        pageMsg.Text = "开始日期不能晚于结束日期";
        return;
    }

    // 校验通过，执行业务查询逻辑
}

内容的提问来源于stack exchange，提问作者gene