I added datetime picker plugin in my code. It works but not positioning rightly. When I focused on the input it's showed in footer of page not near the input. What should I check for?
$(".form-date").datetimepicker({
format: "dd.mm.yyyy",
minView: 2,
maxView: 4,
autoclose: true,
language: 'tr',
pickerPosition: "bottom-left"
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="form-group row">
<label for="Tarih" class="col-md-3 control-label">Tarih</label>
<div class="col-md-9 input-append date form-date">
<input type="text" class="form-control" name="Tarih" id="Tarih" value="" placeholder="Tarih">
<span class="add-on"><i class="icon-th"></i></span>
</div>
</div>
Aside from missing some of the required assets (datetimepicker, moment, etc) in your shared snippet, you are using deprecated options which prevent datepicker from displaying.
You can find current options here.
List of required assets here.
Update to the following:
format: 'dd.MM.YYYY'
min & maxView are gone but you can check viewMode on the options link (no min-max option though).
autoclose to keepOpen (although it's set to false by default, so no
need)
language to locale: 'tr'
pickerPosition to widgetPositioning {horizontal: 'left', vertical: 'bottom'} object.
Working Snippet:
$('.form-date').datetimepicker({
format: 'dd.MM.YYYY',
locale: 'tr',
widgetPositioning: {
horizontal: 'left',
vertical: 'bottom'
}
});
<link href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<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.9.0/moment-with-locales.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
<div class="container">
<div class="form-group row">
<label for="Tarih" class="col-md-3 control-label">Tarih</label>
<div class='input-group date form-date col-md-9 input-append'>
<input type='text' class="form-control" placeholder="Tarih" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
I think there is no 'pickerPosition: "bottom-left"' option for Bootstrap Datetime Picker.
http://eonasdan.github.io/bootstrap-datetimepicker/Options/
May be it is causing the problems.
There is no datetimepicker component files in your html reference codes. You should have added js and css files.
First download the scripts from the component website here or clone from git:
$ git clone git://github.com/smalot/bootstrap-datetimepicker.git
And add references in the head section:
Sources:
<script type="text/javascript" src="./jquery/jquery-1.8.3.min.js" charset="UTF-8"></script>
HTML:
<div class="form-group">
<label for="dtp_input2" class="col-md-2 control-label">Date Picking</label>
<div class="input-group date form_date col-md-5" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
<input class="form-control" size="16" type="text" value="" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
<input type="hidden" id="dtp_input2" value="" /><br/>
</div>
There is no option for older version of Bootstrap Datetime Picker. But you can change the positioning by applying CSS to the dropdown picker.
.bootstrap-datetimepicker-widget.dropdown-menu {
inset: auto!important;
}
Here is the docs for more details :
https://bootstrap-datepicker.readthedocs.io/
Related
On a page that I am working on there is a datetime picker. It is seemingly working fine, however none of the options seem to be registering and for the life of me I cannot figure out why.
I have commented out all javascript, html and external libraries that may be interfering with it. I have made sure all the files are correct. I have made sure it's being called...anything and everything I can think of.
Some help would be greatly appreciated.
<div class="form-group row " >
<label class="col-md-2 form-control-label" for="StartDate">Start Date</label>
<div class="controls " >
<div class="input-group date col-md-3 datePicker">
<input type="text" class="form-control required" id="StartDate" name="datePicker">
<span class="input-group-addon add-on"> <i class="fa fa-calendar" aria-hidden="true"></i> </span>
</div>
</div>
</div>
$('.datePicker').datetimepicker({
format: 'DD/MM/YYYY',//This is not working
minDate:d.setDate(d.getDate() + 1) //neither is this
})
.find("input")
.end();
This example definitely except format you can test by uncommenting format lines one by one. I hope this is usable to your request.
<link rel="stylesheet" href="//code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.4/css/bootstrap-datetimepicker.min.css" type="text/css" media="all" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.4/js/bootstrap-datetimepicker.min.js"></script>
<body>
<div class="container">
<div class="input-append date">
<input id="datetimepicker1" data-format="dd/MM/yyyy hh:mm:ss" type="text"></input>
</div>
</div>
</body>
<script type="text/javascript">
$(function() {
$('#datetimepicker1').datetimepicker({
//format: 'DD/MM/YYYY hh:mm:ss'
format: 'DD/MM/YYYY'
//format: 'hh:mm:ss'
});
});
</script>
I'm trying to use a datepicker and a time picker in my html form. My code is below :
<div class="form-group" style="width: 50%;">
<label>Date:</label>
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control pull-right" id="datepicker" name="date" >
</div>
<!-- /.input group -->
</div>
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker3'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
<label>
And I use the inclusions below:
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="plugins/datepicker/datepicker3.css">
<link rel="stylesheet" href="plugins/timepicker/bootstrap-timepicker.min.css">
<script type="text/javascript" src="plugins/datepicker/locales/bootstrap-datepicker.fr.js"></script>
<script type="text/javascript" src="plugins/timepicker/bootstrap-timepicker.min.js"></script>
The html is working fine, I can see the datepicker field but I can't use it, the timepicker seems to got the same problem.
When I click on it, the calendar or the timepicker are not opening.
What is wrong?
where is your javascript to initialize fields and convert to datepickers? if you only do html markup, fields know nothing about functionality.
use this:
$('#datepicker').datepicker();
but first! read the docs...
I have a situation with datetimepicker. It doesn't show any timer when I click the first icon. The second works. The chrome browser not showing any errors in the development console. Any suggestions ?
<div class="input-append form-group datetimepicker">
<div class="input-group date">
<input type='text' data-format="hh:mm:ss" class="form-control" name="evstime" placeholder="Adauga ora" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
<div class="input-append form-group datetimepicker">
<div class="input-group date">
<input type="text" data-format="hh:mm:ss" class="form-control" name="evstime" placeholder="Adauga ora"/>
<span class="add-on">
<i class="fa fa-clock-o" aria-hidden="true"></i>
</span>
</div>
</div>
jQuery:
$(function() {
$('.datetimepicker').datetimepicker({
pickDate: false
});
});
<script src='js/moment.min.js'></script>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/bootstrap-datetimepicker.min.js"></script>
<script src='js/fullcalendar.min.js'></script>
<script src='js/calendar.js'></script>
<script src="js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/bootstrap-datetimepicker.min.css">
You can add these as CDNs.
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
And use only datepicker:
<script>
$(function() {
$('.form-control').datepicker({
pickDate: false
});
});
</script>
In general, check you library dependencies. Here is more information about it: https://jqueryui.com/datepicker/
The problem is that you were trying to initialise the datetimepicker on the <div> instead of the <input> itself. Try changing your HTML to:
<div class="input-append form-group">
<div class="input-group date">
<input type='text' data-format="hh:mm:ss" class="form-control datetimepicker" name="evstime" placeholder="Adauga ora" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
<div class="input-append form-group datetimepicker">
<div class="input-group date">
<input type="text" data-format="hh:mm:ss" class="form-control datetimepicker" name="evstime" placeholder="Adauga ora"/>
<span class="add-on">
<i class="fa fa-clock-o" aria-hidden="true"></i>
</span>
</div>
</div>
Note the datetimepicker included on the class attribute of each input..
And in order to initialise all datetimepicker controls at once, use:
$('.datetimepicker').each(function(){
$(this).datetimepicker({
pickDate: false
});
});
EDIT
pickDate: false will disable your datetimepicker, remove this attribute and everything should work as expected.
I want to make my DateTimePicker format to be yyyy-mm-dd because it is the format that I've inserted in my database.
Here is the markup:
<div class="col-sm-6">
<div class="input-group date" data-provide="datepicker">
<input type="text" class="form-control" id="repdate" name="repdate" placeholder="Report date" required>
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
And here is the code I wrote to change the format, but it doesn't work:
$(document).ready(function() {
$(function () {
$('.datepicker').datetimepicker({
format: 'YYYY-MM-DD'
});
});
});
$('.datetimepicker').datetimepicker({
timepicker: false,
format: 'Y-m-d',
closeOnDateSelect: true,
scrollInput: false
});
The problem is your jQuery selector, you should use $('[data-provide="datepicker"]') instead of $('.datepicker') or add a datepicker class to your input.
Here a working example:
$('[data-provide="datepicker"]').datetimepicker({
format: 'YYYY-MM-DD'
});
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<div class="col-sm-6">
<div class="input-group date" data-provide="datepicker">
<input type="text" class="form-control" id="repdate" name="repdate" placeholder="Report date" required>
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
In your jQuery code, it uses a datepicker class but you are not using it correctly. You should use it like below
<div class="col-sm-6">
<div class="input-group date datepicker">
<input type="text" class="form-control" id="repdate" name="repdate" placeholder="Report date" required>
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
Anyway, you do not have to use the same format in your database as you can update the date on your backend code with the proper database format later.
I am using jquery-timepicker, and it is not displaying the dropdown when I click on the input box. In my view:
<script type="text/javascript">
$(function(){
$('#StartTime').timepicker();
});
</script>
/* ... */
<div class="col-xs-6 form-group">
<label>Start Time:</label>
<div class="input-group">
<input type="text" class="form-control" id="StartTime" />
<span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
</div>
</div>
I know it is loading properly, because the ui-timepicker element is being added to the DOM when I click on the input box and it formats time entered in the box when it loses focus. It just isn't displaying the dropdown.
Check that you have all the dependencies. I copied your code to a snippet and added the dependencies from the official site and it worked well. I included the following dependencies: jQuery, jQuery timepicker and Bootstrap timepicker. The last two have CSS and JS files too.
$(function() {
$('#StartTime').timepicker();
});
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://jonthornton.github.io/jquery-timepicker/jquery.timepicker.js"></script>
<link rel="stylesheet" type="text/css" href="https://jonthornton.github.io/jquery-timepicker/jquery.timepicker.css">
<script type="text/javascript" src="https://jonthornton.github.io/jquery-timepicker/lib/bootstrap-datepicker.js"></script>
<link rel="stylesheet" type="text/css" href="https://jonthornton.github.io/jquery-timepicker/lib/bootstrap-datepicker.css">
<div class="col-xs-6 form-group">
<label>Start Time:</label>
<div class="input-group">
<input type="text" class="form-control" id="StartTime" />
<span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
</div>
</div>
Make sure there is no css definitions, which may hide this element.