The below code works seperately in different php page. But when combining both in one page, nothing works. In firebug, the error says,
TypeError: $(...).datepicker is not a function
$("#test1").datepicker({
CODE FOR DATEPICKER
<link rel="stylesheet" href="css/date_pick/jquery-ui.css">
<script src="css/date_pick/jquery-1.10.2.js"></script>
<script src="css/date_pick/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#test1").datepicker({
changeMonth:true,
changeYear:true,
yearRange:"-35:+0",
dateFormat:"dd/mm/yy"
});
});
</script>
<input type="text" name="test1" id="test1" />
CODE FOR AUTOCOMPLETE
<link rel="stylesheet" href="lib/js/jquery.autocomplete.css">
<script src="bootstrap/js/jquery.js"></script>
<script src="lib/js/jquery.autocomplete.js "></script>
Maybe because you have included 2 times the jQuery library.
<script src="css/date_pick/jquery-1.10.2.js"></script>
<script src="bootstrap/js/jquery.js"></script>
The jQuery library should be included once.
can you try like
<link rel="stylesheet" href="css/date_pick/jquery-ui.css">
<link rel="stylesheet" href="lib/js/jquery.autocomplete.css">
<script src="css/date_pick/jquery-1.10.2.js"></script>
<script src="css/date_pick/jquery-ui.js"></script>
<script src="lib/js/jquery.autocomplete.js "></script>
<script type="text/javascript">
$(document).ready(function(){
$("#test1").datepicker({
changeMonth:true,
changeYear:true,
yearRange:"-35:+0",
dateFormat:"dd/mm/yy"
});
});
</script>
<input type="text" name="test1" id="test1" />
but I think it would be better to use a packed version of jquery UI so that you can call one file for each jquery UI component.
Also if you are getting $.browser is undefined error, I guess one of the UI libraries is outdated because it's calling a function which is deprecated in jquery v1.10.2
Related
I have trouble including Jquery in my HTML page. I'm trying to display a calendar clicking on a button, but the calendar is not showing up. The following error showed up : $(..)Datapicker is not a function. I've looked up on internet, and people said it was because of multiple including. But I'm pretty sure that I've only included Jquery once, because when I remove the Jquery include, it says that I do not include it. Here is the header:
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.0.0.js"></script>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
<script src="https://use.fontawesome.com/6cd7c64e2b.js"></script>
<link rel="stylesheet" type="text/css" href="/static/app/css/control/style.css" />
<link rel="stylesheet" type="text/css" href="/static/app/css/control/ir-button.css" />
<link rel="stylesheet" type="text/css" href="/static/app/css/recorder/style.css"/>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script type="text/javascript" src="/static/app/js/recorder/timer.js"></script>
Note that the js script is in the header because I wanted to test it as it was not working in an external file!
Thanks in advance!
You need to include jQuery (core) too. Actually you only added jQuery UI, witch is an extension for jQuery itself.
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
And are you sure using such an old version of jQuery UI? Current version of jQuery UI is 1.12.0, working with all jQuery versions since 1.7.
Try to fix it by following order and version of jquery files. Check below code snippet.
$( function() {
$( "#datepicker" ).datepicker();
} );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css" rel="stylesheet"/>
<input type=text id="datepicker"/>
while i am trying to use date function of bootstrap i am getting this error ReferenceError: $ is not defined
my html code is like
<div class='input-group date' id='datetimepicker1'>
<label><b>Start Date</b>
<input type='text' name="start_date" id="start_date" class="form-control" required />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
i used several link in the bottom of html
<!-- basic scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!--For Date Time-->
<script src="js/jquery-1.7.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
i used this datepicker and datetimepicker several time.. Sometimes they work sometime they don't...is there is any way to use date by not getting any trouble. my date picker function is like this
<script type="text/javascript">
/*$(function () {
$('#start_date').datepicker({
dateFormat: 'yy-mm-dd'
});
$('#end_date').datepicker({
dateFormat: 'yy-mm-dd'
});
});*/
$(function () {
$('#datetimepicker1').datetimepicker({
format: 'YYYY-MM-DD'
});
$('#datetimepicker2').datetimepicker({
format: 'YYYY-MM-DD'
});
});
</script>
I know this a little old. I realized after having this same issue, the reason it doesn't work is because there is an order in which things have to be loaded.
Jquery
Bootstrap
Renderbody()
Moment.js
datetimepicker js
Also ensure that you only have 1 jquery version installed as well.
You are using three versions of jQuery, and the latter cleared out the plugins:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/jquery-1.7.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap-datepicker.js"></script> <!-- this is attached to 1.7.1 -->
<script src="//code.jquery.com/jquery-1.10.2.js"></script> <!-- remove this -->
Please do not include different versions of jQuery, and if you are planning to do so, with a valid reason, make sure they don't conflict with each other, by giving a .noConflict. It is definitely sure that there's a .noConflict at the end.
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
i guess this is my solution...tnx everyone
I'm using Bootstrap 3 DateTimePicker but having some minor issues.
Basically, on the dp.show event, how do I get the source control? As far as I can tell, there is no parameter sent with the event, so I'm having a hard time figuring out which control actually showed.
(I have many pickers in my application)
Standard JQuery would tell me I could use e.Target, but there is no e sent with the event :(
How do I handle this?
You can attach a handler to your datepicker collection
$('.datepicker').on('dp.show', function() {
// this here will refer to the currently showing widget
console.log(this);
});
This is the standard bootstrap way of dealing with events.
EDIT: if you read the source code, the event is bound to the element with which the datepicker is initialized: https://github.com/Eonasdan/bootstrap-datetimepicker/blob/master/src/js/bootstrap-datetimepicker.js#L451
you can use events like below
<script src="//code.jquery.com/jquery-2.1.3.js" type="text/javascript"></script>
<link href="/css/result-light.css" type="text/css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js" type="text/javascript"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<link href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" type="text/css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js" type="text/javascript"></script>
<script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(function() {
$('#datetimepicker6').datetimepicker();
$("#datetimepicker6").on("dp.show", function(e) {
console.log(e);// e is event and use console to explore other options
});
}); //]]>
</script>
</head>
<body>
<div class="input-group ">
<input type="text" class="form-control" id="datetimepicker6">
</div>
</body>
</html>
Consider the following html head javacsript and css referecnes:
<link rel="stylesheet" href="/css/stylesheet.css" type="text/css" />
<link rel="stylesheet" href="/css/jquery-ui.css" type="text/css">
<script type="text/javascript" src="/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="/js/jquery-ui.js"></script>
<script type="text/javascript" src="/js/fadeslideshow.js"></script>
<script>
$(function(){
$('#datepicker').datepicker({dateFormat:'DD dd/mm/yy',showAnim: 'slide'});
$("#anim").change(function(){
$("#datepicker").datepicker("option","showAnim",$(this).val());
});
});
</script>
The above datepicker does not work, but this does:
<link rel="stylesheet" href="/css/stylesheet.css" type="text/css" />
<link rel="stylesheet" href="/css/jquery-ui.css" type="text/css">
<script type="text/javascript" src="/js/fadeslideshow.js"></script>
<script type="text/javascript" src="/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="/js/jquery-ui.js"></script>
<script>
$(function(){
$('#datepicker').datepicker({dateFormat:'DD dd/mm/yy',showAnim: 'slide'});
$("#anim").change(function(){
$("#datepicker").datepicker("option","showAnim",$(this).val());
});
});
</script>
So if I place the referencve 'fadeslideshow.js' above the the reference to the main jquery library and ui file. Similarliy if I comment out the fadeslideshow.js reference the datepicker will work.
Why would this be the case, it took me over an hour to figure out why the datepciekr was not working?
Thanks,
Alan.
Because browsers evaluate Javascript files as soon as they are loaded. fadeslideshow.js depends on either jQuery or jQuery UI. it will try to reference a non-existant object, which, depending of the functionality of the script, may set a variable to a state not compatible to jQuery UI's datepicker.
Fixed by adding a reference to an old version of jquery which fadeslideshow.js must obviously depend on:
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
I'm trying to put together 2 Jquery scripts on the same page but can't get both working at the same time. There is always a bug of some sort. Could you tell me if you can do this?
All I'm looking for is a blank HTML page with 2 inputs, one with the datepicker and the other with timepickr.
I'm really not that good with javascript, so if someone could help me it would be awsome. Both links give like 2-6 files to include, js and css and I do not know which one to include so that they don't interfere with one another. I want the minimal implementation of both.
My latest try was this :
<link rel="stylesheet" href="js/jquery-ui-1.8.16.custom/development-bundle/themes/base/jquery.ui.all.css">
<link rel="Stylesheet" media="screen" href="js/ui-timepickr/src/css/ui.timepickr.css" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/ui-timepickr/page/jquery.utils.js"></script>
<script type="text/javascript" src="js/ui-timepickr/page/jquery.strings.js"></script>
<script type="text/javascript" src="js/ui-timepickr/page/jquery.anchorHandler.js"></script>
<script type="text/javascript" src="js/ui-timepickr/page/jquery.ui.all.js"></script>
<script type="text/javascript" src="js/ui-timepickr/src/ui.timepickr.js"></script>
<script src="js/jquery-ui-1.8.16.custom/development-bundle/ui/jquery.ui.core.js"></script>
<script src="js/jquery-ui-1.8.16.custom/development-bundle/ui/jquery.ui.datepicker.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
$('#ATTRIBUT_38').timepickr({
convention:24,
rangeMin: ['05','10','15','20','25','30','35','40','45','50','55'],
rangeHour24: [$.range(8, 12), $.range(12, 21)],
prefix: ['Avant-midi','Après-midi & Soirée'],
suffix: ['Avant-midi','Après-midi & Soirée']
});
});
</script>
</head>
<body>
<div class="demo">
Date: <input type="text" id="datepicker">
<input id="ATTRIBUT_38" type="text" value="02:30">
</body>
</html>
The problem with timepickr and jQuery UI exists since jQuery UI 1.8 and was reported already in April 2010. It seems there is no official bugfix yet :-( but here is a hack that might work: http://code.google.com/p/jquery-utils/issues/detail?id=48#c4
Anyway, I'd recommend to use an alternative TimePicker (e.g. as already proposed by Tim above)