I am quite new to JS and trying to add datetimepicker to my web-demo. The tutorial works properly with bootstrap 3.3.7, but when I change it to version 5, the calendar is not showing anymore.
Minimal working html is the following
<!-- this works OK -->
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> -->
<!-- this does not! -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.3/css/bootstrap-datetimepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<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>
<script>
$(".date").datetimepicker({locale: "ru"});
</script>
I use bootstrap#5.1.3 in the project and don't want to change it because of one datetimepicker. I've already tried many variants, but none worked. How can I get it to work?
As https://stackoverflow.com/a/68683409/8900030 stated, https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js is for Bootstrap 3, not Bootstrap 5.
What version should I use instead? (and how do I know that?)
Also note that I need {locale: "ru"} parameter, which is not available at bootsrap 3 AFAIK.
The successor is here: https://getdatepicker.com/
It no longer requires Bootstrap, jQuery or Moment. Checkout the installation documentation https://getdatepicker.com/6/installing.html here.
You can use plain html to get a date and time pick this seems to work well for me
<input type="datetime-local">
Yah, adding "datetime-local" in input field, seems to work. I does magic for me also.
<input type="datetime-local">
Related
Ive created a simple tooltip using bootstrap and JQuery. But the delay time for the tooltip simply doesn't work for me. Its taking obviously longer than 100 milliseconds.
HTML:
<p class="myHover" onclick="jobFunction()" data-toggle="tooltip" title="Hooray!" data-delay=100>GIS Researcher</p>
JavaScript:
$(document).ready(function(){
$(".myHover").tooltip();
});
Ive properly referenced bootstrap and jQuery in my head tag.
Works fine for me. Your fiddle didn't load any of the required libraries.
I changed your paragraph to a span and set the tooltip placement to bottom to make it show up in a more sensible location.
$(document).ready(function() {
$(".myHover").tooltip();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<span class="myHover" data-toggle="tooltip" title="Hooray!" data-delay="100" data-placement="bottom">GIS Researcher</span>
URL:
http://qualitygameservers.com.gridhosted.co.uk/
I am attempting to install the JQuery lightbox demonstrated here:
https://designshack.net/articles/javascript/create-a-simple-jquery-image-lightbox-gallery/
Console is returning that it is not in fact a function, however my script experience is minimal.
Any ideas what the problem is? Have i missed something basic or is this an issue with the open source code?
Thank you.
Make sure that you get both the jquery resource and the lightbox code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://designshack.net/tutorialexamples/lightbox-gallery/js/jquery.lightbox-0.5.min.js">
And if you might want to host that jquery.lightbox file on your own site, in case that tutorial page ever gets moved/deleted.
$(function() {
$('#thumbnails a').lightBox();
});
<link href="https://designshack.net/tutorialexamples/lightbox-gallery/css/jquery.lightbox-0.5.css" rel="stylesheet"/>
<link href="https://designshack.net/tutorialexamples/lightbox-gallery/css/styles.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://designshack.net/tutorialexamples/lightbox-gallery/js/jquery.lightbox-0.5.min.js"></script>
<div id="thumbnails">
<img src="https://designshack.net/tutorialexamples/lightbox-gallery/images/photos/01-turntable-illustration-graphic-thumbnail.png" />
<img src="https://designshack.net/tutorialexamples/lightbox-gallery/images/photos/08-extreme-fish-bowl-thumbnail.png" />
</div>
I'm using Tigra calendar (https://www.softcomplex.com/products/tigra_calendar/) in my code as a simple pop-up calendar with any input text, but I'm facing some kind of problem that's driving me nuts.
To use this calendar, it's just needed to add
<link rel="stylesheet" type="text/css" href="tcal.css" />
<script type="text/javascript" src="tcal.js"></script>
in the head section, and add class="tcal" to the input
<input type="text" name="date" class="tcal" value="" />
Working demo in https://jsfiddle.net/fgh7yjg7/
But now, using the same calendar inside a Bootstrap3 modal, it simply doesn't work in my code (although it does in a simple modal sample with jsfiddle)
What could be wrong?
I run this simple script that comes from Angular documentation, and it's working fine:
http://plnkr.co/edit/6uIlw6HGVVpT0amF2vhj
If I add jQuery and jQuery Mobile, then the example doesn't work anymore. The radiobuttons are not clickable.
Example: If I add these two scripts and the following CSS in the above example:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css" />
If I put them before the include of angular.js, then the radiobutton are clickable, but the display of the choice ("You choose...") doesn't work anymore.
Does somebody knows why is it not working?
Use this Sequence. dont know the reason but worked in plunkr.
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>
I have worked with .draggable() function before and it worked fine the previous time. However this time it is not even working. I have no idea why?
These are my jQuery links
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<link rel="stylesheet" href="https//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
This is my HTML Code
<div class="mainArea" id="response">
<div class="designer">
<?php include"shirtBasic.svg" ?>
<div id="imageDiv"> </div>
<div id="dragDiv"> </div>
</div>
<table width="100%" border="0" id="sizeBar">
<tr>
<td class="leftBarButton" style="width:50%">Front</td>
<td class="leftBarButton" style="width:50%">Back</td>
</tr>
</table>
</div>
and this is the jQuery
$(document).ready(function() {
$(function() {
$('#dragDiv').draggable();
});
});
This is not the only code there is other code above and below HTML and jQuery as well but not relevant.
Please help me find the problem and suggest if I have linked the correct versions of jQuery, if there is a newer available please enlighten me.
Your code works well... http://jsfiddle.net/m6ac80wb/2/
You should use only one version of JQUERY. You can keep the latest one https://code.jquery.com/jquery-2.1.1.js
Also, don't forget to import the jquery-2.1.1.js before the jquery-ui.js.
You can try using:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
It works if you try it that way, and also your stylesheet was missing the ":" in the url, it is not the reason it wasn't working, but I thought I should point it out.