可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I am using ajax calendar extender for 'From date' and 'To date' text box, I have to disable To date previous date or dates lesser than selected 'From date'. I can see many posts using range validation. How I can disable the dates without any message to user?

回答1:

First add .dll - RJS.Web.WebControl.PopCalendar.Net.2008.dll

Then add source code:

<asp:TextBox ID="DepartureDate" runat="server"></asp:TextBox>
&nbsp;&nbsp;&nbsp;
      <rjs:PopCalendar ID="PopCalendar1" runat="server" Control="DepartureDate" 
            Format="mm dd yyyy" 
            InvalidDateMessage="The date value entered is invalid." RequiredDate="True" 
            RequiredDateMessage="You must enter a date value." From-Date="" SelectWeekend="True" 

            />
    <br />
    <br />
    <br />
    <asp:TextBox ID="ReturnDate" runat="server"></asp:TextBox>
&nbsp;&nbsp;&nbsp;&nbsp;
     <rjs:PopCalendar ID="myReturnCal" runat="server" Control="ReturnDate" 
            Format="mm dd yyyy" 
            InvalidDateMessage="The date value entered is invalid." RequiredDate="True" 
            RequiredDateMessage="You must enter a date value." 
            From-Control="DepartureDate" From-Date="" From-Increment="1" 
            />
    <br />
      <asp:Label ID="Results" runat="server"></asp:Label>
        <rjs:PopCalendarMessageContainer ID="PopCalMessagesForDeparture" runat="server" 
            Calendar="myDepartureCal" />
        <rjs:PopCalendarMessageContainer ID="PopCalMessagesForReturn" runat="server" 
            Calendar="myReturnCal" />

回答2:

You can make use of asp:CustomValidator. In OnServerValidate="ServerValidate" method you can write this sort of code (in code-behind file):

protected void ServerValidate(object source, ServerValidateEventArgs value)
{
        DateTime dtStart = DateTime.ParseExact(txtStartDate.Text.Trim(), "yyyyMMdd", culture.DateTimeFormat);
        DateTime dtEnd = DateTime.ParseExact(txtEndDate.Text.Trim(), "yyyyMMdd", culture.DateTimeFormat);

        if (dtStart > dtEnd)
        {
            value.IsValid = false;
            txtEndDate.Text = string.Empty
        }
}

回答3:

You can use an update panel with a hidden trigger button to set the "EndDate" property of the second textbox's calendar extender:

    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:TextBox ID="txtStart" runat="server"></asp:TextBox>
            <ajaxToolkit:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="txtStart" OnClientDateSelectionChanged="dateSelectionChanged">
            </ajaxToolkit:CalendarExtender>
            <br /><br />
            <asp:TextBox ID="txtEnd" runat="server"></asp:TextBox>
            <ajaxToolkit:CalendarExtender ID="CalendarExtender2" runat="server" TargetControlID="txtEnd">
            </ajaxToolkit:CalendarExtender>

            <script type="text/javascript">
                function dateSelectionChanged(sender, args) {
                    __doPostBack('<%=btnReload.ClientID %>', null);
                }
            </script>
        </ContentTemplate>
    </asp:UpdatePanel>
    <asp:Button ID="btnReload" runat="server" style="display:none;" />

In the above code, when the user makes a selection on the first calendar extender, the "dateSelectionChanged" function is called to perform a partial postback. At this point you can set the second calendar extender's end date property:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Page.IsPostBack Then
        CalendarExtender2.EndDate = txtStart.Text
    End If
End Sub

回答4:

Try this:

<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"> </script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<script>
  $().ready(function () {
      $('.dDate, .rDate').datepicker({
          showOn: 'both',
          buttonImage: "<?=$http?>layout_images/calendar.gif",
          buttonImageOnly: true,
          beforeShow: customRange,
          buttonText: 'Open Calendar',
          firstDay: 1,
          dateFormat: 'D d M yy',
          onSelect: function (date) {
              date = $(this).datepicker('getDate');
              $('#returningdate').val($.datepicker.formatDate('D d M yy', date));
          }
      });
  });

  function customRange(a) {
      var b = new Date();
      var c = new Date(b.getFullYear(), b.getMonth(), b.getDate());
      if (a.id == 'returningdate') {
          if ($('.dDate').datepicker('getDate') != null) {
              c = $('.dDate').datepicker('getDate');
          }
      }
      return {
          minDate: c
      }
  }
  </script>
  </head>
  <body >

  <div style="font-size:11px;">
  Depart Date: <input type="text" id="departingdate" class="dDate"><br>
  Return Date: <input type="text" id="returningdate" class="rDate">
  </div>

  </body>
 </html>