The Bootstrap datepicker from Eyecom doesn't seems to work. I'm following various questions from here, for example:
Bootstrap Datepicker seems to not work
How do I implement and use eyecon's bootstrap-datepicker?
But without avail. What am I doing wrong? I click the input box and it doesn't show me the datepicker.
Here's my code:
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="../css/datepicker.css">
<link rel="stylesheet" type="text/css" href="../css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="../css/bootstrap-responsive.css">
</head>
<body>
<input type="text" id='datetimepicker1'>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datepicker();
});
</script>
</body>
</html>
It should work! Any help?
Please refer to http://jsbin.com/lerojivu/1/edit
The DIV includes INPUT and SAPN element is necesaary for datepicker to be initiated.
Related
links in header looks like..
<link rel="icon" href="images/favicon.ico">
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery.js"></script>
<script src="js/jquery-migrate-1.1.1.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/script.js"></script>
<script src="js/superfish.js"></script>
<script src="js/jquery.equalheights.js"></script>
<script src="js/jquery.mobilemenu.js"></script>
<script src="js/tmStickUp.js"></script>
<script src="js/jquery.ui.totop.js"></script>
<script src="js/validjs.js"></script>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" href="css/homestyle.css">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="css/side-slider.css" rel="stylesheet" type="text/css" media="screen">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="js/jquery.side-slider.js"></script>
if i comment the below jq library..
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
then my stuck-container works on scroll down the page.. but my "username availability checker" plugin does not work.. :(
and... VICE-VERSA...
Please help me to get out of this prob...
You are using 2 libraries for your page weather only 1 library should be use in one website so please use only one library it will work fine.
I was trying to add a simple dialog box to my bootstrap website but I can get that right. Something seems to go wrong with my links because when I tested the dialog box on a blank website (with no Bootstrap links) it worked perfectly. Please take a look at my code...
Keep it as simple as possible please:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="jquery-style.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
$(function() {
$( "#dialog" ).dialog({
modal:true,
show: {effect:"fade",
duration:250},
hide: {effect:"fade",
duration:250}
});
});
</script>
</head>
<body>
</body>
</html>
Stefanos Ioannou, you are using 2 jquery version why you don't place latest one.
or use jQuery.noConflict(); in document ready which will may solve your problem.
Hi in the below code datepicker() is not working using jquery.But separately it's working fine.
After adding the code into my page it's not working this is my sample code.
html
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Admission Form</title>
<link rel="stylesheet" href="css/admissionform.css">
<!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<script src="js/jquery.min.js"></script>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
jQuery(document).ready(function() {
jQuery('.date-picker').datepicker();
});
</script>
<link rel="stylesheet" href="css/flexslider.css">
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
You have multiple calls to jQuery:
<script src="js/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
Leave only only call (before any use of jQuery). Also check DevTools console for other errors (if any).
Also, you have <input id="datepicker"> but call datepicker for class selector .date-picker
Input element is with ID datepicker but you have used the class selector to create datepicker
<input type="text" id="datepicker">
jQuery('.date-picker').datepicker();
use id selector
jQuery('#datepicker').datepicker();
Check Console for errors
You have used 2 jquery files which might also cause some issue
I'm trying to get a mobiscroll scroller in my web app. I tried following their most basic tutorial found here: http://docs.mobiscroll.com/25 and I don't get anything to show up. I'm a super huge noob when it comes to javascript and feel dumb that I can't get through a three line tutorial. Here is some code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<!-- Bootstrap -->
<link href="http://universitylunchbox.com/static/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="http://universitylunchbox.com/static/css/bootstrap-responsive.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://universitylunchbox.com/static/js/bootstrap.min.js"></script>
<style>
...
</style>
...
<input id="scroller" name="scroller" />
...
</body>
<script type="text/javascript">
...
//google analytics stuff
...
$(function(){
// create a datetimepicker with default settings
$("#scroller").mobiscroll().datetime(); // Shorthand for: $("#scroller").mobiscroll({ preset: 'datetime' });
});
</script>
</html>
You have to inlcude the downloaded mobiscroll js and css files in the head section (after jquery). Also, move your initialization code before the closing </body> tag
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<!-- Bootstrap -->
<link href="http://universitylunchbox.com/static/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="http://universitylunchbox.com/static/css/bootstrap-responsive.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://universitylunchbox.com/static/js/bootstrap.min.js"></script>
<!--Mobiscroll-->
<link href="css/mobiscroll.custom-2.5.0.min.css" rel="stylesheet" type="text/css" />
<script src="js/mobiscroll.custom-2.5.0.min.js" type="text/javascript"></script>
</head>
I have created a simple mobile web page, I don't no why but the button I have created doesn't stylized like in this link. Here is the code:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content = "width=device-width , user-scalable=no">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link type="text/css" href="jquery.mobile/jquery.mobile-1.1.0.css"/>
<link type="text/css" href="themes/theme.min.css"/>
<link type="text/css" href="CSS/main.css"/>
<script type="text/javascript" src="cordova/cordova-2.2.0.js"></script>
<script type="text/javascript" src="jquery/jquery-1.8.3.js"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
<title>page</title>
</head>
<body>
<div data-role="page">
<div data-role="content">
Delete
</div>
</div>
</body>
</html>
Where I am wrong?
Thanks in advance!
make sure, your local libraries are available and the paths are correct...
see working example with the newest libraries
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="content">
Delete
</div>
</div>
</body>
</html>
I believe that the problem is with your stylesheet links. You need to include rel="stylesheet" instead of setting type.
E.g.
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"/>