Remove From My Forums

Bootstrap datepicker hide issue

Question

User1099429166 posted

Dear All,

I have a Bootstrap datepicker inside a bootstrap modal. Below is my code

          $("#ctl00_ContentPlaceHolder1_endEdit").datepicker({
              todayBtn: 1,
              autoclose: true,
              orientation: "bottom auto",
              format: 'm/d/yyyy',
              startDate: "01/01/2019",
              container: $('#editModalDates'),

          })
            .on('changeDate', function (selected) {
                var minDate = new Date(selected.date.valueOf());
                $('#ctl00_ContentPlaceHolder1_startEdit').datepicker('setEndDate', minDate);
            });

When I click in startEdit input textbox the datepicker opens and I select a date and it closes, which is fine. My problem is that when I dont't select anything in the datepicker and click anywhere else in the bootstrap modal the datepicker closes. I only want the datepicker to close when I select a date in the datepicker , othwise it should always remain open

Saturday, April 6, 2019 11:28 AM

All replies

0

Sign in to vote

User1099429166 posted

Any one?

Saturday, April 6, 2019 9:06 PM
0

Sign in to vote
User-2054057000 posted

Try changing the autoclose property in your code to:

autoclose: false,
Sunday, April 7, 2019 5:15 AM
0

Sign in to vote

User1099429166 posted

Thanks for your reply. I tried this but it didn't work

Sunday, April 7, 2019 11:33 AM

User839733648 posted

Hi Sam Solomon,

I suggest that you could use .blur function to check if the textbox has value and then set focus to it to let it not close.

I've made a sample and maybe you could refer to.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <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 () {
            $("#testdate").on("blur", function () {
                var test1 = $("#testdate").val();
                if (test1.trim() == "" || test1 == null) {
                    if ($(".datepicker").length == 0) {
                        $("#testdate").focus();
                    }
                }
            })
            $("#testdate").datepicker({
                autoclose: true,
            });

            $("#btnSave").click(function () {
                $('#editModal').modal('toggle');
            })
        });
    </script>
</head>
<body>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#editModal">Launch modal</button>
    <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-top: 10px;">
                        <label style="font-weight: bold; display: block;">Name</label>
                        <input type="text" class="form-control" runat="server" id="name" />
                    </div>
                    <div style="margin-top: 10px;">
                        <label style="font-weight: bold; display: block;">Age</label>
                        <input type="text" class="form-control" runat="server" id="age" />
                    </div>
                    <div style="margin-top: 10px;">
                        <label style="font-weight: bold; display: block;">Date</label>
                        <input type="text" class="form-control" runat="server" id="testdate" 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>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

result:

Best Regards,

Jenifer

Monday, April 8, 2019 9:07 AM

0

Sign in to vote

User1099429166 posted

Jenifer,

Thank you very much for your reply. Problem is that this solution only works in chrome and does not work in FireFox. Can we have a solution that works in all browsers

Monday, April 8, 2019 3:23 PM

User839733648 posted

Hi Sam Solomon,

Problem is that this solution only works in chrome and does not work in FireFox.

I suggest that you could add setTimeout function to focus().

You could just modify below code.

            $("#testdate").on("blur", function () {
                var test1 = $("#testdate").val();
                if (test1.trim() == "" || test1 == null) {
                    if ($(".datepicker").length == 0) {
                        setTimeout("$('#testdate').focus();", 0);  
                    }
                }
            })

Best Regards,

Jenifer

Tuesday, April 9, 2019 2:23 AM

Asked by:

Bootstrap datepicker hide issue

Question

All replies