阿贾克斯日历扩展结束日期(Ajax Calendar Extender End Date)

我使用AJAX日历扩展为“从日期”和“迄今为止”文本框中，我必须禁用迄今为止以前的日期或日期比选择了“从日期”较小。我可以看到使用的许多职位range validation 。我怎么可以在没有任何消息给用户停用的日期？

Answer 1:

首先添加的.dll - RJS.Web.WebControl.PopCalendar.Net.2008.dll

然后添加源代码如下：

<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" />

Answer 2:

您可以使用ASP：的CustomValidator。在OnServerValidate="ServerValidate"方法，你可以写这种代码（代码隐藏文件）：

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
        }
}

Answer 3:

您可以使用更新面板采用了隐藏触发按钮设置第二个文本框的日历扩展的“结束日期”的属性：

    <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;" />

在上面的代码中，当用户在第一日历扩展器的选择时，“dateSelectionChanged”函数被调用以执行局部回传。此时，您可以设置第二个日历扩展的结束日期属性：

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

Answer 4:

试试这个：

<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>

文章来源: Ajax Calendar Extender End Date