calendarextender - ajaxToolkit CalendarExtender で以前の日付を無効にする

Question

ajaxToolkit CalendarExtender で使用中に以前の日付を無効にする方法

Answer 1

カレンダーの日付制限の問題に対する私の完全な解決策は次のとおりです。この解決策について私が気に入っているのは、RangeValidatorのMinimumValueとMaximumValueを設定し、JavaScriptを変更する必要がないことです。AjaxControlToolkit.dllを再コンパイルする必要のない完全なソリューションは見つかりませんでした。AjaxControlToolkit.dllを再コンパイルせずにcalendar.jsファイルのキーメソッドをオーバーライドする方法を教えてくれたhttp://www.karpach.com/ajaxtoolkit-calendar-extender-tweaks.htmに感謝します。また、「AjaxControlToolkit is undefined」の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" />

Answer 2

1 つのオプションは、calenderextender がバインドされているテキスト ボックスで rangevalidator を使用することです。つまり、カレンダー エクステンダーの TargetID を tb1 に設定している場合、rangeValidator を追加して、tb1 の内容が今日より前の場合にフラグを立てます。

もう 1 つのオプションは JavaScript を使用することです。これが良い例です: http://www.dotnetcurry.com/ShowArticle.aspx?ID=149ヒント 6.

Answer 3

ajaxtoolkit calendarextender コントロールに属性StartDate="<%# DateTime.Now %>"を追加するだけです

Answer 4

次のリンクが役立つ場合があります： CalendarExtenderで日付を無効にする