Datepicker not working when using google api - javascript

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="jquery-ui.css">
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery-ui.js" type="text/javascript"></script>
<!--<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js" type="text/javascript"></script>-->
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
My date picker works if I comment out the ajax.google line. I thought the date picker is part of the jquery UI. what am I doing wrong or missing?

I obviously can't tell what's in your local jQuery files, but Google's copy of 1.8.18 works just fine:
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<div class="demo">
<input type="text" id="datepicker">
</div>
http://jsfiddle.net/eqd4x1rq/2/

Related

Missing instance data Datepicker while using iframe and jquery dialog

There are two versions of code. The first version is there is a main page containing an iframe and dialog <div>. The iframe will load the dia.html into the parent <div id="popdiv"> and fire it as a dialog. The dialog itself will initiate a Datepicker with elem.datepicker();.
The second version is just the ideal version for what I want which is an iframe fire the parent main page dialog and have a Datepicker running. But this approach cannot load the dia.html page into the <div id="popdiv"> which is not as handy.
My question:
Why is that when I want to select the element$('#myInput', window.parent.document) in the dia.html, I need to add window.parent.document after selector?
I try to figure it out by checking the html code in development tools. But I had no idea why it is required. How does query Dialog work?
How to make the elem.datepicker(); inside the dia.html work inside the dialog if I want to use the .load('dia.html') approach? What was the reason it didn't work?
main.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"
integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ=="
crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="http://code.jquery.com/ui/1.12.0/jquery-ui.js"
integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk=" crossorigin="anonymous"></script>
<script>
$(document).ready(function () {
});
</script>
</head>
<body>
<div id="popdiv"></div>
<iframe src="iframe1.html" height="800" width="800"></iframe>
</body>
</html>
iframe1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"
integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ=="
crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="http://code.jquery.com/ui/1.12.0/jquery-ui.js"
integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk=" crossorigin="anonymous"></script>
<script>
$(function () {
alert('opening iframe');
var parentDiv = $('#popdiv', window.parent.document);
parentDiv.load('dia.html');
parentDiv.dialog();
});
</script>
</head>
<body>
<p>iframe1</p>
</body>
</html>
dia.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"
integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ=="
crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="http://code.jquery.com/ui/1.12.0/jquery-ui.js"
integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk=" crossorigin="anonymous"></script>
<script>
$(function () {
var elem = $('#myInput', window.parent.document);
alert(elem.val());
elem.datepicker();
});
</script>
</head>
<body>
<p>Date: </p>
<input id="myInput" value="22" />
</body>
</html>
working version
change it to not load html
iframe1.html (working)
<script>
$(function () {
alert('opening iframe');
var parentDiv = $('#popdiv', window.parent.document);
//parentDiv.load('dia.html');
parentDiv.dialog();
});
</script>
main.html (working)
<div id="popdiv">
<p>Date: </p>
<input id="myInput" value="22" />
<script>$('#myInput').datepicker();</script>
</div>

Jquery UI can not work with 1.12version [duplicate]

This question already has answers here:
Loading Jquery UI before Jquery
(3 answers)
Closed 5 years ago.
I use jQuery UI in my project. The version of jquery-ui.min.css and jquery-ui.min.js are both v1.12. So I choose the latest version of jQuery jquery-3.2.1.min.js.
And I choose datepicker() to test. But it worked fail. When i cilick the input text, there is nothing appear.Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>jQueryUI</title>
<link rel="stylesheet" type="text/css" href="jsui/jquery-ui.min.css">
<script type="text/javascript" src="jsui/jquery-ui.min.js"></script>
<script type="text/javascript" src="jsui/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script>
$(function(){
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<div>
<input type="text" name="date" id="datepicker" />
</div>
</body>
</html>
And I had tried jQuery.min.js of 1.9 version, but it also worked fail. I don't know where is wrong? Who can help me ?
You have to load jQuery before jQuery-ui.
Try in this order.
<link rel="stylesheet" type="text/css" href="jsui/jquery-ui.min.css">
<script type="text/javascript" src="jsui/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="jsui/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
In the below snippet, I used CDNs.
$(function(){
$("#datepicker" ).datepicker();
});
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.2/jquery.form.min.js"></script>
<div>
<input type="text" name="date" id="datepicker" />
</div>

datepicker is not a function - error on homepage but works on another

I have been struggling with this error for a while now. Checked all my includes, compared to other pages and everything looks to be fine to me. I am honestly completely lost why this is happening.
I have a jQuery datepicker function on my homepage which doesn't work, it throws the error "Function not found". However, I have the exact same function on other sub-pages and no issues at all.
css
Those are my includes from the page that works:
<link rel="stylesheet" href="./index/bootstrap.min.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="./index/style.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
Scripts
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script src="./index/jquery.min.js.download"></script>
<script src="./index/bootstrap.min.js.download"></script>
And to compare, includes from the homepage
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script src="./index/jquery.min.js.download"></script>
<script src="./index/bootstrap.min.js.download"></script>
I also thought that maybe I wrote something wrong so I copied the code exactly from the working page and still no luck. The only difference is that I am using Google Charts API on the homepage, could this be throwing off the datepicker?
My datepicker function:
JavaScript
<script type="text/javascript">
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
And where it is used:
HTML
<label for="Audit Date">Audit Date:</label>
<input type="text" name="datepicker" id="datepicker" />
I dont know in which order you load the scripts, so here is the ay it worked for me:
<!doctype html>
<html lang="en">
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
$( function() {
$( "#datepicker" ).datepicker();
} );
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script src="./index/jquery.min.js.download"></script>
<script src="./index/bootstrap.min.js.download"></script>
<label for="Audit Date">Audit Date:</label>
<input type="text" name="datepicker" id="datepicker" >

Displaying Datepicker when i click the button

I would like to display the datepicker when i click on the button. I have tried but i couldn't make it work. I am using Materialize Css. I have tried to use input type text but i don't want it.
<div class="container">
<div class="row center">
<i>Date</i>
<button class="btn waves-effect waves-light datepicker" type="submit" name="action">PICK DATE</button>
</div>
</div>
jQuery:
$('.datepicker').pickadate({
selectMonths: true,
selectYears: 15
});
In order to show the datepicker from a button, you need to invoke the show option.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jDatapicker JQuery</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
function show_dp(){
$( "#datepicker" ).datepicker('show'); //Show on click of button
}
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
<button onclick="show_dp();">Show Datepicker</button>
</body>
</html>
Another option to make it so you don't need an input field:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jDatapicker JQuery</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
function toggle_dp() {
dp = $("#datepicker");
if (dp.attr('datepicker')) {
dp.datepicker('destroy');
dp.removeAttr('datepicker');
} else {
dp.datepicker();
dp.attr('datepicker', 1);
}
}
</script>
</head>
<body>
<div id="datepicker"></div>
<button id="button" onclick="toggle_dp();">Toggle Datepicker</button>
</body>
</html>
I think a better way is to only show the picker when the button is clicked and not when the input is clicked. This enables the user to edit the input manually as well.
My trick is to use a hidden input to connect the picker to:
<div class="input-field datepicker-prefix">
<i class="material-icons prefix">perm_contact_calendar</i>
<input type="hidden" class="datepicker" />
<input />
</div>
And then setup the click even to show the picker:
$('.datepicker-prefix .prefix').click(function () {
$(this).parent().find('.datepicker').datepicker('open');
});
See my complete solution for both date and time pickers
https://codepen.io/dnote/pen/jXQNpg?editors=1010#0
You can use this code created by me
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jDatapicker JQuery</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>

My Jquery datepicker NOT working

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
My code is not working .when i click my input box that time the onclick calender not appear.I think there may be use onclick() function .But i can not . Please help me. :(
Here is a basic example and look at the script needed include both jQuery and jQuery-ui. (source: http://www.tutorialspoint.com/jqueryui/jqueryui_datepicker.htm)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#datepicker-13" ).datepicker();
$( "#datepicker-13" ).datepicker("show");
});
</script>
</head>
<body>
<!-- HTML -->
<p>Enter Date: <input type="text" id="datepicker-13"></p>
</body>
</html>

Categories