在 ajaxToolkit CalendarExtender 中禁用以前的日期答案

【问题标题】：Disable previous Dates in ajaxToolkit CalendarExtender在 ajaxToolkit CalendarExtender 中禁用以前的日期
【发布时间】：2010-10-23 15:23:07
【问题描述】：

在 ajaxToolkit CalendarExtender 中使用时如何禁用以前的日期

【问题讨论】：

标签： calendarextender

【解决方案1】：

只需在您的 ajaxtoolkit calendarextender 控件中添加一个属性 StartDate=""

【讨论】：

这有助于设置开始日期 - 比将代码设置在 page_load 中更整洁 :) - 但不会阻止过去的日期，至少对我来说不是 :(
更正，它确实阻止了现在选择的超出范围的日期（我实际上设置的是 EndDate 而不是 StartDate），但它并没有像在其他页面上那样显示它们被删除 - 一个 CSS我怀疑的样式问题。谢谢:)

【解决方案2】：

以下链接可能对您有所帮助： Disable dates in CalendarExtender

【讨论】：

【解决方案3】：

在 html 标记中使用 Ajax 工具包日历扩展器：

<asp:TextBox ID="txtDate" runat="server" CssClass="contentfield" Height="16px" MaxLength="12" width="80px" Wrap="False"></asp:TextBox>
<asp:CalendarExtender ID="CalendarExtender3" runat="server" Enabled="true" StartDate="<%# DateTime.Now %>" EndDate="<%# DateTime.Now.AddDays(1) %>" Format="dd MMM yyyy" PopupButtonID="imgDatePicker" TargetControlID="txtDate">
</asp:CalendarExtender>
<asp:ImageButton ID="imgDatePicker" runat="Server" AlternateText="Click to show calendar" Height="16px" ImageAlign="Middle" ImageUrl="~/images/Calendar_scheduleHS.png" Width="16px" />

上面你会看到日历只允许一个人通过设置在今天或明天之间进行选择

StartDate=""

和

EndDate=""

这也可以在后端使用CalendarExtender1.StartDate = DateTime.Now; 或CalendarExtender1.EndDate = DateTime.Now.AddDays(1); 完成

【讨论】：

【解决方案4】：

这是我对日历日期限制问题的完整解决方案：我喜欢这个解决方案的地方在于，您可以设置 RangeValidator 的 MinimumValue 和 MaximumValue，而无需修改任何 javascript。我从未找到不需要重新编译 AjaxControlToolkit.dll 的完整解决方案。感谢http://www.karpach.com/ajaxtoolkit-calendar-extender-tweaks.htm 让我了解如何在无需重新编译 AjaxControlToolkit.dll 的情况下覆盖 calendar.js 文件中的关键方法。此外，我收到“AjaxControlToolkit 未定义”javascript 错误，因此我将其更改为 Sys.Extended.UI。在使用 4.0 版本的工具包时它适用于我。

<%--//ADD THIS NEW STYLE TO STYLESHEET TO GRAY OUT DATES THAT AREN'T SELECTABLE--%>
<style type="text/css"> 
    .ajax__calendar_inactive  {color:#dddddd;}
</style>

在 Page_Load 或 Init 或任何地方，为您的范围验证器设置最小值和最大值：

<script runat="server">
    protected override void OnLoad(EventArgs e)
    {
        //set the validator min and max values
        this.valDateMustBeWithinMinMaxRange.MinimumValue = DateTime.Today.Date.ToShortDateString();
        this.valDateMustBeWithinMinMaxRange.MaximumValue = DateTime.MaxValue.Date.ToShortDateString();
        base.OnLoad(e);
    }
</script>

在页面的某处添加此 javascript：

<script type="text/javascript">
<%--//   ADD DATE RANGE FEATURE JAVASCRIPT TO OVERRIDE CALENDAR.JS--%>
        var minDate = new Date('<%= valDateMustBeWithinMinMaxRange.MinimumValue %>');
         var maxDate = new Date('<%= valDateMustBeWithinMinMaxRange.MaximumValue %>');
        Sys.Extended.UI.CalendarBehavior.prototype._button_onblur_original = Sys.Extended.UI.CalendarBehavior.prototype._button_onblur;
        //override the blur event so calendar doesn't close
        Sys.Extended.UI.CalendarBehavior.prototype._button_onblur = function (e) {
            if (!this._selectedDateChanging) {
                this._button_onblur_original(e);
            }
        }
        Sys.Extended.UI.CalendarBehavior.prototype._cell_onclick_original = Sys.Extended.UI.CalendarBehavior.prototype._cell_onclick;
        //override the click event
        Sys.Extended.UI.CalendarBehavior.prototype._cell_onclick = function (e) {
            var selectedDate = e.target.date;

            if (selectedDate < minDate || selectedDate > maxDate ) {
                //alert('Do nothing. You can\'t choose that date.');
                this._selectedDateChanging = false;
                return;
            }

            this._cell_onclick_original(e);
        }

        Sys.Extended.UI.CalendarBehavior.prototype._getCssClass_original = Sys.Extended.UI.CalendarBehavior.prototype._getCssClass;
        Sys.Extended.UI.CalendarBehavior.prototype._getCssClass = function (date, part) {

            var selectedDate = date;

           if (selectedDate < minDate || selectedDate > maxDate ) {
                return "ajax__calendar_inactive";
            }
            this._getCssClass_original(date, part);
        }

</script>

使用 CalendarExtenter 和 RangeValidator 将此文本框添加到您的 asp.net 页面：

<asp:TextBox ID="textBoxDate" runat="server" />
<ajaxToolkit:CalendarExtender ID="calendarExtender" runat="server" TargetControlID="textBoxDate" />
<asp:RangeValidator ID="valDateMustBeWithinMinMaxRange" runat="server" ControlToValidate="textBoxDate"
    ErrorMessage="The date you chose is not in accepted range" Type="Date" />
<br />
<asp:Button ID="Button1" runat="server" Text="Button" />

【讨论】：

实施良好。
大。很大。只是为了禁用过去的日期。嗯

【解决方案5】：

一个选项是在 calenderextender 绑定到的文本框上使用 rangevalidator。即，如果您将日历扩展器的 TargetID 设置为 tb1，则添加一个 rangeValidator 以标记 tb1 的内容何时在今天之前。

另一个选择是使用 javascript，这是一个很好的例子： http://www.dotnetcurry.com/ShowArticle.aspx?ID=149 提示 6。

【讨论】：