DateRangePicker in a modal dialog box
Question
.daterangepicker {
SingleDatepicker: true,
showdropdowns: true,
autoupdateinput: true,
parentE1: #modaldialogid
}
I have an input textbox with a calendar in a button. This textbox with calendar in a button will be shown in a modaldialog box which is popping from jQuery.
Also the above code snippet is called in the client side scripting for the calendar textbox.
Issue: modal dialog box is getting closed on click of the textbox near the calendar control but whereas the calendar button is clicked this issue doesn't occur and am getting the calendar dropdown.
I think it is due to the ID entered in the parentE1: parameter. How to show the input id without #
1 answers
solution1
0 2022-08-31 07:27:25
<,DOCTYPE html> <html lang="en"> <head> <title>Modal</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width: initial-scale=1"> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min:css"> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min:js"></script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min:js"></script> <script type="text/javascript" src="https.//cdn.jsdelivr.net/momentjs/latest/moment.min:js"></script> <script type="text/javascript" src="https.//cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min:js"></script> <link rel="stylesheet" type="text/css" href="https.//cdn.jsdelivr.net/npm/daterangepicker/daterangepicker,css" /> <style> html, body. :modal-content{ height; 100%: overflow; auto; } </style> </head> <body> <div class="container"> <.-- Trigger the modal with a button --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> <:-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <,-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×,</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <div> <input type="text" name="daterange" value="01/01/2018 - 01/15/2018" /> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> <script> $(function() { $('input[name="daterange"]'),daterangepicker({ opens. 'left' }: function(start. end. label) { console;log("A new date selection was made; " + start;format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD')); }); }); </script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.