I'm trying to use date range picker but I can't seem to make it work.
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />
<script type="text/javascript"
src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />
.
<input type="text" name="daterange" value="01/01/2015 - 01/31/2015" />
<script type="text/javascript">
$(function() {
$('input[name="daterange"]').daterangepicker();
});
</script>
I don't understand why it doesn't show the calendar. Any help would be appreciated.
Here is the snippet, just so you know it works
$(function() {
$('input[name="daterange"]').daterangepicker();
});
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />
<script type="text/javascript"
src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />
<input type="text" name="daterange" value="01/01/2015 - 01/31/2015" />
Related
I use the scripts and style files below and so with that queue the colvis button doesnt open..
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.5.0/font/bootstrap-icons.css" rel="stylesheet" >
<link href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap5.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.datatables.net/select/1.3.3/css/select.dataTables.min.css" rel="preconnect">
<link href="https://cdn.datatables.net/buttons/1.7.1/css/buttons.bootstrap5.min.css" >
<script src="https://code.jquery.com/jquery-3.5.1.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap5.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/buttons/1.7.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.bootstrap5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.colVis.min.js"></script>
<script src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2#11"></script>
<link href="https://fonts.gstatic.com" rel="preconnect">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap" rel="stylesheet">
But whenever I delete the ,
<script src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.bootstrap5.min.js"></script>
file the button works but style is gone this time...
What is my mistake , any idea?
THAT BUTTON NOT WORKING IMAGE
THAT BUTTON STYLE GONE
AT last I found the correct one below..
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap5.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.7.1/css/buttons.bootstrap5.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.5.0/font/bootstrap-icons.css" >
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css" >
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.3/css/select.dataTables.min.css" >
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap">
<link rel="stylesheet" type="text/css" href="https://fonts.gstatic.com">
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap5.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.7.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.bootstrap5.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.html5.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.print.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.colVis.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.jsdelivr.net/npm/sweetalert2#11"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js"></script>
Im working a C# MVC project. Datepicker stopped working and I narrowed it down to what is causing it but don't have a solution...
I change one line of code in the Layout page and it breaks the date picker. Specifically going from jquery-1.11.1.min.js to jquery-3.3.1.min.js
This layout works:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<script src="~/Scripts/jquery-1.11.1.min.js"></script>
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/jquery.timepicker.min.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
<script src="~/Scripts/moment.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/bootstrap-datepicker.min.js"></script>
<script src="~/Scripts/mvcfoolproof.unobtrusive.min.js"></script>
<script src="~/Scripts/MvcFoolproofJQueryValidation.min.js"></script>
<link href="~/Content/jquery.timepicker.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap-datepicker.css" rel="stylesheet" />
<link href="~/Content/font-awesome.css" rel="stylesheet" />
<link href="~/Content/themes/base/jquery-ui.min.css" rel="stylesheet" />
<link href="~/Content/themes/base/jquery.ui.theme.css" rel="stylesheet" />
<link href="~/Content/Menu.css" rel="stylesheet" />
<link href="~/Content/Site.css" rel="stylesheet" />
</head>
This layout breaks datepicker:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/jquery.timepicker.min.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
<script src="~/Scripts/moment.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/bootstrap-datepicker.min.js"></script>
<script src="~/Scripts/mvcfoolproof.unobtrusive.min.js"></script>
<script src="~/Scripts/MvcFoolproofJQueryValidation.min.js"></script>
<link href="~/Content/jquery.timepicker.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap-datepicker.css" rel="stylesheet" />
<link href="~/Content/font-awesome.css" rel="stylesheet" />
<link href="~/Content/themes/base/jquery-ui.min.css" rel="stylesheet" />
<link href="~/Content/themes/base/jquery.ui.theme.css" rel="stylesheet" />
<link href="~/Content/Menu.css" rel="stylesheet" />
<link href="~/Content/Site.css" rel="stylesheet" />
</head>
So the Datepicker doesn't pop a calendar below the input, just a thick white line above the input.
I haven't been able to resolve this. Help?
I needed Bootstrap.Datepicker v1.7.1....
It brought in some new .css files and overwrote some of what was in the project and now the datepicker calendar is working.
I neededthe new code in bootstrap-datepicker.css . The code I had was not up to date. Also needed the new code in bootstrap-datepicker.js and bootstrap-datepicker.min.js
I deleted everything else the Package Manager brought in and everything works as intended.
I'm trying to add the daterange picker to my html file but cannot get it to show when i click on the input box. It works for datepicker, but i want it to offer to click on the range of dates. I've been struggling with these for days now and could really use some help. Extracted code is below. What am I missing?
`<!-- Include Required Prerequisites -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />
<!-- Include Date Range Picker -->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />
<input type="text" name="daterange" value="01/01/2015 - 01/31/2015" />
<script type="text/javascript">
$(function() {
$('input[name="daterange"]').daterangepicker();
});
</script>`
<input type="text" class="daterange" value="01/01/2015 - 01/31/2015" />
<script type="text/javascript">
$('.daterange').daterangepicker();
</script>
try this.. may be it will help
Actually it is working as per your code.
$(function() {
$('input[name="daterange"]').daterangepicker();
});
I have created a fiddle for you. Please check it here
https://jsfiddle.net/nonh3gr7/
Also please do check in your html file if there any script conflict or something happened?
There is nothing wrong in the code check the working sample below
Here is a working JS fiddle https://jsfiddle.net/k956L4ep/
SNIPPET
$(function() {
$('input[name="daterange"]').daterangepicker();
});
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />
<!-- Include Date Range Picker -->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />
<input type="text" name="daterange" value="01/01/2015 - 01/31/2015" />
This question already has answers here:
Uncaught ReferenceError: $ is not defined?
(40 answers)
Closed 5 years ago.
I can't use the tooltipster library along with tablesorter one as it throws an error:
Uncaught TypeError: $(...).tooltipster is not a function
And my code:
<html><head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script type="text/javascript" src="llibreries/tooltipster/dist/js/tooltipster.bundle.min.js"></script>
<link rel="stylesheet" href="css/jq.css" type="text/css" media="print, projection, screen" />
<link rel="stylesheet" href="themes/blue/style.css" type="text/css" media="print, projection, screen" />
<link rel="stylesheet" href="css/vista.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="llibreries/tooltipster/dist/css/tooltipster.bundle.min.css" />
<script type="text/javascript">
$(document).ready(function() {
$('.tooltip').tooltipster({
contentCloning: false
});
});
</script>
<script type="text/javascript" src="llibreries/jquery-latest.js"></script>
<script type="text/javascript" src="llibreries/jquery.tablesorter.js"></script>
<script type="text/javascript" src="js/docs.js"></script>
<script type="text/javascript" src="addons/pager/jquery.tablesorter.pager.js"></script>
<script type="text/javascript">
$(function()
{
$("table")
.tablesorter({widthFixed: true, widgets: ['zebra']})
.tablesorterPager({container: $("#pager")
});
});
</script></head> ....
If I comment the second script $("table").tablesorter... The tooltip script works. Otherwise, it doesn't. Can't make it work, what am I doing it wrong?
Please check the links for the CDN embedded in the header
Please check the link CDN for the Tooltipster.
This is wrong
<script type="text/javascript" src="llibreries/tooltipster/dist/js/tooltipster.bundle.min.js"></script>
<link rel="stylesheet" type="text/css" href="llibreries/tooltipster/dist/css/tooltipster.bundle.min.css" />
Try this
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/js/jquery.tooltipster.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/css/tooltipster.min.css" />
<html><head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/js/jquery.tooltipster.js"></script>
<link rel="stylesheet" href="css/jq.css" type="text/css" media="print, projection, screen" />
<link rel="stylesheet" href="themes/blue/style.css" type="text/css" media="print, projection, screen" />
<link rel="stylesheet" href="css/vista.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/css/tooltipster.min.css" />
<script type="text/javascript">
$(document).ready(function() {
$('.tooltip').tooltipster({
contentCloning: false
});
});
</script>
<script type="text/javascript" src="llibreries/jquery-latest.js"></script>
<script type="text/javascript" src="llibreries/jquery.tablesorter.js"></script>
<script type="text/javascript" src="js/docs.js"></script>
<script type="text/javascript" src="addons/pager/jquery.tablesorter.pager.js"></script>
<script type="text/javascript">
$(function()
{
$("table")
.tablesorter({widthFixed: true, widgets: ['zebra']})
.tablesorterPager({container: $("#pager")
});
});
</script></head>
<body>
</body>
</html>
$(document).ready(function() {
$('.tooltip').tooltipster({
contentCloning: false
});
});
<html><head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/js/jquery.tooltipster.js"></script>
<link rel="stylesheet" href="css/jq.css" type="text/css" media="print, projection, screen" />
<link rel="stylesheet" href="themes/blue/style.css" type="text/css" media="print, projection, screen" />
<link rel="stylesheet" href="css/vista.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/css/tooltipster.min.css" />
<script type="text/javascript" src="llibreries/jquery-latest.js"></script>
<script type="text/javascript" src="llibreries/jquery.tablesorter.js"></script>
<script type="text/javascript" src="js/docs.js"></script>
<script type="text/javascript" src="addons/pager/jquery.tablesorter.pager.js"></script>
</head>
<body>
</body>
</html>
I have a code to call kendoJS library like this:
jQuery(function(){
jQuery("#TabStrip").kendoTabStrip({
"animation":false
});
});
When I run the code, in console I found an error like this:
When I try to add kendo library:
<link href="http://localhost/CST/public/kendo/2013.1.514/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://localhost/CST/public/kendo/2013.1.514/kendo.default.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://localhost/CST/public/kendoJs/2013.1.514/kendo.all.min.js"></script>
<link href="http://localhost/CST/public/css/jquery.pnotify.default.css" rel="stylesheet" type="text/css" />
<link href="http://localhost/CST/public/css/jquery.jOrgChart.css" rel="stylesheet" type="text/css" />
<link href="http://localhost/CST/public/css/DataTable.css" rel="stylesheet" type="text/css" />
<link href="http://localhost/CST/public/css/custom.css" rel="stylesheet" type="text/css" />
<link href="http://localhost/CST/public/css/prettify.css" rel="stylesheet" type="text/css" />
<link href="http://localhost/CST/public/css/getorgchart.css" rel="stylesheet" type="text/css" />-->
<script type="text/javascript" src="http://localhost/CST/public/js/prettify.js"></script>
<script type="text/javascript" src="http://localhost/CST/public/js/data.js"></script>
<script type="text/javascript" src="http://localhost/CST/public/js/jquery.min.js"></script>
<script type="text/javascript" src="http://localhost/CST/public/js/jquery.jOrgChart.js"></script>
<script type="text/javascript" src="http://localhost/CST/public/js/jquery.jOrgChart3.js"></script>
<script type="text/javascript" src="http://localhost/CST/public/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://localhost/CST/public/js/setting.js"></script>
I found an error like this:
jQuery is not defined. Why I get an error like that?. The css and javascript in different library.
<link href="http://localhost/CST/public/kendo/2013.1.514/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://localhost/CST/public/kendo/2013.1.514/kendo.default.min.css" rel="stylesheet" type="text/css" />
***<!--jquery.min.js should be before kendo.all.min.js -->***
<script type="text/javascript" src="http://localhost/CST/public/js/jquery.min.js"></script>
<script type="text/javascript" src="http://localhost/CST/public/kendoJs/2013.1.514/kendo.all.min.js"></script>
<link href="http://localhost/CST/public/css/jquery.pnotify.default.css" rel="stylesheet" type="text/css" />
<link href="http://localhost/CST/public/css/jquery.jOrgChart.css" rel="stylesheet" type="text/css" />
<link href="http://localhost/CST/public/css/DataTable.css" rel="stylesheet" type="text/css" />
<link href="http://localhost/CST/public/css/custom.css" rel="stylesheet" type="text/css" />
<link href="http://localhost/CST/public/css/prettify.css" rel="stylesheet" type="text/css" />
<link href="http://localhost/CST/public/css/getorgchart.css" rel="stylesheet" type="text/css" />-->
<script type="text/javascript" src="http://localhost/CST/public/js/prettify.js"></script>
<script type="text/javascript" src="http://localhost/CST/public/js/data.js"></script>
<script type="text/javascript" src="http://localhost/CST/public/js/jquery.jOrgChart.js"></script>
<script type="text/javascript" src="http://localhost/CST/public/js/jquery.jOrgChart3.js"></script>
<script type="text/javascript" src="http://localhost/CST/public/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://localhost/CST/public/js/setting.js"></script>