JavaScript validation: Start date should be less than End date in ASP.Net

Last Reply 7 months ago By dharmendr

Posted 7 months ago

Hello Sir,

I' trying to compare the 2 dates in javascript.

Validating the End date should be greater than the start date

Below is the code.

<div class="form-group">
    <label>Start Date </label>
    <asp:TextBox ID="start_date" class="form-control Datepicker " placeholder="Enter Date" runat="server"></asp:TextBox>
    <Ajax:CalendarExtender ID="CalendarExtender5" runat="server"
        TargetControlID="start_date" CssClass="" Format="dd/MM/yyyy"
        Enabled="True"
        PopupButtonID="start_date" />
</div>
<div class="form-group">
    <label>End Date </label>
    <asp:TextBox ID="End_date" class="form-control Datepicker " placeholder="Enter Date" runat="server"></asp:TextBox>
    <Ajax:CalendarExtender ID="CalendarExtender5" runat="server"
        TargetControlID="End_date" CssClass="" Format="dd/MM/yyyy"
        Enabled="True"
        PopupButtonID="End_date" />
</div>
<script type="text/javascript">       
    function Update() {           
        var fv50 = document.getElementById('<%=start_date.ClientID%>').value;
        var fv52 = document.getElementById('<%=End_enddate.ClientID%>').value;           
        else if ((fromDate != "" && toDate != "") && Date.parse(fromDate) > Date.parse(toDate)) {
            alert("To date should be greater than From date.");
            return false;
        }           
        else {
            swal({
                title: "Are you sure?",
                text: "You want to Update!",
                type: "warning", showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "Yes, Update it!",
                cancelButtonText: "No, Cancel Please!",
                closeOnConfirm: false,
                closeOnCancel: false
            },
            function (isConfirm) {
                if (isConfirm) {
                    swal({
                        title: 'Updated!',
                        text: 'Your record has been Updated.',
                        type: 'success'
                    }, function () {
                        document.getElementById('<%=hidUpdate.ClientID%>').value = "Update";
                            document.forms[0].submit();
                        });

                } else {
                    swal("Cancelled", "Your record is safe :)", "error");
                }
            });
        }
    }        
</script>

Please help

Thanks

Posted 7 months ago

Hi democloud,

To compare you need to first convert dd/mm/yyyy format to yyyy/mm/dd in JavaScript.

Check this example. Now please take its reference and correct your code.

HTML

<div>
    <asp:ScriptManager runat="server" />
    <div class="form-group">
        <label>
            Start Date
        </label>
        <asp:TextBox ID="txtStartDate" class="form-control Datepicker " placeholder="Enter Date"
            runat="server"></asp:TextBox>
        <ajax:CalendarExtender ID="ceStartDate" runat="server" TargetControlID="txtStartDate"
            CssClass="" Format="dd/MM/yyyy" Enabled="True" PopupButtonID="txtStartDate" />
    </div>
    <div class="form-group">
        <label>
            End Date
        </label>
        <asp:TextBox ID="txtEndDate" class="form-control Datepicker " placeholder="Enter Date"
            runat="server"></asp:TextBox>
        <ajax:CalendarExtender ID="ceEndDate" runat="server" TargetControlID="txtEndDate"
            CssClass="" Format="dd/MM/yyyy" Enabled="True" PopupButtonID="txtEndDate" />
    </div>
    <asp:Button Text="Validate" runat="server" OnClientClick="return Update()" />
</div>
<link rel="stylesheet" href='https://cdn.rawgit.com/t4t5/sweetalert/v0.2.0/lib/sweet-alert.css' />
<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script type="text/javascript" src='https://cdn.rawgit.com/t4t5/sweetalert/v0.2.0/lib/sweet-alert.min.js'> </script>
<script type="text/javascript">
    function Update() {
        var fromDate = document.getElementById('<%=txtStartDate.ClientID%>').value.split(/\//).reverse().join('/');
        var toDate = document.getElementById('<%=txtEndDate.ClientID%>').value.split(/\//).reverse().join('/');
        if ((fromDate != "" && toDate != "") && (Date.parse(fromDate) > Date.parse(toDate))) {
            swal("End date should be greater than Start date", "", "error");
            return false;
        } else {
            swal("Your record has been Updated.", "", "success");
            return false;
        }
    }         
</script>

Screenshot