I am trying to get bootstrap-datetimepicker to work the way I want it to. Normally the datetime selector only pops up when clicked on the icon. But I want it to pop up when clicked on the field and on the icon.
<div class="input-group datetime datepicker">
<input class="form-control" type="text" name="leaving_time" id="leaving_time">
<span class="input-group-addon">
<i class="glyphicon glyphicon-time"></i>
</span>
</div>
I found out that if I added the same class (datepicker) on the input field the popup will appear when clicked on the field, which is what I want.
The problem however is that if I click on the field first and then the icon the date picker that popped up when clicked on the field does not disappear. Which means there ends up being two date pickers on the screen.
However if I click on the glphyicon first and then the field it works properly. As in, when the field is clicked the date picker on time disappears and the on field appears. How do I make it so that the same thing happens if the field is clicked first and then the icon.
<div class="input-group datetime datepicker">
<input class="form-control datepicked" type="text" name="leaving_time" id="leaving_time">
<span class="input-group-addon">
<i class="glyphicon glyphicon-time"></i>
</span>
</div>
Here is the javascript codes that calls datetimepicker:
$(document).on('ready page:change', function() {
$('.datepicker').datetimepicker({
format: 'MMM Do YYYY',
pickTime: false,
collapse: true
});
});
You can simply focus the input when clicking on the input group addon span.
$('.datepicker').each(function(k, v) {
var $input = $(v).find('.make-datepicker');
$input.datetimepicker({
format: 'MMM Do YYYY',
collapse: true
});
$(v).find('span.input-group-addon').click(function(e) {
$input.focus();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/v4.0.0/src/js/bootstrap-datetimepicker.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/v4.0.0/build/css/bootstrap-datetimepicker.css" rel="stylesheet" />
<br/>
<div class="input-group datetime datepicker">
<input class="form-control make-datepicker" type="text" name="leaving_time" id="leaving_time">
<span class="input-group-addon">
<i class="glyphicon glyphicon-time"></i>
</span>
</div>
Late answer but I've found a better solution for anyone need.
<div class="col-md-6 input-group">
<input type="text" id="testdate" name="testdate" class="form-control" value="">
<label class="input-group-addon btn" for="testdate">
<span class="fa fa-calendar"></span>
</label>
</div>
Related
I am working on the website in which I want to popup the calendar on hitting calendar icon.
The HTML code which I have used in order to place Start Date and End Date are:
<div class="dates">
<div class="start_date">
<input class="form-control start_date mb-4" type="text" placeholder="start date">
<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">
<span class="fa fa-calendar end_date_calendar" aria-hidden="true "></span>
</div>
</div>
Problem Statement:
I am wondering what js/jquery code what I have to use in order to make the calendar popup on hitting calendar icon at the left and the right (marked by an arrow in the screenshot below).
I tried placing the following code but somehow I am not able to popup the calendar on hitting calendar icon.
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
As you are using Bootstrap, I recommend using Bootstrap Datepicker.
In your site, give an id to the date input fields and initialize as below.
$(document).ready(function(){
$("#startdate").datepicker();
$("#enddate").datepicker();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css"/>
<input id="startdate">
<input id="enddate">
You can try Bootstrap Datepicker
https://jsfiddle.net/codeandcloud/acq7t97c/
or JQuery Datepicker
http://jsfiddle.net/klenwell/LcqM7/
It looks like you are using jQuery's datepicker?
You are trying to execute this line
$( "#datepicker" ).datepicker();
but you don't have any element with an id datepicker.
Try adding the id datepicker to your input if you want the entire input to change into datepicker on click. Added id datepicker to your input with the class start_date.
<div class="dates">
<div class="start_date">
<input class="form-control start_date mb-4" type="text" placeholder="start date" id="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">
<span class="fa fa-calendar end_date_calendar" aria-hidden="true "></span>
</div>
</div>
Just an Id to the Calendar icon and click action to the corresponding icon using javascript
$(document).ready(function() {
$('#calendar1').click(function(event) {
$('.start_date').datepicker('show');
});
$('#calendar2').click(function(event) {
$('.end_date').datepicker('show');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="input-group">
<div class="input-group-addon" id="calendar1">
<i class="fa fa-calendar"></i>
</div>
<input type="text" name="start_date" id="start_date" class="form-control start_date" data-inputmask="'alias':'mm/dd/yyyy'" data-mask="" value="">
</div>
</div>
<div class="col-md-3">
<div class="input-group">
<div class="input-group-addon" id="calendar2">
<i class="fa fa-calendar"></i>
</div>
<input type="text" name="end_date" id="end_date" class="form-control end_date" data-inputmask="'alias': 'mm/dd/yyyy'" data-mask="" value="">
</div>
</div>
</div>
</div>
I have a datetimepicker that shows up when the field is clicked and hides if clicked again. However, if clicked for the third time, the calendar does not appear. If you unfocus the field and then click it again - it appears.
I'm clueless.
HTML :
<div class="input-group">
<input id="setdate-date" class="form-control" type="text" name="Date" value="#Model.Date.ToString("yyyy-MM-dd HH:mm")" style="cursor:pointer">
<span class="input-group-addon datepickerbutton start-date-addon">
<span class="fa fa-calendar"></span>
</span>
</div>
JS:
<script>
$(function () {
var today = new Date();
var endDate = new Date(#Model.MaxDate.Year, #(Model.MaxDate.Month - 1), #Model.MaxDate.Day, #Model.MaxDate.Hour, #Model.MaxDate.Minute, 0, 0);
$('#setdate-date').datetimepicker({
format: 'yyyy-mm-dd hh:ii',
startDate: today,
endDate: endDate,
autoclose: true
});
$('#setdate-date').datetimepicker('setDate', new Date());
$('#form-setdate .datepickerbutton').click(function () {
$('#setdate-date').datetimepicker('show');
});
})
</script>
Any ideas ? The same occurs on all of my datetimepickers.
Regards
edit: I tried applying .blur() on $('#setdate-date') so it unfocuses after a click but to no avail :/
This is how you use datepicker:
<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>
Here you have different scenarios: https://eonasdan.github.io/bootstrap-datetimepicker/
Here are the code for enabling datepicket to work in firefox
<script src="js/vendor/jquery-3.2.1.min.js"></script>
<script src="js/vendor/modernizr-custom.js"></script>
<script type="text/javascript">
var datefield=document.createElement("input");
datefield.setAttribute("type", "date");
if (datefield.type!=="date"){ //if browser doesn't support input type="date", load files for jQuery UI Date Picker
document.write('<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/dot-luv/jquery-ui.css " rel="stylesheet" type="text/css" />\n');
document.write('<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"><\/script>\n');
}
</script>
<script>
$(function(){
if (!Modernizr.inputtypes.date) { //if browser doesn't support input type="date", initialize date picker widget:
// If not native HTML5 support, fallback to jQuery datePicker
$('input[type=date]').datepicker({
// Consistent format with the HTML5 picker
dateFormat : 'dd-mm-yy'
},
// Localization
$.datepicker.regional['it']
);
}
});
</script>
Below are the html code
<div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
<label for="inputDate">Date of Birth: </label>
<div class="input-group datetime">
<input type="date" id='datefield' name="date" placeholder="DD/MM/YYYY" class="form-control" required/>
<span class="input-group-addon">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</div>
</div>
What I want is when I click on the glyphicon icon/button, that the calendar also appear so that I can choose a date to input into the same field just like the input type=date.
<div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
<label for="inputDate">Date of Birth: </label>
<div class="input-group datetime">
<input type="date" id='datefield' name="date" placeholder="DD/MM/YYYY" class="form-control" required/>
<label class="input-group-addon" for="datefield">
<i class="glyphicon glyphicon-calendar"></i>
</label>
</div>
</div>
Change span containing glyphicon-calendar to label, add attribute for with the ID of parent datetimepicker (in this case ID is datefield), your glyphicon-calendar icon is now clickable and will open the date time picker.
Thanks #Washington Guedes for original answer
btw this solution won't work if you nest your date time picker in html table for some reason - thought this info might be useful... you have to use bootstrap.
I've implemented this datetimepicker for Bootstrap: http://www.malot.fr/bootstrap-datetimepicker/
It works fine on my PC, but when I open it from a phone browser, the picker doesn't show up under the field. I have to scroll all the way to the bottom of the page to see it.
Also, the input field is not disabled. Tapping on it brings up the keyboard, and it's possible to enter text manually (I don't want that to be possible). I guess I can disable it in code, but in the examples it looks like it should be disabled by default?
I'll post more code soon, but if anyone already know what may be the problem let me know. Thanks :)
<div class="form-group">
<label for="startpicker" class="col-sm-1 control-label">Start:</label>
<div class="col-sm-3">
<div class='input-group date'>
<input type='text' name="start" class="form-control datepicker" id="startpicker"/>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
</div>
<div class="form-group">
<label for="sluttpicker" class="col-sm-1 control-label">Slutt:</label>
<div class="col-sm-3">
<div class='input-group date'>
<input type='text' name="slutt" class="form-control datepicker" id="sluttpicker" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('.datepicker').datetimepicker(
{
format: "dd.mm kl.hh:ii",
autoclose: "true",
todayBtn: "true",
minuteStep: 15,
pickerPosition: "bottom-left"
}
);
$('.selectpicker').selectpicker({
style: "btn-primary"
});
});
</script>
Perhaps, you should try substituting class col-sm-3 with class col-xs-3 on the div inside <div class="form-group">
I know this is quite late but a good option would be to use data-date-container="#datepicker-container" and then create a empty div with an id to match the name of the data-date-container so in this case its id will be datepicker-container
I am using bootstrap date range picker https://github.com/dangrossman/bootstrap-daterangepicker.
When i select date range & then i click on "apply button" it will call "apply.daterangepicker" and return result.
#file.html
<div class="controls">
<div class="input-prepend input-group">
<span class="add-on input-group-addon"><i class="glyphicon glyphicon-calendar fa fa-calendar"></i></span>
<input type="text" style="width: 400px" name="daterange" id="daterange" class="form-control" value="" class="span4"/>
<button id="stats" class="btn btn-small btn-sm btn-success">Show</button>
</div>
</div>
#file.js
$( document ).ready(function() {
$('#daterange').daterangepicker();
$('#daterange').on('apply.daterangepicker', function(ev, picker) {
console.log(picker.startDate.format('YYYY-MM-DD'));
console.log(picker.endDate.format('YYYY-MM-DD'));
});
});
I would like to add my own custom event , i select date startDate & endDate, then i click "Show Button" instead of "Apply" button , it should display result.
Please find below screen shot
Thank you in advance :)