How to add datepicker in wordpress - javascript

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


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.


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>

Related

I want to create a button along my prepend list item

I recently started JQuery and I need to create a list using the datepicker JQuery function. The problem starts with my prepend because I have to prepend the date I get from the datepicker, the event AND a new button to ERASE whatever's in that line (so the button must be prepended along the list item). I'm having some trouble with this part.
This is the code I have:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Display month & year menus</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="css.css">
<script>
$(function() {
$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: true
});
});
$(document).on('click', '#bta', '#apagar', function () {
if ($('#datepicker').val() != '' && $('#evento').val() != '' ) {
$('#caixa').prepend('<p>' + $('#datepicker').val() + $('#evento').val() + $('<input type="button" id="apagar" value="apagar" />') + '</p>');
$('input').val('');
}
});
</script>
</head>
<body>
<div id="box">
Lista de Tarefas:
<br><br>
Date: <input type="text" id="datepicker">
Event: <input type="text" id="evento"> <button id="bta" class="bta">+</button>
<div id="caixa"> </div>
</body>
</div>
</html>
I'm pretty sure this is probably very simple but I've only now started looking around and everything I try to search is either overly complex or doesn't resolve my issue... of course my inability to implement the solutions I find might be very well a problem too.
This is to help visualize my problem

jQuery.prepend takes argument that are htmlString or Element or Array or jQuery elements. You choose a htmlString, but are adding a jQuery object to this string. This will obviously not work.
What do we actually want? Well, we want to create a <p> tag, then append the datepicker value, the event value and then the button.
var $p = $("<p></p>");
$p.append($('#datepicker').val(), $('#evento').val(), $('<input type="button" id="apagar" value="apagar" />'));
$('#caixa').prepend($p);
Alternatively, skip the step where you turn a string into a jquery object, back into a string.
$('#caixa').prepend('<p>' + $('#datepicker').val() + $('#evento').val() + '<input type="button" id="apagar" value="apagar" /></p>');

Why is that Jquery for datepicker is not closing onclick, outside of it?

I use datepicker Jquery to select date and below is my code:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
jQuery(function() {
jQuery( "#datepicker" ).datepicker({dateFormat: "yy-mm-dd"});
jQuery("#datepicker").blur(function(e) {
jQuery(this).datepicker("hide");
});
});
</script>
It works when I use .blur function. But, I am not able to change the month. When I change the month, it hides. How can I resolve this problem ?

Drupal Bootstrap Scroll Conflict with Readmore Plugin

When I call a window resize and click the readmore link that is provided I get this message Additionally, the close link appears to get appear stuck when the characters are at a "in the goldie locks" line height area:
Uncaught TypeError: undefined is not a function bootstrap.js?n4eadf:121
(anonymous function) bootstrap.js?n4eadf:121
jQuery.event.dispatch jquery.js:5095
elemData.handle jquery.js:4766
This is my actual function:
jQuery(document).ready(function($) {
jQuery(window).resize(function($){
jQuery('.subcontainer').readmore({
speed: 75,
maxHeight: 129
});
});
});
Here is the reference error:
$scrollableElement.once('bootstrap-anchors', function () {
$scrollableElement.on('click.bootstrap-anchors', 'a[href*="#"]:not([data-toggle], [data-target])', function(e) {
this.scrollTo(e);
});
});
And Finally my called js:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
<script>window.jQuery || document.write("<script src='/sites/all/modules/jquery_update/replace/jquery/1.10/jquery.js'>\x3C/script>")</script>
<script src="http://tsunami.crabdance.com/misc/jquery.once.js?v=1.2"></script>
<script src="http://tsunami.crabdance.com/misc/drupal.js?n4eadf"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js"></script>
<script>window.jQuery.ui || document.write("<script src='/sites/all/modules/jquery_update/replace/ui/ui/jquery-ui.js'>\x3C/script>")</script>
<script src="http://tsunami.crabdance.com/sites/all/modules/jquery_update/replace/misc/1.9/jquery.ba-bbq.js?v=1.2.1"></script>
<script src="http://tsunami.crabdance.com/sites/all/modules/jquery_update/replace/misc/1.9/overlay-parent.js?v=1.0"></script>
<script src="http://tsunami.crabdance.com/modules/contextual/contextual.js?v=1.0"></script>
<script src="http://tsunami.crabdance.com/sites/all/modules/jquery_update/replace/ui/external/jquery.cookie.js?v=67fb34f6a866c40d0570"></script>
<script src="http://tsunami.crabdance.com/sites/all/modules/gss/scripts/autocomplete.js?n4eadf"></script>
<script src="http://tsunami.crabdance.com/modules/toolbar/toolbar.js?n4eadf"></script>
<script src="http://tsunami.crabdance.com/sites/all/themes/bootstrap_tsunami/bootstrap/js/affix.js?n4eadf"></script>
<script src="http://tsunami.crabdance.com/sites/all/themes/bootstrap_tsunami/bootstrap/js/alert.js?n4eadf"></script>
<script src="http://tsunami.crabdance.com/sites/all/themes/bootstrap_tsunami/bootstrap/js/button.js?n4eadf"></script>
<script src="http://tsunami.crabdance.com/sites/all/themes/bootstrap_tsunami/bootstrap/js/carousel.js?n4eadf"></script>
<script src="http://tsunami.crabdance.com/sites/all/themes/bootstrap_tsunami/bootstrap/js/collapse.js?n4eadf"></script>
<script src="http://tsunami.crabdance.com/sites/all/themes/bootstrap_tsunami/bootstrap/js/dropdown.js?n4eadf"></script>
<script src="http://tsunami.crabdance.com/sites/all/themes/bootstrap_tsunami/bootstrap/js/modal.js?n4eadf"></script>
<script src="http://tsunami.crabdance.com/sites/all/themes/bootstrap_tsunami/bootstrap/js/tooltip.js?n4eadf"></script>
<script src="http://tsunami.crabdance.com/sites/all/themes/bootstrap_tsunami/bootstrap/js/popover.js?n4eadf"></script>
<script src="http://tsunami.crabdance.com/sites/all/themes/bootstrap_tsunami/bootstrap/js/tab.js?n4eadf"></script>
<script src="http://tsunami.crabdance.com/sites/all/themes/bootstrap_tsunami/bootstrap/js/readmore.js?n4eadf"></script>
<script src="http://tsunami.crabdance.com/sites/all/themes/bootstrap_tsunami/bootstrap/js/transition.js?n4eadf"></script>
<script>jQuery.extend(Drupal.settings, {"basePath":"\/","pathPrefix":"","ajaxPageState":{"theme":"bootstrap_tsunami","theme_token":"zeb-lBs7FuYRH5wwgGZbBZ5IpDYYfIqZkbQjisS0Auk","js":{"sites\/all\/themes\/bootstrap\/js\/bootstrap.js":1,"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.10.2\/jquery.js":1,"0":1,"misc\/jquery.once.js":1,"misc\/drupal.js":1,"https:\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/1.10.2\/jquery-ui.js":1,"1":1,"sites\/all\/modules\/jquery_update\/replace\/misc\/1.9\/jquery.ba-bbq.js":1,"sites\/all\/modules\/jquery_update\/replace\/misc\/1.9\/overlay-parent.js":1,"modules\/contextual\/contextual.js":1,"sites\/all\/modules\/jquery_update\/replace\/ui\/external\/jquery.cookie.js":1,"sites\/all\/modules\/gss\/scripts\/autocomplete.js":1,"modules\/toolbar\/toolbar.js":1,"sites\/all\/themes\/bootstrap_tsunami\/bootstrap\/js\/affix.js":1,"sites\/all\/themes\/bootstrap_tsunami\/bootstrap\/js\/alert.js":1,"sites\/all\/themes\/bootstrap_tsunami\/bootstrap\/js\/button.js":1,"sites\/all\/themes\/bootstrap_tsunami\/bootstrap\/js\/carousel.js":1,"sites\/all\/themes\/bootstrap_tsunami\/bootstrap\/js\/collapse.js":1,"sites\/all\/themes\/bootstrap_tsunami\/bootstrap\/js\/dropdown.js":1,"sites\/all\/themes\/bootstrap_tsunami\/bootstrap\/js\/modal.js":1,"sites\/all\/themes\/bootstrap_tsunami\/bootstrap\/js\/tooltip.js":1,"sites\/all\/themes\/bootstrap_tsunami\/bootstrap\/js\/popover.js":1,"sites\/all\/themes\/bootstrap_tsunami\/bootstrap\/js\/tab.js":1,"sites\/all\/themes\/bootstrap_tsunami\/bootstrap\/js\/readmore.js":1,"sites\/all\/themes\/bootstrap_tsunami\/bootstrap\/js\/transition.js":1},"css":{"modules\/system\/system.base.css":1,"misc\/ui\/jquery.ui.core.css":1,"misc\/ui\/jquery.ui.theme.css":1,"misc\/ui\/jquery.ui.menu.css":1,"misc\/ui\/jquery.ui.autocomplete.css":1,"modules\/overlay\/overlay-parent.css":1,"modules\/contextual\/contextual.css":1,"modules\/field\/theme\/field.css":1,"sites\/all\/modules\/footer_sitemap\/footer_sitemap.css":1,"modules\/shortcut\/shortcut.css":1,"modules\/toolbar\/toolbar.css":1,"sites\/all\/themes\/bootstrap_tsunami\/bootstrap\/css\/bootstrap.min.css":1,"sites\/all\/themes\/bootstrap_tsunami\/css\/style.css":1}},"gss":{"key":""},"overlay":{"paths":{"admin":"node\/*\/edit\nnode\/*\/delete\nnode\/*\/revisions\nnode\/*\/revisions\/*\/revert\nnode\/*\/revisions\/*\/delete\nnode\/add\nnode\/add\/*\noverlay\/dismiss-message\nuser\/*\/shortcuts\nadmin\nadmin\/*\nbatch\ntaxonomy\/term\/*\/edit\nuser\/*\/cancel\nuser\/*\/edit\nuser\/*\/edit\/*","non_admin":"admin\/structure\/block\/demo\/*\nadmin\/reports\/status\/php"},"pathPrefixes":[],"ajaxCallback":"overlay-ajax"},"tableHeaderOffset":"Drupal.toolbar.height","bootstrap":{"anchorsFix":1,"anchorsSmoothScrolling":1,"popoverEnabled":1,"popoverOptions":{"animation":1,"html":0,"placement":"right","selector":"","trigger":"click hover","title":"","content":"","delay":0,"container":"body"},"tooltipEnabled":1,"tooltipOptions":{"animation":1,"html":0,"placement":"auto left","selector":"","trigger":"hover focus","delay":0,"container":"body"}}});</script>
</head>

I got the similar error when integrating with flexslider plugin. Try to go to your Bootstrap Settings (yourdomain/admin/appearance/settings/yourtheme), unchecked the "Fix anchor positions". I turn that off and the error disappeared. See if it works for you.
Javascript (Tab) > Anchors > Fix anchor positions

keith-wood countdown isn't counting down...in any browser

I'm using an admittedly slightly older version of keith wood's countdown, and it's loading the correct date and time just fine, but the seconds aren't ticking down. I've inspected the js with console, and no errors are coming up. Can any tell me what's amiss?
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="/js/jquery.countdown.js"></script>
<script type="text/javascript" src="/js/jquery.plugin.js"></script>
</head>
<div id="form">
<div id="topbox">
<div class="countdown"></div>
</div>
</div>
$(document).ready(function() {
// start instance of countdown
$('.countdown').countdown({until: new Date(2014, 9-1, 21, 10), layout:
'<ul class="countdown-tabs"><li><a>{dn} <span>{dl}</span></a></li>' +
'<li><a>{hn} <span>{hl}</span></a></li>' +
'<li><a>{mn} <span>{ml}</span></a></li>' +
'<li class="last-child"><a>{sn} <span>{sl}</span></a></li></ul>'});
$('.bg-switcher input').change(function () {
// set background photo to value of photo-switcher
window.location.hash = $(this).attr('id');
var photo = "url('/images/countdown_" + $(this).attr('id') + ".jpg')";
$('#canvas').css('background-image', photo);
});
});
I've also set it up on jfiddle, here: http://jsfiddle.net/Abk99/2/

I included this countdown script from a cdn and it's working.
//cdnjs.cloudflare.com/ajax/libs/jquery-countdown/1.6.3/jquery.countdown.min.js
http://jsfiddle.net/Abk99/1/

Multiple script tags not working in my page

Ok, I'm building a website for a friend, I'm currently using jquery-1.4.3.min.js, corners.js, equalcols.js, and a pre-load image script in the head. Everything works great.
Problem is, I now need FancyBox (LightBox alternative) for a page and it won't seem to work! I know it's because something is conflicting with another but I have no idea what. Is it the order in the head? Or something else? Have tried LightBox and that doesn't work either.
It either doesn't work and stops the EqualCols.js from working, or everything else works EXCEPT the FancyBox for the mini-image gallery that is needed.
The head code is as below: (without FancyBox in there)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<link rel="stylesheet" href="styles.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<!-- PRELOAD MENU IMAGES BEGINNING -->
<script>
var myimages=new Array()
function preloadimages(){
for (i=0;i<preloadimages.arguments.length ;
i + myimages [ i ] =new Image ( myimages [ i ]
src=preloadimages.arguments[i] } Enter path of images to be preloaded
inside parenthesis. Extend list as desired. preloadimages ( images /
home-h.png " images / about-h.png " images / services-rates-h.png "
images / past-work-h.png " images / contact-h.png " images /
shop-specials-h.png " images / free-quote-h.png " images /
book-now-h.png ")
</script>
<!-- PRELOAD MENU IMAGES END -->
<!-- stop curvery corners error in IE -->
<script type="text/javascript" src="js/corners.js"></script>
<script type="text/javascript">
var curvyCornersVerbose = false;
</script>
<!-- stop curvery corners error in IE -->
<!-- EQUAL COLS START -->
<script src="js/equalcols.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#left-col,#right-col').equalCols();
});
</script>
<!-- EQUAL COLS END -->
</head>
Is anyone able to tell me where I'd need to put the FancyBox coding for everything to work? Or what else I can do to get it to work? What are the rules? I've researched on Google and can't seem to find the answer I'm after.
The FancyBox code I need to implement is:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
Do I need the top line there if I'm using this already?:
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
Any help much appreciated.

replace:
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
with:
<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
Fancybox code:
$(document).ready(function() {
$('#single_image').fancybox();
});

below code is working sample - the fancybox iframe version.
make sure that you add anchor tag in your html/jsp
<!-- The popup iframe . The href value will be updated dynamically -->
<a class="iframe" id="iframe" href="/YourApp/imagePopup.do"></a>
the include block is as follows
<script type="text/javascript" src="/js/jquery/fancybox/jquery.easing-1.4.pack.js"></script>
<script type="text/javascript" src="/js/jquery/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
/**
jquery ready function
*/
$(document).ready(function(){
// popup for showing
$("a.iframe").fancybox({
'autoDimensions':false,
'width' : 770,
'height' : 'auto', // height is controlled using jquery.fancybox-1.3.4.css line 79
'centerOnScroll' : true,
'scrolling':'auto',
// 'autoScale': true,
'hideOnOverlayClick' : false,
'enableEscapeButton' :true,
'hideOnContentClick': false,
'type':'iframe'
,'onStart' :function(){$.fancybox.showActivity();}
,'onClosed' :function(){ }
});
}); // end ready

Categories