How optimal date validation technique using datepicker?

Question

How optimal date validation technique using datepicker?

Aypn CNN 446

Hi,

Refer to the code below, which attempts to check a date. The Transaction Date must be within 90 days of today, and when I choose a datepicker, it should validate the date. However, I repeately receiving alert messages; how can I stop this from happening? instead, please provide the optimal date validation technique using datepicker.

Html Code:

<div class="form-group">
<label>01.Bank Proof Type *</label>
<asp:DropDownList ID="ddlBankDocType" runat="server" CssClass="form-control" Width="170px">
<asp:ListItem Text="--Select--" Value="0"></asp:ListItem>
<asp:ListItem Text="Bank Statement" Value="1"></asp:ListItem>
<asp:ListItem Text="Bank Passbook" Value="2"></asp:ListItem>
<asp:ListItem Text="Cancelled Cheque" Value="3"></asp:ListItem>
</asp:DropDownList>
<asp:RequiredFieldValidator ID="Rfv_DDLBankDoc" runat="server" ErrorMessage="Please Select a Bank uploading Document Type!" InitialValue="0" ControlToValidate="ddlBankDocType" ValidationGroup="group3" Display="None"></asp:RequiredFieldValidator>
</div>

function pageLoad() {  
              
    var todaydt = new Date();  
    $('#txt_TransactionDate').datepicker({  
        autoclose: true,  
        format: "dd/mm/yyyy",  
        endDate: todaydt  
    });  
    }

JQuery:

<script>  
function dtChange() {  
       var txndt = $("#txt_TransactionDate").val();  
    if (!$(txndt)) {  
        alert("Sorry! Transaction date is missing, please enter the Last Date of Transaction");  
                return false;  
    }  
    else {  
        alert($(txndt));  
        var DocTypeId = $("#ddlBankDocType").val();  
        var dx = new Date($(txndt).split("/").reverse().join("-"));  
        var d1 = new Date();  
        var d2 = new Date(dx);  
        var time = d1.getTime() - d2.getTime();  
        var days = time / (1000 * 3600 * 24);  
  
        if (DocTypeId == 1) {  
            if ($(txndt).text().trim().length == 0) {  
                alert("Sorry, Please enter the Last Date of Banking Transaction!");  
                return false;  
            } else {  
                if (parseInt(days) > parseInt(90)) {  
                    alert("Sorry, In comparison to today, The Last Banking Statement Transaction Date should be within 90 days!");  
                    return false;  
                }  
            }  
  
        } else if (DocTypeId == 2) {  
            if ($(txndt).text().trim().length == 0) {  
                alert("Sorry, Please enter the last Banking Transaction Date!");  
                return false;  
            } else {  
                if (parseInt(days) > parseInt(90)) {  
                    alert("Sorry, In comparison to today, The Last Passbook Transaction Date should be within 90 days!");  
                    return false;  
                }  
            }  
        } else if (DocTypeId == 0) {  
            alert("Sorry, Please select an Item of Bank Document Dropdown Type!");  
            var drbntyp = document.getElementById("ddlBankDocType");  
            drbntyp.style.border = "1px solid red";  
            drbntyp.style.color = "red";  
            return true;  
        }  
   }  
}  
</script>

1 answer

Your answer

Answer 1

Hi @Aypn CNN ,
I tested your code. Your RequiredFieldValidato control is not in effect. You need to disable client-side validation so that the validation controls always perform validation on the server,The documentation states:

If client-side validation is not active (because the browser does not support it or because it has been disabled by using the Page.ClientTarget page directive or EnableClientScript property)

A lot of your verification information is repeated, I wrote a simple example based on your code:

 <div class="input-group date">  
        <div class="input-group-addon">  
            <i class="fa fa-calendar"></i>  
        </div>  
        <asp:TextBox ID="txt_TransactionDate" runat="server" CssClass="form-control" placeholder="Future Date NotAllow" Width="200px" autocomplete="off" ></asp:TextBox>  
        <asp:RequiredFieldValidator ID="RFV_TxnDate" Display="Dynamic" runat="server"  EnableClientScript="false" ErrorMessage="Transaction Date shoud not null!" ForeColor="red" ControlToValidate="txt_TransactionDate" ValidationGroup="group3"></asp:RequiredFieldValidator>  
    </div>  
    <div class="form-group">  
        <label>01.Bank Proof Type *</label>  
        <asp:DropDownList ID="ddlBankDocType" runat="server" CssClass="form-control" Width="170px">  
            <asp:ListItem Text="--Select--" Value="0"></asp:ListItem>  
            <asp:ListItem Text="Bank Statement" Value="1"></asp:ListItem>  
            <asp:ListItem Text="Bank Passbook" Value="2"></asp:ListItem>  
            <asp:ListItem Text="Cancelled Cheque" Value="3"></asp:ListItem>  

        </asp:DropDownList>  
        <asp:RequiredFieldValidator ID="Rfv_DDLBankDoc" runat="server" ErrorMessage="Please Select a Bank uploading Document Type!" EnableClientScript="false" ForeColor="red" InitialValue="0" ControlToValidate="ddlBankDocType" ValidationGroup="group3" Display="Dynamic"></asp:RequiredFieldValidator>  
    </div>  
    <asp:Button ID="Button1" runat="server" Text="Button" ValidationGroup="group3" OnClientCl ick="dtChange()"/>

EDIT

fun ction pa geLo ad ( ) {  
          $('#txt_TransactionDate').datepicker({  
                    Format: 'dd/mm/yyyy',  
                    autoclose: true,  
                    maxDate: '+90d',  
                onClose: function (date, datepicker) {  
                           var DocTypeId = $("#ddlBankDocType").val();  
                    if (date != "" && DocTypeId != 0) {  

                        var today = new Date();  
                        var txndt = $("#txt_TransactionDate").datepicker("getDate");  
                        var diff = new Date(txndt - today);  
                        var days = diff / 1000 / 60 / 60 / 24;  
                        if (Math.round(days) > 90 && DocTypeId == 1) {  

                            alert("Sorry, In comparison to today, The Last Banking Statement Transaction Date should be within 90 days!");  
                        }  
                        if (Math.round(days) > 90 && DocTypeId == 2) {  

                            alert("Sorry, In comparison to today, The Last Passbook Transaction Date should be within 90 days!");  
                        }  
                    }  
                    else if (date == "") {  
                        alert("Transaction Date shoud not null!");  
                    }  
                    else if (DocTypeId == 0) {  
                        alert(" Please Select a Bank uploading Document Type!");                           
                    }  
                         
                }  
            });  
        }             
        wi n dow.onlo ad = pa geLo ad;

<div class="input-group date">  
            <div class="input-group-addon">  
                <i class="fa fa-calendar"></i>  
            </div>  
            <asp:TextBox ID="txt_TransactionDate" runat="server" CssClass="form-control" placeholder="Future Date NotAllow" Width="200px" autocomplete="off" ></asp:TextBox>  
             
        </div>  
        <div class="form-group">  
            <label>01.Bank Proof Type *</label>  
            <asp:DropDownList ID="ddlBankDocType" runat="server" CssClass="form-control" Width="170px">  
                <asp:ListItem Text="--Select--" Value="0"></asp:ListItem>  
                <asp:ListItem Text="Bank Statement" Value="1"></asp:ListItem>  
                <asp:ListItem Text="Bank Passbook" Value="2"></asp:ListItem>  
                <asp:ListItem Text="Cancelled Cheque" Value="3"></asp:ListItem>  
  
            </asp:DropDownList>         
        </div>

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.

Aypn CNN 446 Reputation points

2022-10-19T11:29:07.643+00:00

Hi,

Noted, pls understand my requirment,
The client would choose the Bank Proof Type and then only select the date in Dtpicker
When click/select date, it should start 90 days validation, according to my requirment kindly modify and share code.

Thanks in advance.
Lan Huang-MSFT 30,186 Reputation points Microsoft External Staff

2022-10-20T02:33:50.977+00:00

Hi @Aypn CNN ,
I followed your code, you didn't provide dtChange() method, so I used button.

If you look at my code, you'll notice that I use maxDate: '+90d', which means dates older than 90 days are disabled.

I think you can use the onClose event to validate the date the datepicker is closed (to prevent manual date entry).

I wrote a new example and edited it into my answer you can check out.

Best regards,
Lan Huang

Share via

How optimal date validation technique using datepicker?

1 answer

EDIT

Your answer