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>
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 ?
I have a javascript and css style as below
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#startDate').datepicker({ dateFormat: 'yy-mm-dd' });
$('#startDate').datepicker();
});
</script>
<script>
$(function() {
$( "#datepicker" ).datepicker({
showOn: "button",
buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
buttonImageOnly: true
});
});
</script>
<script type="text/javascript">
$(function () {
$('#endDate').datepicker({ dateFormat: 'yy-mm-dd' });
$('#endDate').datepicker();
});
</script>
<script type="text/javascript">
$(function () {
$('#followUpDate').datepicker({ dateFormat: 'yy-mm-dd' });
$('#followUpDate').datepicker();
});
</script>
<style>
.ui-datepicker th { background-color: #CCCCFF; }
</style>
<style type="text/css">
.search_textbx
{
background:url(calendar.jpg) right no-repeat;
background-color:white;
height:13px;
color:black;
}
</style>
Now my question is how to create an external javascript file and css file in eclipse so that i can use that in a jsp page especially in input type = "text".
<td style="padding-left:25px;">
<input type="text" id="startDate" name="startDate" class="search_textbx" size="15" readonly="readonly"/>
</td>
Now i need an external javascript file and css file and i want to use those files in the "input" tag.
Exactly the same way you are loading jquery and jquery-ui. Create a text file, save it as .css and as .js respectively, use a link and script tag to get them in your page.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link
ps: you don't have to use a new script tag for each function, you can just merge your three literal script into one <script> tag and one $(function(){});
for good measure, place css files in your head tag and script tags as low in the body tag as you can, unless you need to execute the script earlier.
I have problem with 2 sliders on one page, because first use jQuery 1.9.1 and second 1.5.1, I found how to fix this problem, but it doesn't want to work.
I do it right that:
<script type="text/javascript" src="jquery/js/jquery-1.5.1.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script>var $j = jQuery.noConflict(true);</script>
<script>
$(document).ready(function(){
console.log($().jquery); // This prints v1.5.1
console.log($j().jquery); // This prints v1.9.1
});
</script>
<script src="js/jquery.slides.min.js" type="text/javascript"></script>
<script type="text/javascript">
$j(function() {
$j('#slides').slidesjs({
width: 950,
height: 364,
navigation: {
effect: "fade",
active: false
},
pagination: {
active: false,
effect: "fade"
},
effect: {
fade: {
speed: 1500
}
},
play: {
effect: "fade",
auto: true,
pauseOnHover: true
}
});
});
</script>
<link type="text/css" href="jquery/css/blitzer/jquery-ui-1.8.11.custom.css" rel="stylesheet" />
<script type="text/javascript" src="jquery/js/jquery-ui-1.8.11.custom.min.js"></script>
<script type="text/javascript" src="scripts/jquery.nivo.slider.pack.js"></script>
<div id="main">
<script type="text/javascript">
$(function() {
$( "#dateFrom" ).datepicker({ dateFormat: 'dd.mm.yy',minDate: +0, maxDate: '+8M +10D',monthNames: ['Styczeń','Luty','Marzec','Kwiecień','Maj','Czerwiec','Lipiec','Sierpień','Wrzesień','Październik','Listopad','Grudzień'],dayNamesMin: [ 'Nd','Po', 'Wt', 'Śr', 'Cz', 'Pt', 'So']});
});
$(function() {
$( "#dateToo" ).datepicker({ dateFormat: 'dd.mm.yy',minDate: +1, maxDate: '+8M +10D',monthNames: ['Styczeń','Luty','Marzec','Kwiecień','Maj','Czerwiec','Lipiec','Sierpień','Wrzesień','Październik','Listopad','Grudzień'],dayNamesMin: [ 'Nd','Po', 'Wt', 'Śr', 'Cz', 'Pt', 'So']});
});
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
Anyone knows why it doesn't work?
When I tried alert with version of jQuery it shows property, but when I use it in sliders, it doesn't
Use <script>jQuery.noConflict();</script> above one of your jquery and replace the $ with jQuery
Like
<script type="text/javascript" src="jquery/js/jquery-1.5.1.min.js"></script>
<script>jQuery.noConflict();</script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script> //Now replace this jquery's $ with jQuery
Hi Friends I am new with intel XDK.
My Code :-
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<script>
$(function() {
$( "#txt_date" ).datepicker({
changeMonth: true,
changeYear: true
});
});
</script>
</head>
<body>
<input type="text" name="text-date" id="txt_date" value="" readonly="true" >
</body>
</html>
I Tried also read only property of input text but I could not solved My problem.
Problem :
Here My problem is that when I click on input text then I get fine Jquery Datepicker.But with Datepicker I also get Keyboard on my mobile device.So if somebody have solution of this problem so please help me.
Thanks in Advance!!
I think you should go this way:
$(function() {
$("#txt_date").keypress(function(event) {
event.preventDefault();
});
$( "#txt_date" ).datepicker({
changeMonth: true,
changeYear: true
});
});