I am using materialize in my Vue.js project I am having issues with displaying materialize's datepicker this is the code i have.
<form class="form">
...
<input type="text" class="datepicker" />
</form>
data() {
return {
date: null
};
},
mounted() {
$(document).ready(function() {
$(".datepicker").datepicker();
});
}
I am new to Vue.js so I apologize for the simplicity of my question So how do i get the datepicker to display and save it to a variable I have had the issue with materialize not displaying tabs properly also i don't know if i don't have something imported correctly. this is my html file.
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
...
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
</script>
</body>
Looks like you forgot to load Materialize after jQuery.
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
Related
I can't implement date picker from Metronic in my html website. It return me with the error of '$(…).datepicker is not a function'. I have tried adding datepicker plugin throught those below but non of them work:
<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>
or
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.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://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css"/>
My error starting at:
var demos = function () {
// minimum setup
$('#kt_datepicker_1, #kt_datepicker_1_validate').datepicker({
rtl: KTUtil.isRTL(),
todayHighlight: true,
orientation: "bottom left",
templates: arrows
});
Metronic datepicker template I use:
Metronic Keethemes datepicker
I just created the most basic TimelineView under FullCalendar:
<!DOCTYPE html>
<html lang='fr'>
<head>
<meta charset='utf-8' />
<link href='./fullcalendar/packages/core/main.css' rel='stylesheet' />
<link href='./fullcalendar/packages/timegrid/main.css' rel='stylesheet' />
<link href='./fullcalendar/packages-premium/timeline/main.css' rel='stylesheet' />
<link href="layout.css" rel="stylesheet" />
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.js'></script>
<script src='./fullcalendar/packages/core/main.js'></script>
<script src='./fullcalendar/packages/timegrid/main.js'></script>
<script src='./fullcalendar/packages/core/locales/fr.js'></script>
<script src='./fullcalendar/packages-premium/timeline/main.js'></script>
<script src='./fullcalendar/packages-premium/resource-common/main.js'></script>
<script src='./fullcalendar/packages-premium/resource-timegrid/main.js'></script>
<script src='./fullcalendar/packages-premium/resource-timeline/main.js'></script>
<script src="./jquery-3.4.1.min.js" type="text/javascript"></script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
<script>
var calendarEl = document.getElementById('calendar');
calendar = new FullCalendar.Calendar(calendarEl, {
schedulerLicenseKey:'',
plugins: ['resourceTimeline' ],
defaultView: 'resourceTimelineMonth'})
calendar.render();
</script>
The issue is that it renders a grey column in the 2nd place which I do not want
How to remove / hide this column ?
Thanks
You forgot to include the resource-timeline CSS file. I can't reproduce your problem with a standard Scheduler setup. Demo: https://codepen.io/ADyson82/pen/WNQyrzN
But if you remove that file then your problem starts to occur. Demo: https://codepen.io/ADyson82/pen/mdeKVLQ
I can also see that the relevant CSS file is missing from your code shown above. In your case I expect you need a link like this:
<link href='./fullcalendar/packages-premium/resource-timeline/main.css' rel='stylesheet' />
The FullCalendar plugin index shows what JS and CSS file (if any) is needed for each plugin to work correctly.
Is there any reason why bootstrap slider is not being recognised as a function even though the correct dependencies are there?
The jquery ui files downloaded that are present in the web app folder are customised to not contain slider widget conflict functions.
<!doctype html>
<html lang="en">
<head>
<script src="bootstrap-slider.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap-slider.css">
<script src="jquery-3.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-ui.css">
<script src="jquery-ui.js"></script>
<title>Bootstrap Slider</title>
<style>
</style>
<script>
$("#ex1").bootstrapSlider({
formatter: function(value) {
return "Current value: " + value;
}
});
</script>
</head>
<body>
<input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14" />
</body>
</html>
Please provide a jsfiddle or a screenshot of your console. If you say that you got all the dependencies (as I think your code is correct), I'm guessing you may have a problem with your paths.
I tried to add to textarea a line of the row numbers with this example:
http://alan.blog-city.com/jquerylinedtextarea.htm
this is my code and I allready use the css and js in my project:
<!DOCTYPE html>
<html>
<head>
<title>CODE</title>
<link href="jquery-linedtextarea.css" rel="stylesheet">
<script src="jquery-linedtextarea.js"></script>
</head>
<body>
<textarea class="lined" name="mytext"></textarea>
<script>
$(function () {
$(".lined").linedtextarea(
{ selectedLine: 1 }
);
$("mytext").linedtextarea();
});
</script>
</body>
</html>
what I wrong ?
It seems you forget to call Jquery Library...
Just add the code below on your <head>:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> </script>
And I believe you should delete that part:
$("mytext").linedtextarea();
I've made a code. It works for me. Check it out...
<html>
<head>
<title>JQuery LinedTextArea Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://files.aw20.net/jquery-linedtextarea/jquery-linedtextarea.js"></script>
<link href="http://files.aw20.net/jquery-linedtextarea/jquery-linedtextarea.css" type="text/css" rel="stylesheet" />
</head>
<body>
<h1>JQuery LinedTextArea Demo</h1>
<p>Add a scrollable lined area to a standard TextArea control.</p>
<textarea class="lined" rows="10" cols="60">
JavaScript was originally developed by Brendan
Eich of Netscape under the name Mocha,
which was later renamed to LiveScript,
and finally to JavaScript.
The change of name from LiveScript to JavaScript roughly
coincided with Netscape adding support for
Java technology in its Netscape Navigator
web browser.
</textarea>
<script>
$(function() {
$(".lined").linedtextarea(
{selectedLine: 1}
);
});
</script>
</body>
</html>
Here is my index.html
<html lang="en" ng-app="bootstrapDemoApp" id="top">
<head>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="styles/select2.css" rel="stylesheet"/>
<link href="styles/select2-bootstrap.css" rel="stylesheet"/>
<link href="styles/style.css" rel="stylesheet"/>
<title>Bootstrap App</title>
</head>
<body>
<div class="container-fluid" ui-view>
</div>
<hr/>
<script src="scripts/angular.js"></script>
<script src="scripts/angular-sanitize.js"></script>
<script src="scripts/angular-ui-router.min.js"></script>
<script src="scripts/ui-bootstrap-tpls-0.10.0.js"></script>
<script src="scripts/select.js"></script>
<script src="scripts/script.js"></script>
</body>
</html>
My JS Code:
var bootstrapApp = angular.module('bootstrapDemoApp', ['ui.bootstrap','ui.router','ngSanitize', 'ui.select']);
Now, when i go to my URL i get the following error:
GET http://localhost/ASC/template/tooltip/tooltip-popup.html 404 Not Found 0ms angular.js (line 7991)
I am getting this error with "accordion-group", "alerts", "buttons", and all the angularUI bootstrap directives!
I cant figure what am i doing wrong here. i have included the proper "tpls" file. And included that in my app module as well.
Please help me out!
Okay, so here's the deal... ui-bootstrap-tpls-*.js files contain the templates so that we don't have to define the templates ourseleves (though we can override the default design!). Now, these templates are stored in $templateCache. I had the following line in my script.js file:
$templateCache.removeAll();
This piece of code removed all the stored templates. Remove this line and VOILA :)