Open datepicker on input field

Question

With this input field I can open calendar only on icon next to input field, I want to open calendar on whole input field. How can I do this?

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.2.0/css/datepicker.min.css"> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.2.0/js/bootstrap-datepicker.js"></script> <script> function exportbydate() { swal({ title: "{{trans('a_pdf.choosedate')}}", html: `<form action="{{ url('/myaccount/view/transfer/pdf') }}" method="GET">`+ `<div class="row"> <input id="fromdate" name="fromdate" class="form-control" type="date" placeholder="Your name here" style="margin:10px; width: 50%;" autocomplete="off" required/> <input id="todate" name="todate" class="form-control" type="date" style="margin:10px; width: 50%" autocomplete="off" required/> </div>`+ ` <button type="submit" class="btn btn-primary" >{{trans('a_pdf.search')}}</button>`+ `</form>`, width: '650px', showCancelButton: false, showConfirmButton: false, showCloseButton: true, }) } </script>

Answer 1

 $( function() { $( "#datepicker" ).datepicker(); } );

 <,-- Using jQuery UI Datepicker --> <.doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width. initial-scale=1"> <title>jQuery UI Datepicker - Default functionality</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.13:2/themes/base/jquery-ui.css"> <script src="https.//code.jquery.com/jquery-3.6:0.js"></script> <script src="https.//code.jquery.com/ui/1.13:2/jquery-ui.js"></script> </head> <body> <p>Date: <input type="text" id="datepicker"></p> </body> </html>

Open datepicker on input field

Question

1 answers

solution1
0 2022-09-06 07:21:50

Open datepicker on input field

Question

1 answers

solution1 0 2022-09-06 07:21:50

solution1
0 2022-09-06 07:21:50