Datepicker is not working with bootstrap 4
Question
I want functionality like the user can choose the date range. When clicking on first text box then the date picker should be open and the user can select the start date and the same for the second textbox for end date.
Below code, I have tried but it is not working, I console it and it will throw this Uncaught TypeError: $(...).datepicker is not a function", error...
Please help me to solve it. Any help would be appreciated.
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body> <div class="input-group input-daterange"> <input type="text" class="form-control" value="2012-04-05"> <div class="input-group-addon">to</div> <input type="text" class="form-control" value="2012-04-19"> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <script type="text/javascript"> $('.input-daterange input').each(function() { $(this).datepicker('clearDates'); }); </script> </body> </html>
1 answers
solution1
1 ACCPTED 2020-03-25 20:20:35
you're missing a few a scripts and link tags of bootstrap datepicker
<!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <!-- Jquery --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous" ></script> <!-- Popper JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous" ></script> <!-- BootStrap 4 JS --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous" ></script> <!-- BootStrap 4 CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" /> <!-- BootStrap DatePicker JS --> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js" ></script> <!-- BootStrap DatePicker CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" /> <title>Hello, world!</title> </head> <body> <div class="input-group input-daterange"> <input type="text" class="form-control" value="2012-04-05" /> <div class="input-group-addon">to</div> <input type="text" class="form-control" value="2012-04-19" /> </div> <script type="text/javascript"> $(".input-daterange input").each(function() { $(this).datepicker("clearDates"); }); </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.
Related Question
bootstrap datepicker not working if it is cloned
defaultViewDate not working on Bootstrap datepicker
Bootstrap datepicker clone not working
Bootstrap Datepicker positioning not working
Update in Bootstrap datepicker is not working
bootstrap datepicker validation not working
Bootstrap datepicker in modal not working
Bootstrap datepicker maxdate not working
beforeShowMonth is not working in bootstrap datepicker
bootstrap datepicker not working in textarea
Related Tags