locked
Bootstrap Modal and Date Validation RRS feed

  • Question

  • User1099429166 posted

    Dear All,


    I have a bootstrap modal below is the code

    <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional" >
            <ContentTemplate>
                <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModal">
                    <div class="modal-dialog" role="document" style="width: 600px;">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="myModalLabel">Benefit</h4>
                            </div>
                            <div class="modal-body">
                                <div style="margin-bottom: 16px;">
                                    <label style="font-weight: bold; display: block;">First Name&nbsp;<span style="color: red;">*</span></label>
                                    <asp:TextBox runat="server" ID="txtFName" CssClass="form-control"></asp:TextBox>
                                </div>
                                <div style="margin-bottom: 16px;">
                                    <label style="font-weight: bold; display: block;">Last Name&nbsp;<span style="color: red;">*</span></label>
                                    <asp:TextBox runat="server" ID="txtLName" CssClass="form-control"></asp:TextBox>
                                </div>
    			   <div style="margin-top: 10px;">
                                    <label style="font-weight: bold; display: block;">Valid From <span style="color: red;">*</span></label>
                                    <input type="date" class="form-control" runat="server" id="startAdd" required="required">
                                </div>
                                <div style="margin-top: 10px;">
                                    <label style="font-weight: bold; display: block;">Valid To <span style="color: red;">*</span></label>
                                    <input type="date" class="form-control" runat="server" id="endAdd" required="required">
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                                <asp:Button runat="server" ID="btnSave"  class="btn btn-success" Text="Save"  OnClick="btn_save_Click" ></asp:Button>
                            </div>
                        </div>
                    </div>
                </div>
            </ContentTemplate>
        </asp:UpdatePanel>

    I need a compare validator for start and end date. The start date should always be less than equal to end date. If start date is greater than end date then it should display an error message in the bootstrap modal.

    Any help would be greatly appreciated

    Thursday, March 7, 2019 10:40 PM

All replies

  • User839733648 posted

    Hi Sam Solomon,

    According to your description and code, I suggest you could use bootstrap-datepicker to achieve your requirement.

    When you select the startdate, it will disable the date before startdate when you select enddate.

    Here is my testing code.

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/css/bootstrap-datepicker.css" rel="stylesheet" type="text/css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/js/bootstrap-datepicker.min.js"></script>
        <script>
            $(document).ready(function () {
                $("#startAdd").datepicker({
                    todayBtn: 1,
                    autoclose: true,
                }).on('changeDate', function (selected) {
                    var minDate = new Date(selected.date.valueOf());
                    $('#endAdd').datepicker('setStartDate', minDate);
                });
                $("#endAdd").datepicker()
                    .on('changeDate', function (selected) {
                        var minDate = new Date(selected.date.valueOf());
                        $('#startAdd').datepicker('setEndDate', minDate);
                    });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#editModal">Launch modal</button>
                <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
                <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
                    <ContentTemplate>
                        <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModal">
                            <div class="modal-dialog" role="document" style="width: 600px;">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                        <h4 class="modal-title" id="myModalLabel">Benefit</h4>
                                    </div>
                                    <div class="modal-body">
                                        <div style="margin-bottom: 16px;">
                                            <label style="font-weight: bold; display: block;">First Name&nbsp;<span style="color: red;">*</span></label>
                                            <asp:TextBox runat="server" ID="txtFName" CssClass="form-control"></asp:TextBox>
                                        </div>
                                        <div style="margin-bottom: 16px;">
                                            <label style="font-weight: bold; display: block;">Last Name&nbsp;<span style="color: red;">*</span></label>
                                            <asp:TextBox runat="server" ID="txtLName" CssClass="form-control"></asp:TextBox>
                                        </div>
                                        <div style="margin-top: 10px;">
                                            <label style="font-weight: bold; display: block;">Valid From <span style="color: red;">*</span></label>
                                            <input type="text" class="form-control" runat="server" id="startAdd" required="required" />
                                        </div>
                                        <div style="margin-top: 10px;">
                                            <label style="font-weight: bold; display: block;">Valid To <span style="color: red;">*</span></label>
                                            <input type="text" class="form-control" runat="server" id="endAdd" required="required" />
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                                        <asp:Button runat="server" ID="btnSave" class="btn btn-success" Text="Save"></asp:Button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>
        </form>
    </body>
    </html>
    

    result:

    Best Regards,

    Jenifer

    Friday, March 8, 2019 2:08 AM
  • User1099429166 posted

    Thanks for your reply. However I am not able to show bootstrap-datepicker in the modal. not sure why its not showing

    Friday, March 8, 2019 4:26 AM
  • User839733648 posted

    Hi Sam Solomon,

    Do you add the following reference to your code?

        <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/css/bootstrap-datepicker.css" rel="stylesheet" type="text/css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/js/bootstrap-datepicker.min.js"></script>

    When you use developer tools to check, is there any information in the console tab?

    Best Regards,

    Jenifer

    Friday, March 8, 2019 6:01 AM
  • User-2054057000 posted

    Hello Sam,

    I have created a demo which validates that The start date should always be less than equal to end date.

    I have used jQuery Datepicker plugin for picking the dates.

    This is how it works:

    Setup

    In the page head add the CSS, jQuery and jQuery UI from the CDN:

    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    Next add 3 controls in your HTML page:

    <div id="message"></div>
    <input type="text" id="datepicker1">
    <input type="text" id="datepicker2">
    <button id="button1">Click</button>
    

    Note: The 2 input controls are the ones for which the datepicker will work.

    Finally add the following custom jQuery method which validates i.e alerts user if the first date is smaller than second date:

    <script>
        $(document).ready(function () {
            $("#datepicker1").datepicker();
            $("#datepicker2").datepicker();
    
            $("#button1").click(function (e) {
                dateCheck($("#datepicker1").val(), $("#datepicker2").val());
    
                return false;
            });
    
            function dateCheck(date1, date2) {
                var matches1 = /^(\d{1,2})[-\/](\d{1,2})[-\/](\d{4})$/.exec(date1);
                if (matches1 == null) return false;
                var d1 = matches1[2];
                var m1 = matches1[1] - 1;
                var y1 = matches1[3];
    
                var matches2 = /^(\d{1,2})[-\/](\d{1,2})[-\/](\d{4})$/.exec(date2);
                if (matches2 == null) return false;
                var d2 = matches2[2];
                var m2 = matches2[1] - 1;
                var y2 = matches2[3];
    
                var composedDate1 = new Date(y1, m1, d1);
                var composedDate2 = new Date(y2, m2, d2);
    
                if (composedDate1 > composedDate2) {
                    $("#message").html("Date One is greater than Date Two.");
                } else {
                    $("#message").html("Correct.");
                }  
            }
        });
    </script>
    

    Explanation: d1, d2 extract the date value from the full dates.

    m1,m2 extracts the month value from the full dates.

    y1,y2 extracts the year value from the full dates.

    Then finally I compose the dates and do the checking part like shown below:

    var composedDate1 = new Date(y1, m1, d1);
    var composedDate2 = new Date(y2, m2, d2);
    

    Hope it solves your problem.

    Thanks & Regards....

    Friday, March 8, 2019 7:12 AM
  • User1099429166 posted

    Jenifer,

    Thanks for your reply. Its working now. But it only works when the page loads for the first time. As soon as their is partial postback on the page, it stops working

    Please help

    Saturday, March 9, 2019 1:25 PM
  • User475983607 posted

    Thanks for your reply. Its working now. But it only works when the page loads for the first time. As soon as their is partial postback on the page, it stops working

    Please help

    The Update Panel overwrites the HTML on the page.  This can be very destructive because it breaks all of the event handlers that were wired up when the page initially loaded in the browser.  You'll need to write code that rewires the JavaScript handlers when the Update Panel loads.

    Saturday, March 9, 2019 2:30 PM
  • User1099429166 posted

    Can you please help me write the code. Your help would be greatly appreciated

    Saturday, March 9, 2019 2:59 PM
  • User475983607 posted

    Can you please help me write the code. Your help would be greatly appreciated

    I'm not sure how to proceed as you have not shared your current code.  The fix should be relatively simple.  You probably have initialization code that runs in the jQuery/JavaScript ready handler.  If not done already, move the initialization code to a separate function.  Call the new function from the ready handler.  Follow the same concept with the Update Panel and simply call the new function.  This can be done in the code behind using the ClientScriptManager.RegisterStartupScript() method. 

    https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.clientscriptmanager.registerstartupscript?view=netframework-4.7.2

    At least try writing a bit of code first.  

    Saturday, March 9, 2019 3:39 PM
  • User1099429166 posted

    I am using this code given by Jenifer

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/css/bootstrap-datepicker.css" rel="stylesheet" type="text/css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/js/bootstrap-datepicker.min.js"></script>
        <script>
            $(document).ready(function () {
                $("#startAdd").datepicker({
                    todayBtn: 1,
                    autoclose: true,
                }).on('changeDate', function (selected) {
                    var minDate = new Date(selected.date.valueOf());
                    $('#endAdd').datepicker('setStartDate', minDate);
                });
                $("#endAdd").datepicker()
                    .on('changeDate', function (selected) {
                        var minDate = new Date(selected.date.valueOf());
                        $('#startAdd').datepicker('setEndDate', minDate);
                    });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#editModal">Launch modal</button>
                <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
                <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
                    <ContentTemplate>
                        <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModal">
                            <div class="modal-dialog" role="document" style="width: 600px;">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                        <h4 class="modal-title" id="myModalLabel">Benefit</h4>
                                    </div>
                                    <div class="modal-body">
                                        <div style="margin-bottom: 16px;">
                                            <label style="font-weight: bold; display: block;">First Name&nbsp;<span style="color: red;">*</span></label>
                                            <asp:TextBox runat="server" ID="txtFName" CssClass="form-control"></asp:TextBox>
                                        </div>
                                        <div style="margin-bottom: 16px;">
                                            <label style="font-weight: bold; display: block;">Last Name&nbsp;<span style="color: red;">*</span></label>
                                            <asp:TextBox runat="server" ID="txtLName" CssClass="form-control"></asp:TextBox>
                                        </div>
                                        <div style="margin-top: 10px;">
                                            <label style="font-weight: bold; display: block;">Valid From <span style="color: red;">*</span></label>
                                            <input type="text" class="form-control" runat="server" id="startAdd" required="required" />
                                        </div>
                                        <div style="margin-top: 10px;">
                                            <label style="font-weight: bold; display: block;">Valid To <span style="color: red;">*</span></label>
                                            <input type="text" class="form-control" runat="server" id="endAdd" required="required" />
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                                        <asp:Button runat="server" ID="btnSave" class="btn btn-success" Text="Save"></asp:Button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>
        </form>
    </body>
    </html>

    Saturday, March 9, 2019 4:20 PM
  • User1099429166 posted

    Any one?

    Sunday, March 10, 2019 3:36 AM
  • User1099429166 posted

    ok I  think  I got the  partial postback thing working. But now there is another problem I am facing. The changeDate event does not work when I enter dates manually by keyboard, I think the changeDate event is only for when the date is changed using the datepicker. Any idea how we can fix this

    Monday, March 11, 2019 2:43 AM
  • User839733648 posted

    Hi Sam Solomon,

    Just as mgebhard has said, the Update Panel will overwrite the HTML on the page. 

    So you should rewrite your JS code when trigger the event.

    I've made a sample and you could refer to. Please pay attention to the highlight code.

    .aspx

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/css/bootstrap-datepicker.css" rel="stylesheet" type="text/css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/js/bootstrap-datepicker.min.js"></script>
        <script>
            $(document).ready(function () {
                showContent();
            });
            function showContent() {
                $("#startAdd").datepicker({
                    todayBtn: 1,
                    autoclose: true,
                }).on('changeDate', function (selected) {
                    var minDate = new Date(selected.date.valueOf());
                    $('#endAdd').datepicker('setStartDate', minDate);
                });
    
                $("#endAdd").datepicker()
                    .on('changeDate', function (selected) {
                        var minDate = new Date(selected.date.valueOf());
                        $('#startAdd').datepicker('setEndDate', minDate);
                    });
                $("#btnSave").click(function () {
                    $('#editModal').modal('toggle');
                    alert('111');
                })
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#editModal">Launch modal</button>
                <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
                <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
                    <ContentTemplate>
                        <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModal">
                            <div class="modal-dialog" role="document" style="width: 600px;">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                        <h4 class="modal-title" id="myModalLabel">Benefit</h4>
                                    </div>
                                    <div class="modal-body">
                                        <div style="margin-bottom: 16px;">
                                            <label style="font-weight: bold; display: block;">First Name&nbsp;<span style="color: red;">*</span></label>
                                            <asp:TextBox runat="server" ID="txtFName" CssClass="form-control"></asp:TextBox>
                                        </div>
                                        <div style="margin-bottom: 16px;">
                                            <label style="font-weight: bold; display: block;">Last Name&nbsp;<span style="color: red;">*</span></label>
                                            <asp:TextBox runat="server" ID="txtLName" CssClass="form-control"></asp:TextBox>
                                        </div>
                                        <div style="margin-top: 10px;">
                                            <label style="font-weight: bold; display: block;">Valid From <span style="color: red;">*</span></label>
                                            <input type="text" class="form-control" runat="server" id="startAdd" required="required" />
                                        </div>
                                        <div style="margin-top: 10px;">
                                            <label style="font-weight: bold; display: block;">Valid To <span style="color: red;">*</span></label>
                                            <input type="text" class="form-control" runat="server" id="endAdd" required="required" />
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                                        <asp:Button runat="server" ID="btnSave" class="btn btn-success" Text="Save" OnClick="btnSave_Click"></asp:Button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>
        </form>
    </body>
    </html>
    

    code-behind.

            protected void btnSave_Click(object sender, EventArgs e)
            {
                ScriptManager.RegisterStartupScript(this, this.GetType(), "callme", "showContent();", true);
            }

    result:

    Best Regards,

    Jenifer

    Monday, March 11, 2019 3:17 AM
  • User1099429166 posted

    ok I  think  I got the  partial postback thing working. But now there is another problem I am facing. The changeDate event does not work when I enter dates manually by keyboard, I think the changeDate event is only for when the date is changed using the datepicker. Any idea how we can fix this

    Monday, March 11, 2019 3:32 AM
  • User839733648 posted

    Hi Sam Solomon,

    The datepicker plugin will check even if you type the date incorrectly.

    You could see that if you type in the wrong format it will change the date to today automatically or empty the textbox.

    If you type the end date less that start date it will also empty the textbox.

    The plugin will always work.

    Best Regards,

    Jenifer

    Monday, March 11, 2019 5:42 AM
  • User1099429166 posted

    ok I was able to reproduce the issue , Below is the code

    <script>
            $(document).ready(function () {
    
    	$('#startAdd').datepicker().datepicker('setDate', 'today');
    	$('#endAdd').datepicker().datepicker('setDate', 'today');
    
                $("#startAdd").datepicker({
                    todayBtn: 1,
                    autoclose: true,
                }).on('changeDate', function (selected) {
                    var minDate = new Date(selected.date.valueOf());
                    $('#endAdd').datepicker('setStartDate', minDate);
                });
                $("#endAdd").datepicker()
                    .on('changeDate', function (selected) {
                        var minDate = new Date(selected.date.valueOf());
                        $('#startAdd').datepicker('setEndDate', minDate);
                    });
            });
        </script>

    so when the bootstrap modal loads, the textboxes are preloaded with  startdate: 03/11/2019 and also enddate with 03/11/2019.  Now in enddate change 9 to 3 by keyboard, not the full 2019 number but only number 9, it will become 2013 and nothing will happen, the textbox won't be empty.

    Monday, March 11, 2019 12:46 PM
  • User475983607 posted

    so when the bootstrap modal loads, the textboxes are preloaded with  startdate: 03/11/2019 and also enddate with 03/11/2019.  Now in enddate change 9 to 3 by keyboard, not the full 2019 number but only number 9, it will become 2013 and nothing will happen, the textbox won't be empty.

    Right and this expected because you have not written any code to handle this situation.  The solution is same concept as above.  Move the validation logic into a function then call that function through JavaScript event handlers.  In this case, when the focus leaves the text input; blur.   

    Monday, March 11, 2019 12:56 PM
  • User1099429166 posted

    I thought the datepicker plugin should change the date to today automatically or empty the textbox?

    Monday, March 11, 2019 1:01 PM
  • User475983607 posted

    I thought the datepicker plugin should change the date to today automatically or empty the textbox?

    Perhaps your assumption is wrong.  Now you need to write code to handle this new programming problem.

    Monday, March 11, 2019 1:06 PM
  • User1099429166 posted

    ok I am trying to use this function but its not working

     function blankDates() {
                            if (($("#startAdd").datepicker("getDate") >= $("#endAdd").datepicker("getDate")) && $("#startAdd").val() != "" && $("#endAdd").val() != "") {
                                $("#endAdd").val("");
                                alert("Start date must be before end date");
                                return false;
                            }

    I am using this function OnClientClick in my button.

    Please help

    Tuesday, March 12, 2019 1:26 PM
  • User475983607 posted

    ok I am trying to use this function but its not working

     function blankDates() {
                            if (($("#startAdd").datepicker("getDate") >= $("#endAdd").datepicker("getDate")) && $("#startAdd").val() != "" && $("#endAdd").val() != "") {
                                $("#endAdd").val("");
                                alert("Start date must be before end date");
                                return false;
                            }

    I am using this function OnClientClick in my button.

    Please help

    Phrases like "not working" assumes that we understand your expectations. 

    Please take a moment to review your logic.  In order to enter the "if", each expression must evaluate to true in order.  I recommend using the Browser's debugger (F12) to double check your expected logic.  One approach is writing the state of your code to the console to make sure the code is functioning as you expect.

    function blankDates() {
    	console.log($("#startAdd").datepicker("getDate"));
    	console.log($("#endAdd").datepicker("getDate"));
    	console.log(($("#startAdd").datepicker("getDate") >= $("#endAdd").datepicker("getDate")));
    	console.log($("#startAdd").val() != "");
    	console.log($("#endAdd").val() != "");
    	return false;
    }

    Tuesday, March 12, 2019 1:49 PM
  • User1099429166 posted

    its not going in if block

    Tuesday, March 12, 2019 2:00 PM
  • User475983607 posted

    Sam Solomon

    its not going in if block

    Learn how to debug.  See my previous post to figure out what's wrong with your code.  Be sure to have the console view open when testing the function.

    https://developers.google.com/web/tools/chrome-devtools/console/

    Tuesday, March 12, 2019 2:04 PM
  • User1099429166 posted

    ok I did console.log and I c startdate is returning null

    Tuesday, March 12, 2019 5:07 PM
  • User475983607 posted

    ok I did console.log and I c startdate is returning null

    Can you explain what I'm I supposed to do with this information? 

    Is the null startDate is expected or unexpected for this test?  Please explain the test you are performing.  Also explain the expected result and the actual result.   

    Tuesday, March 12, 2019 5:24 PM