Question 2942 in Wordpress Question posted in
The official Wordpress documentation can be found here.

How to add datepicker in wordpress

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() {

to

$( document ).ready(function() {

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

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search