2

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?

4

4 に答える 4

0

非表示のトリガーボタンを備えた更新パネルを使用して、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」関数が呼び出されて部分的なポストバックが実行されます。この時点で、2番目のカレンダーエクステンダーの終了日プロパティを設定できます。

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
于 2012-06-26T06:43:11.053 に答える
0

最初に.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" />
于 2012-06-26T06:44:16.977 に答える
0

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
        }
}
于 2012-06-26T05:30:11.917 に答える
0

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>
于 2015-03-04T12:32:21.690 に答える