Building a Date range picker

Support
#1

I am trying to build a smooth date range picker to be displayed across the site in a header section which I am designing. I am trying to include the JS but failing to understand how to make it work. Following is the site I am trying to follow instructions from :-

http://www.daterangepicker.com/

Please direct me how to achieve this.

#2

What i have done so far, used a child theme and enqueued the moment.js and daterangepicker.min.js files in child theme’s functions.php and added the link rel tag in child theme’s style.css, but so far nothing happens when clicking on the input I called “dates”

#3

Hello There,

Thanks for writing in!

How did you enqueue the JS files in your child theme’s functions.php file? Could you please share your code? By the way, I have check your style.css file and I found out that you have used the incorrect code in loading an external css file. Please edit your child theme’s style.css file and remove this:

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

You should be using this instead:

@import url("https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css");

To know how to properly enqueue JS and CSS file in WordPress, please check this out:

#4

Thanks I corrected this. Sharing the js enqueue code seperately.

#5

Please correct me if I am wrongly enqueueing the external js files as shown in the secure note before this reply.

I am still unable to get it to work on X Theme, while the same code works just fine using a plain html file.

#8

changed enqueueing code to include jquery, but no go, awaiting your precious help now.

#9

Hi,

I checked and can see that those scripts are being added which means that the code worked.

I then checked the page with the date and it seem to work too.

Please try to clear your browser cache and check again.

As this is all custom development, regretfully we wont be able to assist further. Custom development is outside the scope of our support. We are happy to provide advice and get you started in the right direction, but you would still be responsible for the implementation.

Thank you for understanding.

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.