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.
Related
I am working on a domain in which I want to make the calendar visible on click of a search input box.
The HTML code which I have used in order to place a input boxes are:
<div class="dates">
<div class="start_date">
<input class="form-control start_date mb-4" type="text" placeholder="start date" id="startdate_datepicker">
<span class="fa fa-calendar start_date_calendar" aria-hidden="true "></span>
</div>
<div class="end_date">
<input class="form-control end_date mb-4" type="text" placeholder="end date" id="enddate_datepicker">
<span class="fa fa-calendar end_date_calendar" aria-hidden="true "></span>
</div>
</div>
The script files which I have used is:
<script>
$("#startdate_datepicker").datepicker();
$("#enddate_datepicker" ).datepicker();
</script>
Problem Statement:
I am wondering what changes I need to make in the order of script files from my domain in order to make that work.
I have a feeling the script files are placed in a wrong order in my domain.
The bootstrap-datepicker is not a part of the Bootstrap. So,you have to include datepicker plugin code, before use it.
$("#startdate_datepicker").datepicker();
$("#enddate_datepicker").datepicker();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
<!-- Include Bootstrap Datepicker -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<div class="dates">
<div class="start_date input-group mb-4">
<input class="form-control start_date" type="text" placeholder="start date" id="startdate_datepicker">
<div class="input-group-append">
<span class="fa fa-calendar input-group-text start_date_calendar" aria-hidden="true "></span>
</div>
</div>
<div class="end_date input-group mb-4">
<input class="form-control end_date" type="text" placeholder="end date" id="enddate_datepicker">
<div class="input-group-append">
<span class="fa fa-calendar input-group-text end_date_calendar" aria-hidden="true "></span>
</div>
</div>
</div>
If it's not possible to use CDN, you could place the CSS and JavaScript files of the plugin on your server and link to them.
I think you forgot to add jquery and bootstrap-datepicker to your domain
put this codes between <head></head>
Jquery:
Google CDN:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
or
Microsoft CDN:
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
Also add this:
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css"/>
I've got the same issue.
First it was a mismatch beetween datepicker and datetimepicker.
Next I've got a new issue with the datetimepicker and found finally that for bootstrap 4.1 there is a sucessor to bootstrap-datepicker : Tempus Dominus.
The URL web site : https://tempusdominus.github.io/bootstrap-4/
From the "Installing" section :
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0-alpha14/js/tempusdominus-bootstrap-4.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0-alpha14/css/tempusdominus-bootstrap-4.min.css" />
</head>
Next from the "Usage" section :
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<div class="input-group date" id="datetimepicker1" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1"/>
<div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</div>
</div>
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...
My bootstrap-datetimepicker is not working properly
This question has been asked a lot of times here, but the answers from here, here and here and manny others didn't help me further...
at the top of my webpage in the<head> i'm including:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
and then in my form i want to call him like this:
<div class="col-md-4">
<label class="control-label" for="birthday">Birthday:</label>
<div class="form-group">
<div class='input-group date' id='datetimepicker'>
<input type='text' class="form-control" placeholder="dd/mm/yyyy" value="" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
and at the bottom before the </body> tag there is the javascript/jquery part:
<script type="text/javascript">
$('#datetimepicker').datepicker();
</script>
What am i doing wrong ? Can someone correct my mistakes ?
i've read that bootstrap datepicker requires jquery 1.7.1 and up
check this fiddle im using jquery 1.9.1
<div class="col-md-4">
<label class="control-label" for="birthday">Birthday:</label>
<div class="form-group">
<div class='input-group date' id='datetimepicker'>
<input type='text' class="form-control" placeholder="dd/mm/yyyy" value="" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
Try wrap plugin initialization in document ready function.
<script type="text/javascript">
$(document).ready(function() {
$('#datetimepicker').datepicker();
});
</script>
I tried to use Bootstrap date-picker (https://github.com/eternicode/bootstrap-datepicker), but i can't get it to work.
On jsfiddle everything works like a charm: http://jsfiddle.net/hwuktpt2/
After some failed tests on the actual page, I even tried a blank new page and integrated everything from scratch again. jQuery works, Bootstrap styling works, Datatables works, but I just can't get date-picker to work.
Any suggestions?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/u/bs-3.3.6/jq-2.2.3,jszip-2.5.0,pdfmake-0.1.18,dt-1.10.12,b-1.2.0,b-colvis-1.2.0,b-html5-1.2.0,b-print-1.2.0,fh-3.1.2,se-1.2.0/datatables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/css/bootstrap-datepicker.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/u/bs-3.3.6/jq-2.2.3,jszip-2.5.0,pdfmake-0.1.18,dt-1.10.12,b-1.2.0,b-colvis-1.2.0,b-html5-1.2.0,b-print-1.2.0,fh-3.1.2,se-1.2.0/datatables.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/js/bootstrap-datepicker.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/locales/bootstrap-datepicker.de.min.js"></script>
<script type="text/javascript">
$('.date_picker input').datepicker({
format: "dd.mm.yyyy",
todayBtn: "linked",
language: "de"
});
</script>
<style type="text/css">
.control-label {
padding-top:7px;
}
</style>
</head>
<body>
<div class="container">
<div class="page-header">
Neues Mobile Device anlegen
</div>
</div>
<div class="container">
<form class="form-horizontal" name="mobdev_neu" action="mobdev_neu.php" method="post">
<div class="form-group">
<label for="mobdev_neu_type" class="col-xs-2 control-label">Type</label>
<div class="col-xs-10">
<select id="mobdev_neu_type" class="form-control" name="mobdev_neu_type" REQUIRED>
<option value="">-- Bitte auswählen --</option>
</select>
</div>
</div>
<div class="form-group">
<label for="mobdev_neu_imei" class="col-xs-2 control-label">IMEI</label>
<div class="col-xs-10">
<input type="text" id="mobdev_neu_imei" class="form-control" name="mobdev_neu_imei" placeholder="Pflichtfeld" REQUIRED>
</div>
</div>
<div class="form-group">
<label for="mobdev_neu_kaufdatum" class="col-xs-2 control-label">Kaufdatum</label>
<div class="col-xs-10 date_picker">
<input type="text" id="mobdev_neu_kaufdatum" class="form-control" name="mobdev_neu_kaufdatum" placeholder="Pflichtfeld">
</div>
</div>
</form>
</div>
</body>
Wrap the date picker initialize call in a document.ready. This code is running before the dom is finished loading from the look of it. Since JavaScript is interpreted it is run at the time it is read by the browser. Because you're defining the code in the head the body and its contents haven't been loaded yet; so the selector finds no elements to initialize datepicker. If you don't want to use document.ready functionality you could also move the script to the end of the body tag.
$(function(){
$('.date_picker input').datepicker({
format: "dd.mm.yyyy",
todayBtn: "linked",
language: "de"
});
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
<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>
Use these Libraries after using this use below code in you body where you want to make Date field.
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" name="update_time" placeholder="Update Date"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<script type="text/javascript">
var j = jQuery.noConflict();
j(function () {
j('#datetimepicker1').datetimepicker({
format: 'L',
disabledHours: true,
});
});
</script>
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/