Telerik rad 日期选择器在用户键入未来日期时显示错误消息

Posted

技术标签:

【中文标题】Telerik rad 日期选择器在用户键入未来日期时显示错误消息【英文标题】:Telerik rad date picker show error message when user keys in future date 【发布时间】:2012-06-29 07:09:24 【问题描述】:

我有一个telerik:RadDatePicker,我通过在后面的代码中将 MaxDate 设置为今天来限制用户选择未来的日期。这工作得很好。但是当用户输入一个大于今天的日期时,它只会显示一个!在日期选择器中如下所示:

相反,我想向用户显示一条错误消息“不允许未来日期”我该如何实现?以下是现有代码:

<telerik:RadDatePicker CssClass="cssDate" ID="fromDate" runat="server" 
 Skin="Vista">
 <DateInput ID="DateInput1" runat="server" LabelCssClass="datePick" Skin="Vista">
  </DateInput>
 <Calendar ShowRowHeaders="false" ID="Calendar1" runat="server" UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False"
ViewSelectorText="x" Skin="Vista">
</Calendar>
<DatePopupButton CssClass="rcCalPopup"></DatePopupButton>
 </telerik:RadDatePicker>

以及我设置最大日期的代码:

  fromDate.MaxDate = DateTime.Now;

【问题讨论】:

【参考方案1】:

经过几天的研究并询问爷爷谷歌,他向我提供了 Telik 官方论坛的链接,他们确认无法做到这一点。

Link我想说的话。

回复说“实际上我们已经稍微修改了错误处理逻辑,因为我们最初的实现看起来不太直观。如果输入垃圾输入或选择了超出范围的日期,控件将在内部设置其值为 null;可见输入字段不会清除其内容,而是以无效样式显示它们,直到输入有效值。但是,您仍然需要在输入组件的客户端 OnError 事件处理程序中处理可能的解析错误(您可以在此处找到另一个示例),就好像输入不包含有效日期一样,它将向服务器发布空值,并且无法关闭此功能。"

希望这条信息对 SO 上的其他人有所帮助:)。

【讨论】:

【参考方案2】:

使用 OnError 逻辑...

function tbApplyTime2_dateError(sender, args) 

<DateInput ClientEvents-OnError="tbApplyTime2_dateError" />

处理进来的错误类型:

switch (args.get_reason()) 
            case Telerik.Web.UI.InputErrorReason.ParseError:
                validationMessageLabel.text('Invalid Date entered');
                break;
            case Telerik.Web.UI.InputErrorReason.OutOfRange:
                validationMessageLabel.text('Date must be after sent time');
                break;

【讨论】:

【参考方案3】:

例如,您可以通过不允许用户通过键入日期和仅使用日历控件来输入日期来解决此问题;

<telerik:RadDatePicker ID="dt" runat="server" 
                        EnableTyping="false" onkeydown="javascript:return false;" ...... />

【讨论】:

【参考方案4】:

此代码有效,它会显示一条警告消息,并在输入未来日期时将日期重置为之前的值。

<script type="text/javascript">

    function ValidateDate(sender,args) 
        var datePicker = $find("<%=RadDatePicker1.ClientID%>");
        var todayDate = new Date("<%= System.DateTime.Today %>");
        todayDate.setHours(0, 0, 0, 0);

        if (args.get_newDate() > todayDate) 
            datePicker.set_selectedDate(args.get_oldDate());
            alert("Can not enter future dates.");
        
    

</script>

<telerik:RadDatePicker ID="RadDatePicker1"  runat="server" ClientEvents-OnDateSelected="ValidateDate">
    <Calendar ShowRowHeaders="false"></Calendar>
</telerik:RadDatePicker>

【讨论】:

以上是关于Telerik rad 日期选择器在用户键入未来日期时显示错误消息的主要内容,如果未能解决你的问题,请参考以下文章

验证 RadDatePicker (Telerik Controls) 的日历控制

在 DotNetNuke 中使用 jQuery UI 日期选择器代替 Telerik RadCalendar

日期选择器在文本字段 iOS 8 上崩溃

禁用日期的 HTML5 日期选择器在 Angular 中不起作用

JQuery UI 日期选择器在 Chrome 中不起作用

使用引导日期选择器在 ASP.net 核心中发布本地化的日期格式