I am trying to implement a bootstrap datetimepicker. Right now I have it working alright but when I try to navigate months, the month names overlap on each other, like so:
http://i.imgur.com/yps0GlD.png
Here is the code I am using:
<!DOCTYPE html>
<html lang="en">
<head>
<title>TEST</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/css/datepicker.min.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/js/bootstrap-datepicker.min.js">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.0.0/js/bootstrap-datetimepicker.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/lang/en-gb.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-3">
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
<input type='text' class="form-control" placeholder="Date & Time" />
</div>
</div>
<script type="text/javascript">
$(function () { $('#datetimepicker1').datetimepicker();});
</script>
</div><!-- /.col-lg-3 -->
</div><!-- /.row -->
</div>
</body>
</html>
It is probably worth noting that all of the stylesheets and scripts are the most up to date version, except for the second to last script, which has a version 3.1.3 available, but for some reason when I use this version, the datetimepicker doesn't work at all.
Also, how can I make it so that when the user clicks on the text field (as well as the glyph icon) the date picker appears? Right now it only works if the user clicks on the glyph icon, not the text field.
To show the datetimepicker when the user interacts with the input field, set its allowInputToggle property to true when you first initialize the datetimepicker:
$('#datetimepicker1').datetimepicker({
allowInputToggle: true
});
Ok so there were few problems.Mixing datepicker with datetimepicker was the main i guess.
You should setup locale like this
$(function () {
$('#datetimepicker1').datetimepicker({
locale:'en'
});
});
This fiddle worked ok http://jsfiddle.net/yr6a5xr8/ check the External resources
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 am using this Bootstrap-DateTimePicker with the latest version of 4.17.47.
I read all the documentation options, functions, and events.
I also included all dependencies of JS and CSS.
But something is not working properly somehow.
<!doctype html>
<html lang="en">
<head>
<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript" src="./moment.js"></script>
<script type="text/javascript" src="./bootstrap.min.js"></script>
<script type="text/javascript" src="./bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="./bootstrap.min.css" />
<link rel="stylesheet" href="./bootstrap-datetimepicker.min.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<input type='text' class="form-control" id='datetimepicker4' />
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker4').datetimepicker({
format: 'DD/MM/YYYY hh:mm',
});
});
</script>
</div>
</div>
</body>
</html>
There is an option of format in the documentation about displaying calendar part or time-picker part.
What I want is to display both parts i.e. calendar and time-picker.
But when I set format: 'DD/MM/YYYY' it shows the calendar part properly.
When I set format: 'hh:mm' it shows time-picker properly.
But when I set format:'DD/MM/YYYY hh:mm' to enable both parts, it doesn't show calendar part and only show icon for time-picker and when I click that icon it opens time-picker. This is the same case if I do not set format option explicitly and keep it default to false.
Is there anything I am doing wrong?
Currently Bootstrap-DateTimePicker does not support Bootstrap 4.
In fact, your code looks fine with Bootstrap 3.
<!doctype html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<input type='text' class="form-control" id='datetimepicker4' />
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker4').datetimepicker({
format: 'DD/MM/YYYY hh:mm',
});
});
</script>
</div>
</div>
</body>
</html>
I have this script which uses Datepicker from jqueryui and want to change it to Persian Datepicker
<html lang="en">
<head>
<link rel="stylesheet" href="css/persian.datepicker.css"/>
<script src="js/jquery.js"></script>
<script src="js/persian.date.js"></script>
<script src="js/persian.datepicker.js"></script>
<script src="js/pwt-date.js"></script>
<script src="js/pwt-datepicker.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".example1").pDatepicker();
});
</script>
</head>
<body>
<input type="text" class="example1" />
</body>
</html>
The above code works fine alone in a html file, but when i try to implement it into the script i'm modifing, then it does not work. Here is the code from the scripts i want to change:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
});
</script>
<div class="form-group">
<label class="col-md-3 control-label">News Date :-</label>
<div class="col-md-6">
<input type="text" name="news_date" id="datepicker" value="" class="form-control">
</div>
</div>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Both of the codes above work for them self! I'm going insane here. I can't find a solution for why i can't simply remove the old code and replace it with new.
UPDATE: I added the script... and link to the footer.php and now i have the calender to choose. But when i chose today's date and save, then i want to edit the saved news i get the result on the right hand side!
1 is the calender form add news page, 2 is the calender from edit new page
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>