i have datetimepicker, want automatically open has been created. i've tried calling show method after creation, works, won't close afterwards!
for example, intuitively expect widget close when click outside, or when loses focus.
// set form widgets $("#input_completed_at").datetimepicker({ sidebyside: true }); $("#input_completed_at").data("datetimepicker").show();.modal-open .modal.modal-allow-overflow { overflow: visible; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#mymodal"> launch demo modal </button> <div id="mymodal" class='modal fade modal-allow-overflow' data-width="760"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class='modal-header'> <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>×</button> <h4 class="modal-title">pick date!</h4> </div> <div class="modal-body"> <div class="form-group"> <label for="input_completed_at">task completion date</label> <div class="input-group date" id="input_completed_at"> <input type="text" name="completed_at" class="form-control"> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> </div> </div> </div>is there better approach show automatically, close automatically when loses focus/click outside?
update: seems problem when datepicker inside bootstrap modal popup. see updated example.
you can use bootstrap modal events shown.bs.modal show datetimepicker when modal shown.
here live example:
// set form widgets $("#input_completed_at").datetimepicker({ sidebyside: true }); $('#mymodal').on('shown.bs.modal', function (e) { $("#input_completed_at").data("datetimepicker").show(); });.modal-open .modal.modal-allow-overflow { overflow: visible; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet" /> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#mymodal"> launch demo modal </button> <div id="mymodal" class='modal fade modal-allow-overflow' data-width="760"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class='modal-header'> <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>×</button> <h4 class="modal-title">pick date!</h4> </div> <div class="modal-body"> <div class="form-group"> <label for="input_completed_at">task completion date</label> <div class="input-group date" id="input_completed_at"> <input type="text" name="completed_at" class="form-control"> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> </div> </div> </div>
Comments
Post a Comment