I'm trying to use the bootstrap datetimepicker on a ASP.NET application. I'm getting some weird CSS problems though. Here is what it looks like:
As you can see, the icon is set far to the right, the background is blue, and there is a black box wherever the cursor is. These are the files I'm using on my webpages:
<link href="~/Content/Style.css" rel="stylesheet" type="text/css" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="~/Scripts/umd/popper.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap-multiselect.js"></script>
<link href="~/Content/bootstrap-multiselect.css" rel="stylesheet"type="text/css" />
<link rel="stylesheet" href="~/Content/bootstrap.min.css" />
<script src="~/Scripts/moment.js"></script>
<script src="~/Scripts/bootstrap-datepicker.js"></script>
<script src="~/Scripts/bootstrap-datetimepicker.js"></script>
<script src="~/Scripts/bootstrap-datetimepicker.min.js"></script>
<script src="~/Scripts/Chart.js"></script>
<link rel="stylesheet" href="~/Content/bootstrap-datepicker.css" />
<link rel="stylesheet" href="/Content/bootstrap-datetimepicker.css" />
And this is what the html/js looks like where I use datetimepicker (the code is right from their website).
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</div>
</div>
Is there an issue with the way I'm importing these files or maybe the CSS file?
Thanks!
Some css files seem to be conflicted, You can find out which css files affect the length of input box and mouse hover effect on datetimepicker.
Bootstrap version might affect those issues.
Related
I have a code to generate a normal date time picker, but it is throwing me this error Uncaught TypeError: jQuery(...).datetimepicker is not a function
Can anyone help me, i guess it is because of arrangment of links and bootstrap , but i don't have a clear picture of it.
below is my code
<html>
<head>
<link rel="stylesheet" href="jquery.datetimepicker.css">
<script src="jquery-1.8.2.min.js"></script>
<!-- <script src="jquery-ui.js"></script> -->
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<script src="jquery.datetimepicker.js"></script>
<script src="jquery.validate.min.js"></script>
<link rel="stylesheet" href="fonts/icomoon/style.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script>
$(document).ready(function() {
jQuery('#datevalue').datetimepicker();
jQuery('#completed').datetimepicker();
});
</script>
</head>
<body>
<form action="#" method="post">
<div id="AlignMainDiv">
<div class="form-group last mb-4">
<label for="date">Date</label>
<input type="text" class="form-control" id="datevalue">
</div>
<div class="form-group last mb-4">
<label for="username">Completed Date and Time</label>
<input type="text" class="form-control" id="completed">
</div>
</div>
</form>
</body>
</html>
Press F11, open the Chrome debug, go to Network > JS tab and check if any of the included js libraries return a 404 status. Maybe you misspelled a script name or URL path.
You can also try to include the libraries directly from CDNs:
<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.13.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<script>
$( function() {
$('#datevalue').datetimepicker();
$('#completed').datetimepicker();
} );
</script>
</head>
I dont know whether your datetimepicker library is loading or not.
You can use following CDN.
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/build/jquery.datetimepicker.full.min.js"></script>
Following code will load todays date and will show datepicker on input click
<script>
$(document).on("click", "#datevalue" , function() {
$(this).datetimepicker({
timepicker:false, format:"d-m-Y","setDate": new Date(),
}).focus();
});
</script>
I'm struggling to get bootstrap tag inputs working, but I can't see what I could be doing wrong. As far as I can tell I've even followed the steps in this post How to use Bootstrap Tags Input plugin
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" crossorigin="anonymous">
<form>
<div class="form-group row">
<label for="name" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control col-sm-12" value="" data-role="tagsinput" id="tags">
</div>
</div>
</form>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js" crossorigin="anonymous"></script>
I'm seeing 2 things that are strange:
1) The tags appear in the DOM but don't seem to have any sort of background applied so they appear invisible. But I can't see anywhere any mention of needing to specify a default color in the docs.
2) The control seems to resize it self as you're typing and putting in tags which I don't understand as it's supposed to have a fixed size.
Does anyone know what I'm doing wrong here? Obviously I could add some CSS hacks to get the tags appearing, but my understanding was that it should just work out the box?
This is actually like proving the bootstrap wrong:
Because it looks like they have removed the support for Bootstrap Tags Input plugin after 3.3.7
The below snippet will work just fine:
.bootstrap-tagsinput {
width: 100%;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" crossorigin="anonymous">
<form>
<div class="form-group row">
<label for="name" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control col-sm-12" value="" data-role="tagsinput" id="tags">
</div>
</div>
</form>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js" crossorigin="anonymous"></script>
when I removed :
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
and added :
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
The background style started to appear solving your first problem.
The second is actually Bootstrap Tags Input plugin default behaviour you can refer to this link which is their documentation page, in that you can see -
.bootstrap-tagsinput {
width: 100%;
}
The above style comes from app.css which links from there example paths. This style is what keeps the <input> 100% of its parent width. So if you want 100% width you have to use custom style.
Hope this was helpful.
Here my observation:
Bootstrap CSS is not loaded
1) Bootstrap 4.X in beta.
2) integrity attribute is preventing to load the bootstrap CSS
I have updated the code with a stable version of bootstrap
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" crossorigin="anonymous">
<form>
<div class="form-group row">
<label for="name" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control col-sm-12" value="" data-role="tagsinput" id="tags">
</div>
</div>
</form>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js" crossorigin="anonymous"></script>
You can set data in tags input like this:
$('#tag-input').tagsinput('add', 'tags data');
and then:
$('#tag-input').tagsinput('refresh');
I am using datetimepicker and I have problem : Uncaught TypeError: $(...).datetimepicker is not a function.
I cannot fix it. Help me...
My lib
<link href="../css/bootstrap.min.css" rel="stylesheet">
<script src="../js/datapicker/jquery.js"></script>
<script src="../js/datapicker/jquery.datetimepicker.js"></script>
<link href="../css/metisMenu.min.css" rel="stylesheet">
<link href="../css/dataTables/dataTables.bootstrap.css" rel="stylesheet">
<link href="../css/dataTables/dataTables.responsive.css" rel="stylesheet">
<link href="../css/startmin.css" rel="stylesheet">
<link href="../css/font-awesome.min.css" rel="stylesheet" type="text/css">
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
And code :
<div>
Tadbirkorlik sifatida ro'yhatdan otkazish inspeksiyasida royhatdan otgan sana
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" style="width: 1005px"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</div>
</div>
</div>
I cannot see bootstrap's javascript included, try adding it and see if it works then. Also you have to choose between .min.js or .js files, you should not include them. There is no point doing such thing.
Hope that will help :)
Could you please replace your following code
$('#datetimepicker1').datetimepicker();
with this and try again
$('#datetimepicker1 input').datetimepicker();
also please remove one of this line
<script src="../js/datapicker/jquery.js"></script>
<script src="../js/datapicker/jquery.min.js"></script>
you are loading jquery twice.
Always getting an error whenever I try to create a datepicker in my form. Can anyone help me out? I believed I have referenced the proper CSS, JS, Bootstrap and JQuery files.
<script src="js/jquery-2.1.1.js"></script>
<link href="css/animate.min.css" rel="stylesheet" />
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/color2.css" rel="stylesheet" />
<link href="css/font-awesome.min.css" rel="stylesheet" />
<link href="css/font_google.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<link href="css/bootstrapValidator.css" rel="stylesheet" />
<link href="css/bootstrapValidator.min.css" rel="stylesheet" />
<script src="js/bootstrapValidator.js"></script>
<script src="js/bootstrapValidator.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/PageValidator.js"></script>
<script src="js/Validator2.js"></script>
<link href="css/datepicker.css" rel="stylesheet" />
<script src="js/bootstrap-datepicker.js"></script>
here's my attempt at creating a datepicker
<div class="form-group">
<label for="Birthday">Birth Date</label>
<div class="input-group">
<span class="input-group-addon flat">
<span class=" glyphicon glyphicon-calendar"></span>
</span>
<div class="input-group date" id="dobPicker" data-date-format="MM/DD/YYYY">
<input type="text" class="form-control" id="birthday" name="birthday" placeholder="MM/DD/YYYY"
data-bv-notempty="true" data-bv-notempty-message="Birth Date is required and cannot be empty"
data-date-format="MM/DD/YYYY" data-bv-date-message="Invalid Date" />
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#birthday').datetimepicker({
pickTime: false
});
});
</script>
Any insight (and possibly a code fix) would be greatly appreciated!!
I know i am 2 years late to the party, but i just had the problem and found 'a' solution that might help someone in the future.
I got an error of undefined method because i loaded the wrong .js file out of the bundle.
I loaded jquery.datetimepicker.min.js out of the root dir from the package instead of jquery.datetimepicker.full.min.js out of the build folder.
If its bootstrap date Time picker use the following code :
$(function () {
$('#birthday').datepicker()({
pickTime: false
});
});
Fiddle : http://jsfiddle.net/QD94K/1/
I had the same problem. In my case I fixed it by adding:
<script src="Scripts/jquery-ui-1.10.4.js"></script>
Assuming you're using this datepicker, you should select the containing div instead of the input element.
$(function () {
$('#dobPicker').datetimepicker({
pickTime: false
});
});
You have to add - jquery_calendar/jquery-ui.js
<script type="text/javascript" src="Scripts/jquery_calendar/jquery-ui.js"></script>
or
<script src="Scripts/jquery-ui-1.10.4.js"></script>
then add JQuery code
$(document).ready(function () {
$('.openCalendar').datepicker({
closeText: "Select",
changeMonth: true,
changeYear: true
});});
if Jquery Ui is not there Calander will not works.
Okay, So I'm new to using frameworks and js libraries and I'm wanting to us bootstrap and bootstrap datepicker for a form and I have no clue if I have the file order correct but the links is how the files are setup, and I know very little about javascript, pretty much all I code in is php but I need this for a form.
Here's my testing form for the bootstrap datepicker:
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<meta charset="utf-8">
<link rel="stylesheet" href="_css/datepicker.css">
<link rel="stylesheet" href="_css/bootstrap.css">
<link rel="stylesheet" href="_css/bootstrap-responsive.css">
<script type="text/javascript" src="datepicker/bootstrap-datepicker.js"></script>
</head>
<body>
<center>
<h1>BootStrap Datepicker</h1>
<form>
<div class="well span12 main">
<input type="text" id="dp1" class="span2 datepicker" placeholder="Date..."
name="date"> <br>
</div>
<input type="submit" value="Search" class="btn">
</form>
</center>
<!-- JAVAscript ----------------------------------------------------------------->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="_js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="_js/bootstrap.js"></script>
</body>
</html>
What exactly am I doing wrong?
You should include bootstrap-datepicker.js after bootstrap.js and you should bind the datepicker to your control.
$(function(){
$('.datepicker').datepicker({
format: 'mm-dd-yyyy'
});
});
man you can use the basic Bootstrap Datepicker this way:
<!DOCTYPE html>
<head runat="server">
<title>Test Zone</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="Css/datepicker.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="../Js/bootstrap-datepicker.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#pickyDate').datepicker({
format: "dd/mm/yyyy"
});
});
</script>
and inside body:
<body>
<div id="testDIV">
<div class="container">
<div class="hero-unit">
<input type="text" placeholder="click to show datepicker" id="pickyDate"/>
</div>
</div>
</div>
datepicker.css and bootstrap-datepicker.js you can download from here on the Download button below "About" on the left side.
Hope this help someone, greetings.
I believe you have to reference bootstrap.js before bootstrap-datepicker.js
Just add this below JS file
<script type="text/javascript">
$(document).ready(function () {
$('your input's id or class with # or .').datepicker({
format: "dd/mm/yyyy"
});
});
</script>
Couldn't get bootstrap datepicker to work until I wrap the textbox with position relative element as shown here:
<span style="position: relative">
<input type="text" placeholder="click to show datepicker" id="pickyDate"/>
</span>