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>

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

Accepted answer

Lan Huang-MSFT 25,556 Microsoft Vendor

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>

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.

Simflex 301

Thank you so much for your response @Lan Huang

There is one issue I would like to correct, please.

There is no future date and no restrictions on previous date.

Therefore, this:

            $('[id*=PurchaseDate]').datepicker({ minDate: 0 });
            $('#ReturnDate').datepicker({
                minDate: 0,

should be:


            $('[id*=PurchaseDate]').datepicker({ maxDate: 0 });
            $('#ReturnDate').datepicker({
                maxDate: 0,

That is I changed from minDate: 0 to maxDate:0 since there can be NO future purchase date.

So, the way it should work is that customer selects, for instance, 02/01/2023 as purchase date and the date it is received by an employee to be returned is 05/09/2023. This means the item was purchased more than 60 days from the return date; therefore the RefundAmount box is disabled. 

Also, you asked:

As a result of that error in minDate instead of maxDate, it doesn't work for me.

My sincere apologies for that.

Lan Huang-MSFT 25,556 Microsoft Vendor

Hi @Simflex,

As a result of that error in minDate instead of maxDate, it doesn't work for me.

Replacing minDate with maxDate also works. I wrote the function of disabling the text box in the ReturnDate date picker, and it will only take effect if the ReturnDate date picker is selected.

Of course, you can write the function of disabling the textbox to both datepickers at the same time.

 <script type="text/javascript">
        $(function () {
            $('[id*=PurchaseDate]').datepicker({
                maxDate: 0,
                onSelect: function () {
                    select();
                }

            });
            $('#ReturnDate').datepicker({
                minDate: 0,
                onSelect: function () {
                    select();
                }
            });
            function select() {
                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>

Simflex 301 Reputation points

2023-05-31T03:50:00.25+00:00

@Lan Huang

Thanks once again for your kind.

This version works perfectly.

Thank you so much for sharing your awesome skills with me.

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

@Lan Huang

0 additional answers