How to disable textbox control when Purchase Date is more than 60 days past Receipt Date

Simflex 301 Reputation points
2023-05-30T01:57:03.2566667+00:00

Hi,

I know this question has to do with jQuery date picker but I can't find jQuery or JavaSxript.

We have three textbox controls, ReturnDate, PurchaseDate, and RefundAmount.

PurchaseDate and RefundAmount are part of a Repeater control.

Our customers are allowed to return items purchased within 60 days in other to get a refund.

If an item is returned after 60 days on the purchase ticket (PurchaseDate), no refund will be given,

So, our requirement is to present a customer with a date picker with ReturnDate control ld,

This is the the date the client is returning the item s/he purchase.

This date is compared to the purchase date, If the purchase date is more than 60 days from the return date (returnDate), then we would like the RefundAmount textbox disabled.

Any ideas how to resolve this?

<head runat="server">
 <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
 <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
 <link href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css" rel="stylesheet" />
 <script type="text/javascript">
   $(function() {
   $('#ReturnDate').datepicker({ minDate: 0});
   });
 </script>
 <script type="text/javascript">
  $(function() {
  $('#PurchaseDate').datepicker({ minDate: 0});
  });
 </script>
 </head>
  <body>
   <form id="form1" runat="server" style="margin-left:200px;" autocomplete="off">
    <div>
      <table>
        <tr>
          <td>
          <asp:TextBox ID="ReturnDate" runat="server" />
         </td>
        </tr>
       </table>
    </div>
    <div>
      <asp:Repeater ID="DynamicRepeater" runat="server">
                 <HeaderTemplate>
                     <table border="1">
                         <tr>
                            <td><b>Refund Amount</b></td>
                             <td><b>Purchase Date</b></td>
                         </tr>
                      </HeaderTemplate>
                      <ItemTemplate>
                     <tr>                             
                       <td>
                        <asp:TextBox ID="PurchaseDate" runat="server" />
                       </td>
                     </tr>
                    </ItemTemplate>
                   <FooterTemplate>
                     </table>
                   </FooterTemplate>
                </asp:Repeater>                        
               </div>
         </body>
        </html>
ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,404 questions
0 comments No comments
{count} votes

Accepted answer
  1. Lan Huang-MSFT 28,826 Reputation points Microsoft Vendor
    2023-05-30T06:30:32.03+00:00

    Hi @Simflex,

    I'm assuming your PurchaseDate and RefundAmount are fetched from the database, then the date is selected via the ReturnDate date picker by disabling the textbox based on the condition.

    Specifically, you can view the following code:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
        <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
        <link href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css" rel="stylesheet" />
        <script type="text/javascript">
            $(function () {
                $('[id*=PurchaseDate]').datepicker({ minDate: 0 });
                $('#ReturnDate').datepicker({
                    minDate: 0,
                    onSelect: function () {
                        var returnDate = $('#ReturnDate').val();
                        var rpPurchaseDateArray = document.getElementsByClassName('rpPurchaseDate');
                        var rpRefundAmount = document.getElementsByClassName('rpRefundAmount');
                        for (var i = 0; i < rpPurchaseDateArray.length; i++) {
                            var purchaseDate = rpPurchaseDateArray[i].value;
                            if (Date.parse(returnDate) - Date.parse(purchaseDate) > 60 * 86400 * 1000) {
                                rpRefundAmount[i].disabled = true;
                            }
                            else {
                                rpRefundAmount[i].disabled = false;
                            }
                        }
                    }
                });
            });
        </script>
    
    </head>
    <body>
        <form id="form1" runat="server" style="margin-left: 200px;" autocomplete="off">
            <div>
                <table>
                    <tr>
                        <td>
                            <asp:TextBox ID="ReturnDate" runat="server" />
                        </td>
                    </tr>
                </table>
            </div>
            <div>
                <asp:Repeater ID="DynamicRepeater" runat="server">
                    <HeaderTemplate>
                        <table border="1">
                            <tr>
                                <td><b>Refund Amount</b></td>
                                <td><b>Purchase Date</b></td>
                            </tr>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <tr>
                            <td>
                                <asp:TextBox ID="RefundAmount" CssClass="rpRefundAmount" runat="server" Text='<%# Eval("RefundAmount")%>'></asp:TextBox>
                            </td>
                            <td>
                                <asp:TextBox ID="PurchaseDate" CssClass="rpPurchaseDate" runat="server" Text='<%# Eval("PurchaseDate", "{0: MM/dd/yyyy}")%>' />
                            </td>
    
                        </tr>
                    </ItemTemplate>
                    <FooterTemplate>
                        </table>
                    </FooterTemplate>
                </asp:Repeater>
            </div>
        </form>
    </body>
    </html>
    
    

    1

    Best regards,
    Lan Huang


    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.


0 additional answers

Sort by: Most helpful