I'm using jquery-ui-timepicker-addon not working in codeigniter 2.1.4, in which the followings are called to display the date/time picker.
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>
But it is not showing the datetime picker controller in my view.
you missed css file
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" language="javascript">
jQuery(function(){
jQuery('#date').datepicker({
dateFormat: 'mm,dd,yy'});
});
</script>
<input type="text" name="date" id="date"/>
Related
$('#datetimepicker1').datetimepicker();
I am using this code, and have defined all the css and js. Even though this error comes..
What am i doing wrong ?
First of all you should have the following links to the jquery-ui , jquery-css and the jquery-api :
<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>
Your HTML could be :
<p>Date: <input type="text" id="datepicker"></p>
Your script should be if you are calling the datepicker() function via id :
<script>
$(function() {
$("#datepicker").datepicker();
});
</script>
OR if you want to invoke it via the class name , it should be :
<script>
$(function() {
$(".yourClassName").datepicker();
});
</script>
I'm working in twitter Bootstrap with PHP. I make a search form and apply autocomplete to search field but its not working, though its working fine when I test it outside the my working directory.
Here are my jquery files:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.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>
<script type="text/javascript" src="assets/js/jquery.autocomplete.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#term").autocomplete({
source:'action.php',
minLength:1
});
});
</script>
<script src="assets/js/bootstrap-datepicker.js"></script>
<script type="text/javascript">
$("#datepicker").datepicker();
</script>
<script type="text/javascript">
$("#datepicker1").datepicker();
</script>
<script type="text/javascript">
$("#datepicker2").datepicker();
</script>
<script type="text/javascript">
$("#datepicker3").datepicker();
</script>
<script type="text/javascript">
$("#datepicker4").datepicker();
</script>
and here is my search field in the form:
<input type="text" class="span3 search-query" id="term" name="term" placeholder="search by customer-name, company-name and location" autocomplete="off">
Here is the css for autocomplete:
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />
Here is my action.php file:
<?php
include("config.php");
$term=$_GET["term"];
$query=mysql_query("SELECT * FROM customers where name like '%".$term."%'");
$json=array();
while($customer=mysql_fetch_array($query)){
$json[]=array(
'value'=> $customer["name"],
'label'=>$customer["name"],
);
}
echo json_encode($json);
?>
On Google chrome press F12 before loading the page and see in the 'Network' tab if the jquery.autocomplete.js is loading. If its not, Please use the correct relative path for it.
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.
hi im trying to integrate a jquery datepicker to my codeigniter project.. the problem is that i cant get it to work .. my source code came from http://view.jquery.com/tags/ui/latest/demos/functional/#ui.datepicker
ok heres my code:
view:
<srcipt>
$("#formatted").datepicker({
dateFormat: $.datepicker.ISO_8601,
showOn: "both",
buttonImage: "templates/images/calendar.gif",
buttonImageOnly: true
});
</script>
<form action="add" method="post" class="form label-inline uniform" />
<input type="text" size="30" value="" id="formatted"/>
<input type="submit" class="btn btn-grey" value="Add User"/>
</form>
<script src="/assets/js/jquery/jquery-1.5.2.min.js"></script>
EDIT
i already added all the js sources but its still not working
<script src="/assets/js/jquery/jquery-1.5.2.min.js"></script>
<script src="/assets/js/jquery/jquery-ui-1.8.12.custom.min.js"></script>
<script src="/assets/js/misc/excanvas.min.js"></script>
<script src="/assets/js/jquery/facebox.js"></script>
<script src="/assets/js/jquery/jquery.visualize.js"></script>
<script src="/assets/js/jquery/jquery.dataTables.min.js"></script>
<script src="/assets/js/jquery/jquery.tablesorter.min.js"></script>
<script src="/assets/js/jquery/jquery.uniform.min.js"></script>
<script src="/assets/js/jquery/jquery.placeholder.min.js"></script>
<script src="/assets/js/widgets.js"></script>
<script src="/assets/js/dashboard.js"></script>
EDIT
created a sample view page for datepicker.. still not working even the link for the image is not working.
<html>
<head>
<script src="/assets/js/jquery/jquery-1.5.2.min.js"></script>
<script src="/assets/js/jquery/jquery-ui-1.8.12.custom.min.js"></script>
<script src="/assets/js/misc/excanvas.min.js"></script>
<script src="/assets/js/jquery/facebox.js"></script>
<script src="/assets/js/jquery/jquery.visualize.js"></script>
<script src="/assets/js/jquery/jquery.dataTables.min.js"></script>
<script src="/assets/js/jquery/jquery.tablesorter.min.js"></script>
<script src="/assets/js/jquery/jquery.uniform.min.js"></script>
<script src="/assets/js/jquery/jquery.placeholder.min.js"></script>
<script src="/assets/js/widgets.js"></script>
<script src="/assets/js/dashboard.js"></script>
</head>
<body>
<script>
$("#formatted").datepicker({
dateFormat: $.datepicker.ISO_8601,
showOn: "both",
buttonImage: "http://pgoadmin.com/assets/images/calendar.gif",
buttonImageOnly: true
});
</script>
<form>
<input type="text" size="30" value="" id="formatted"/>
</form>
</body>
</html>
You need to load in jQuery UI to use the date picker
https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.js
Dont forget the images and CSS as well:
http://jqueryui.com/download
You need to include jquery before you start using it. Try moving the JS code below the jquery tag.
And as Wes says, you need to include jquery UI datepicker component as well.
Also, and this maybe a typo, your tag says "sricpt" instead of "script".
and don't forget to add base_url(); to your js paths
e.g.
<script src="<?php echo base_url(); ?>assets/js/dashboard.js"></script>
I'm trying to implement a timepickr element into my website, however it seems that the element will work ok in one section of a page, but not in another.
I reference the appropriate css files…
<link rel="Stylesheet" media="screen" href="ui.timepickr.css" />
<link rel="stylesheet" media="screen" href="jquery.timepickr.css" type="text/css" />
As well as the jQuery files…
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.ui.all.js"></script>
<script type="text/javascript" src="js/jquery.timepickr.js"></script>
The route of these files are correct. I have the jQuery function written in the head of the page…
<script type="text/javascript">
$(function(){
$('#timestart').timepickr();
});
</script>
And then, in the main body of the page, I create the object, referencing the timepickr function…
<input id='timestart' type='text' value='09:00' />
It works fine. However, when I use this exact same code later on in the same page, the timepickr functionality does not kick in.
The area where I want the functionality to work is in another DIV section, the contents of which come from an Ajax call made in the page.
This is the only jQuery item I have in the page.
The page itelf only has this one timepickr reference.
Id's need to be unique. when you reference
$('#timestart').timepickr();
it looks at the id of the element this is denoted by use of the '#' Therefore if you use the same id more than 1x per page, it should take the first one, but this is invalid markup if you use the same id for more than 1 element. to fix it
$('#timestart1').timepickr();
$('#timestart2').timepickr();
<input id='timestart1' type='text' value='09:00' />
<input id='timestart2' type='text' value='09:00' />
an id is an unique identifier, so it have to be unique
you could use the class attribute instead
<script type="text/javascript">
$(function(){
$('.timestart')each(function(){
$(this).timepickr();
})
});
</script>
<input class='timestart' type='text' value='09:00' />
i've testet it (see code below) and it works. it seams the ajax cause the problem
<html>
<head>
<link title="theme" type="text/css" href="http://ui.jquery.com/applications/themeroller/css/jquery-ui-base.css.php?ctl=themeroller&=" media="screen" rel="Stylesheet" id="themeCSS" />
<link rel="Stylesheet" media="screen" href="css/jquery.utils.css" />
<link rel="Stylesheet" media="screen" href="css/ui.timepickr.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js" type="text/javascript"></script>
<script src="jquery.utils.js" type="text/javascript"></script>
<script src="ui.timepickr.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".timepickr").each(function(){
$(this).timepickr();
})
});
</script>
</head>
<body>
<input class='timepickr' type='text' value='09:00' />
<input class='timepickr' type='text' value='12:00' />
<input class='timepickr' type='text' value='07:00' />
</body>
</html>