I need to launch a jQuery calculator (http://keith-wood.name/calculator.html) when clicking the calculator icon to the right of the input field. The referenced calculator is great and has great documentation, but I guess I need someone smarter than me to figure out how to launch it when clicking the "fa-calculator" icon to the right of a field.
I've setup my form input field as follows. The calculator allows the use of a button to launch it, but it simply creates a button next to the field, which isn't what I'm after.
Thank you!
<div class="input-group">
<span class="input-group-addon">A</span>
<input name="a" id="a" class="c form-control input-mini" type="text">
<span class="input-group-addon"><i class="fa fa-calculator"></i></span>
</div>
I'm launching the calculator as below, and it works fine when an operator (+-*/) is typed. But, I also need the calculator to launch when the input-group-addon is clicked.
$('#a').calculator({showOn:'operator'});
You can show the calculator by yourself when the user clicks on .input-group-addon, like this:
$('.input-group-addon').on('click', function() {
$('#basicCalculator').calculator('show');
});
http://keith-wood.name/calculatorRef.html#show
$('#basicCalculator').calculator({
showOn: 'operator',
});
$('.input-group-addon').on('click', function() {
$('#basicCalculator').calculator('show');
});
<link href="https://cdn.jsdelivr.net/npm/jquery.calculator#2.0.1/jquery.calculator.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.calculator#2.0.1/jquery.plugin.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.calculator#2.0.1/jquery.calculator.min.js"></script>
<input type="text" id="basicCalculator">
<span class="input-group-addon"><i class="fa fa-calculator"></i></span>
https://jsbin.com/tukuyep/edit?html,js,output
Related
I am trying to add a timepicker to my page using bootstrap 5, for some reason the calendar is not loading so I can not pick any date. I do not know if I have done something wrong or the plugin is not compatible with the latest version of bootstrap.
If you click 'launch demo modal' you will see the date input field and datepicker is not working there.
This is the code for the input date field:
<div class="col-12">
<label for="date" class="col-sm-1 col-form-label">Date</label>
<div class="input-group date" id="datepicker">
<input type="text" class="form-control">
<span class="input-group-append">
<span class="input-group-text bg-white d-block">
<i class="fa fa-calendar"></i>
</span>
</span>
</div>
</div>
JS (truncated):
<script type="text/javascript">
$(document).ready(function () {
$('#datepicker').datepicker();
...
});
</script>
I also tried using $('.datepicker').datepicker(); according to the bootstrap-datepicker docs but nothing changed.
Demo page
Stackoverflow source
You should put bootstrap-datepicker.min.js after jquery.js. It somehow make errors because of that.
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
Why add additional JS for datepicker fields?
You can simply make the input field of type date to get a native browser date selector.
Example:
<input type="date" class="form-control" name="date-field" />
Support for date (along with time) fields can be found on Can I Use.
Include below CSS and js in your file
Reference: https://cdnjs.com/libraries/bootstrap-datepicker
<!-- Bootstrap datepicker CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css"/>
<!-- Bootstrap datepicker JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
For custom styling please have a look at the below link
Bootstrap Datepicker - Custom Styles
I have an application where I am using Bootstrap 4 with tooltips. I want to toggle the tooltips one by one and show them only on click. I am able to do this using:
<input type="text" id="name" class="form-control" autocomplete="off"
data-toggle="tooltip" data-placement="bottom" title="Write name here.">
I am showing the tooltip individually using the following javascript which gets triggered on button click:
$('#name').tooltip("show");
and I hide/dispose of it using the following script:
$('#name').tooltip("dispose");
The reason I use dispose is because I do not want the tooltip to be visible unless the button is pressed.
The issue is that on mouseover of the input field, the browser (in my case Firefox Developer Edition) shows the tooltip with its own style because the tooltip text is in the title attribute.
Is there a way in bootstrap to instead hold the text to be shown in another data-tooltiptitle attribute for e.g.:
<input type="text" id="name" class="form-control" autocomplete="off"
data-toggle="tooltip" data-placement="bottom" data-tooltiptitle="Write name here.">
And then maybe tell the tooltip to use the data-tooltiptitle attribute for the text using some jQuery.
Any help is appreciated.
You can use a title option and set it as a function. On hover, this function will get called with the instance of the hovered element. Using getAttribute, you can then fetch the custom attribute.
$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip({
title: function() {
return 'No Hooray!!';
}
});
$('#link').tooltip({
title: function() {
return this.getAttribute('custom-title');
}
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
Hover over me
<input type="text" id="link" custom-title="Hooray!">
Currently, my issue is that the calendar isn't showing (tells me the datetimepicker function isn't properly initialized on the controls).
Note that the implementation shown here is based on a different implementation elsewhere on the site which does work.
<link href="/Content/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="/Scripts/moment.min.js"></script>
<script src="/Scripts/bootstrap-datetimepicker.min.js"></script>
I've stripped out all the scripts like datatables and knockout as I believe they're superfluous and the list of scripts used is quite extensive.
Full [redacted to remove client information] markup for the page can be found here.
The form is simple, just inputs with .datetimepicker class on them:
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="control-label col-sm-5">Start Date</label>
<div class="col-sm-7 input-group">
<input type="text" class="form-control datetimepicker" id="StartDate" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar "></span>
</span>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-5">End Date</label>
<div class="col-sm-7 input-group">
<input type="text" class="form-control datetimepicker" id="EndDate" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar "></span>
</span>
</div>
</div>
</div>
</div>
Right now when I click on either of these inputs they just give me autocomplete options for values which I've entered in the past.
Used to be with things like this you'd initialize the javascript with something like this at the bottom of the page:
$(document).ready(function () {
$("#StartDate").datetimepicker();
$("#EndDate").datetimepicker();
});
This, however, doesn't appear to be necessary in this case as the page on which these datetimepickers work doesn't do it.
If I do initialize the controls this way, the calendar shows, but whether I use the locale option or the format option as indicated in this SO Answer, it never gives the dates the correct format that I need which is yyyy/mm/dd.
Ideally, I want to be able to see the calendar pop-out and have it display dates on the input with the correct format. If anyone can indicate possibly what I'm doing wrong I'd greatly appreciate it.
Here's a fiddle: https://jsfiddle.net/h3809a7r/
I just imported these libraries and its working now
Javascript:
https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js
https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js
CSS
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css
JsFiddle Link with your code
Can you please try this
$("#StartDate").datetimepicker({
format: 'YYYY-MM-DD HH:mm',
showClose: true,
showClear: true
});
I have two calendars in HTML that when you click on two dates, it shows the days between the two dates. This works perfectly for me since I just used jQuery code I found online, but the people I will be handing this HTML file to do not have any access to the links of my source code. They also don't have any access to any local shared drive where I can download the scripts and save it there.
Is there any way for me to directly add jQuery codes to the HTML file itself so that the people who will be using it will not need access to anything to use it properly? Sorry, I am only learning HTML/jQuery as I'm doing it and cannot find any solutions to my problem.
I already tried downloading the flies of the source codes to a share drive, it works perfectly but others do not have access to it. They are not allowed to save anything on their own desktops either.
<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.5/js/bootstrap.min.js"></script>
<script src="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/src/js/bootstrap-datetimepicker.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/build/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<label>DATE TODAY:</label>
<div class="input-group date" id="initialDate">
<input type='text' name="initialDate" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<label>EXPECTED DATE:</label>
<div class='input-group date' id='finalDate'>
<input type='text' name="finalDate" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<br><label>Days between: </label> <span id="days"></span>
function CalculateDayends() {
var initialDate = $("#initialDate").data('date');
var finalDate = $("#finalDate").data('date');
var diff = Math.floor((Date.parse(initialDate)- Date.parse(finalDate)) / 86400000);
$("#days").text(diff);
}
$("#finalDate").on('dp.change', function() {
CalculateDayends();
});
$('#initialDate').datetimepicker({
format: 'YYYY-MM-DD'
});
$('#finalDate').datetimepicker({
format: 'YYYY-MM-DD'
});
<script>your js code goes here</script>
I have an Input control on my webform on which I am using bootstarp datetimepicker. The datetimepicker works perfectly when I click for the first time on the Input control. But if I click again on the input control, Datetimepicker disappears. I have click somewhere else on the webform and then click again on input control to show it. I am not able to find what is problem. Any kind of help is highly appreciated.
I hope my explanation is not confusing!
I have checked several question here on stackoverflow but none of them are working for me. I tried checking in datetimepicker documentation also but couldn't find anything or maybe I was not able to understand it properly.
HTML Code:
<div>
<div class="input-group date form_date" id="dt_1" data-date="" data-date-format="yyyy-mm-dd" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd" style="width:inherit;">
<input class="form-control" type="text" value="" readonly="true" id="date1" style="width:inherit;" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
Jquery:
<script type="text/javascript">
$('.form_date').datetimepicker({
//language: 'fr',
weekStart: 1,
//todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
forceParse: 0
});
</script>
Bootstrap scripts:
<link href="../Content/bootstrap.min.css" rel="stylesheet" />
<link href="../date/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src="../date/bootstrap-datetimepicker.js"></script>
Expected result is that Datetimepicker should not disappear on second click. It should only disappear if date selected or if clicked somewhere outside the control.
Thanks for help in advance.