How to add datepicker in wordpress-CodePudding

I am trying to add the datepicker in wordpress, but when I click on field it doesn't show the date picker.

Added in footer (without jquery file as I checked in source code jquery-3.5.1.min.js is already included):

jQuery is included as I can see this in source code of the page <script src='http://localhost/IEP_UAT/wp-content/themes/iep/scripts/jquery-3.5.1.min.js?ver=3.5.1' id='jquery-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" />

page-test.php:

<input type="text" name="daterange" value="01/01/2018 - 01/15/2018" />

<script>
jQuery( document ).ready(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>
<style>

I can see this in console: Uncaught ReferenceError: jQuery is not defined

When I change

jQuery( document ).ready(function() {

$( document ).ready(function() {

Then I can see this error in console: Uncaught ReferenceError: $ is not defined

CodePudding user response：

I've figured out answer my self.

jQuery script is added in the page file which loads before the jQuery get included. So I moved script tag code at the bottom of footer page. Problem fixed.

CodePudding user response：

To use Jquery and daterangepicker you can make sure that the libraries of jquery and daterangepicker are loaded first

CSS:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/1.0.10/datepicker.min.css" integrity="sha512-YdYyWQf8AS4WSB0WWdc3FbQ3Ypdm0QCWD2k4hgfqbQbRCJBEgX0iAegkl2S1Evma5ImaVXLBeUkIlP6hQ1eYKQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

JS:

<script src='http://localhost/IEP_UAT/wp-content/themes/iep/scripts/jquery-3.5.1.min.js?ver=3.5.1' id='jquery-js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/1.0.10/datepicker.min.js" integrity="sha512-RCgrAvvoLpP7KVgTkTctrUdv7C6t7Un3p1iaoPr1  3pybCyCsCZZN7QEHMZTcJTmcJ7jzexTO eFpHk4OCFAg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

After that create javascript code. To use the $ symbol, you can add $ to the function argument like this

<script>
jQuery( document ).ready(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>