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
Related
It seems that I'm facing a conflict between prototypejs and jquery. Here is a sample of code to illustrate that (I know it's not very nice, i've created it for debugging purposes only) :
<html> <head>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script type="text/javascript" src="/CR0000086/js/jquery.js"></script>
<!-- bug here if I add this line : <script type="text/javascript" src="/CR0000086/js/prototype.js"></script> -->
<link rel="stylesheet" href="/CR0000086/css/bootstrap-datepicker.min.css">
<script type="text/javascript" src="/CR0000086/js/bootstrap-datepicker.min.js"></script>
</head> <body>
<!-- test1 with datepicker -->
<input type="text" id="example1" class="hasDatePicker"> <script>
$("#example1").datepicker(); </script>
<!-- test2 with pickadate-->
<div class="form-group"> <div class="input-group">
<input type="text" class="date-input form-control"/>
<span class="input-group-btn">
<button class="date-button btn btn-default" type="button"> # </button>
</span> </div> <div id="date-picker"> </div> </div>
<link rel="stylesheet" href="/CR0000086/css/pickadate.css">
<script type="text/javascript" src="/CR0000086/js/pickadate.js"></script>
</body> </html>
The page works well, I see my two datepickers, however, if I uncomment the line to load prototype.js, I get the following errors :
Cannot read property 'datepicker' of null
Cannot read property 'pickadate' of null
If you want to reproduce that bug, here is are the links to the packages I've used :
http://amsul.ca/pickadate.js/
https://uxsolutions.github.io/bootstrap-datepicker/?#sandbox
I've tried a lot of solutions, including JQuery.noConflict(), I guess that the solution has to deal with this bug : http://www.softec.lu/site/DevelopersCorner/BootstrapPrototypeConflict
But I must admit that's a too high level in javascript for me, I need help to make one of these datepickers working with prototypeJS loaded.
Could you help me ? Or if you have another solution (I need a datepicker), any idea would be appreciated
Best regards,
Julien
I have existing asp.net pages using bootstrap datepickers.
I need it now in a simple html page, so I copied the related link and script lines from the asp.net project into a bare minimum html file.
The datepicker never shows, and I have no idea what is wrong with it. I have looked aroud and searched the web for examples, but did not find out why it does not work.
Here's a little test file:
<html>
<head>
<title>datepicker test</title>
<link href="http://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<script>
$(document).ready(function() {
$("#datepicker").datetimepicker({
format: "dd-MMM-yyyy"
});
})
</script>
</head>
<body>
<form>
<div class="input-append date" id="datepicker">
<input size="16" type="text" value="" readonly>
<span class="add-on"><i class="icon-th"></i></span>
</div>
</form>
</body>
</html>
Please advise,
TIA,
Guido
You misspelled the function to call the datepicker. It's
$("#datepicker").datepicker({
format: "dd-MMM-yyyy"
});
And you typed 'dateTIMEpicker'
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>
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
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)