I am implementing calendar using JQuery. This is the pure html form I tested and it's working fine. But when I embed this in php, it's not working and the error shows up when I select inspect element is--> Object has no method datepicker.
PURE HTML:
<html lang="en">
<head>
<title>Date Thing</title>
<link href="jquery-ui-1.10.4.custom/css/start/jquery-ui-1.10.4.custom.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery-ui-1.10.4.custom/js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.js"></script>
<script type="text/javascript" src="jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$( "#datepickerID" ).datepicker({
changeYear: true,
})
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepickerID"></p>
</body>
</html>
PHP Code:
<?php
include('sess.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>PAGE TITLE</title>
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<link rel="stylesheet" type="text/css" href="bootstrap.theme.css">
<link href="jquery-ui-1.10.4.custom/css/start/jquery-ui-1.10.4.custom.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery-ui-1.10.4.custom/js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.js"></script>
<script type="text/javascript" src="jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$( "#datepickerID" ).datepicker({
changeYear: true,
})
});
</script>
</head>
<body>
<form name="form1" action="http://*****/******/redirect1.php" onsubmit="return validateForm();" method="get">
<p>Date: <input type="text" id="datepickerID"></p>
</form>
</body>
</html>
Can someone please let me know how to make that calendar work even in php code?
That generally means that you aren't loading the JQuery UI library. However, it looks like you are loading it twice. Perhaps try removing <script type="text/javascript" src="jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.js"></script>. It may be causing a conflict.
Please Try This in ypur PHP file .
<?php
include('sess.php');
?>
<html lang="en">
<head>
<title>PAGE TITLE</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.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>
<link rel="stylesheet" href="/resources/demos/style.css">
<script type="text/javascript">
$(document).ready(function () {
$( "#datepickerID" ).datepicker({
changeYear: true,
})
});
</script>
</head>
<body>
<form name="form1" action="" onsubmit="return validateForm();" method="get">
<p>Date: <input type="text" id="datepickerID"></p>
</form>
</body>
</html>
Related
I have a html file below, that I want to enter a date (eg. 25-07-1979). The input is readonly. I am wondering if I can include some javascript in the phpunit file that will make the field writable so I can enter a date.
Any help would be appreciated
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://jqueryui.com/datepicker/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker({
showOn: "button",
buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
buttonImageOnly: true
});
} );
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" readonly="readonly"></p>
</body>
</html>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I need some help with this datepickerthat i'll be using in my school project.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<body>
<p>Date: <input type="text" name='cout' id="datepicker"></p>
</body>
</html>
I want to create another datepicker since my project is a hotel reservation. Check in and Check out dates. But in check out this happens.
You could use a class instead of an id to define the date inputs :
i.e. :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$(".datepicker").datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" name='cout' class="datepicker" id="start_date"></p>
<p>Date: <input type="text" name='cout' class="datepicker" id="end_date"></p>
</body>
</html>
Hope it helps.
Try this :
<p>Date1: <input type="text" id="datepicker1"></p>
<p>Date2: <input type="text" id="datepicker2"></p>
<script>
$( function() {
$( "#datepicker1,#datepicker2" ).datepicker();
} );
</script>
I agree with Adrien Leber that a class could be easier once you have multiple datepickers. I think you need to use .each() though.
$(function() {
$(".datepicker").each(function(i, val) {
$(this).datepicker();
});
});
I want to fetch the json data from function and not file.
How can i change the autocomplete.php to a PHPfunction?
My code:
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#skills" ).autocomplete({
source: 'autocomplete.php'
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="skills">Skills: </label>
<input id="skills">
</div>
</body>
</html>
Add get or post parameter to your ajax, for example action=func1 and in your php file make a switch and in the case of action is "func1" just call func1().
I have two forms I named it main.php and sample.php.... For main.php I have a calendar/datepicker and its working. But then when I proceed to the next page or to the sample.php the calendar/datepicker its not displaying anymore... I just copy the codes from main.php to sample.php
Here's my code for main.php:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#datepickerfrom" ).datepicker();
});
$(function() {
$( "#datepickerto" ).datepicker();
});
</script>
From: <input type="text" id="datepickerfrom"name="from"> To: <input type="text" id="datepickerto"name="to">
And For sample.php:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function () {
$('.checkall').on('click', function () {
$(this).closest('fieldset').find(':checkbox').prop('checked', this.checked);
});
});
$(function() {
$( "#datepickerfrom" ).datepicker();
});
$(function() {
$( "#datepickerto" ).datepicker();
});
</script>
From: <input type="text" id="datepickerfrom"name="from"> To: <input type="text" id="datepickerto"name="to">
<?php
echo "<div><input type='checkbox' class='checkall'> Check all</div>";
?>
But in the sample.php I added a code for checkbox all where I also use a script...
Thanks/.
Thats because you are calling jquery two times in sample.php. Either remove
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
or
<script src="http://code.jquery.com/jquery-latest.js"></script>
P.S jquery-ui.js should come after jquery
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
You need those lines on sample.php, tried it, it worked.
My jQuery codes doesn't work, and I can't find why. The code seems to be ok.
My html code
<html>
<head>
<title>Learning Jquery</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<input type="file">
<br />
<input type="submit" disabled="disabled">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="myjquery.js"></script>
</body>
</html>
The javascript code
$(document).ready(function (){
$('input[type=file]').change(function(){
$(this).next().removeAttr('disabled');
});
});
If you want to enable your submit button, then try this javascript code:
$(document).ready(function (){
$('input[type=file]').change(function(){
$(this).closest('form').find('[type=submit]').prop('disabled', false);
});
});
.next() selects the immediately following sibling of the element you chose, which in your case would be a break (<br />). Try instead:
$(this).siblings('input[type=submit]').removeAttr('disabled');
jsFiddle example