Question

我正在使用ajax日历扩展程序为“从日期”和“到日期”文本框，我必须禁用日期以前的日期或日期小于选择的“从日期”。我可以使用range validation查看很多帖子。如何在没有任何消息的情况下禁用日期？

Answer 1

您可以使用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 2

您可以使用带有隐藏触发按钮的更新面板来设置第二个文本框的日历扩展器的“EndDate”属性：

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

首先添加.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 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结束日期

4 个答案: