as i followed the official docs of flatpickr in this link for some reason the date picker didn't appear
here is what i did
i added this in my html head:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
and this in my js file
import flatpickr from "flatpickr";
flatpickr("#myflatpickr", {});
in the html body where i have the input:
<input name="deadline" placeholder="Deadline" id="myflatpickr" required>
You can move it after the element is present in the DOM indeed as Paul T said. Or add a on document ready function to it. Couldn't reproduce the error message you've got.. Maybe just leave out the import/require part?:
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
</head>
<body>
<div><input name="deadline" placeholder="Deadline" id="myflatpickr" required></div>
<script type="text/javascript">
flatpickr("#myflatpickr", {});
</script>
</body>
</html>
Related
I want to add the datepicker function and I need it in a separate file, but it seems not to work when I put it in external file even though I linked it, I don't want to put it in the same HTML file inside a tag. How should I call it
here is what I've done
The jquery file:
$(document).ready(function() {
$("#datepicker").datepicker();
}); //enter code here
The HTML File:
<link href="Styles/StyleSheet2.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="jquery/myJS.js" type="text/javascript"></script>
<body>
<label for="Date1"> Entry Date</label>
<input id="datepicker" />
</body>
I am trying the jquery alert example on this webpage: http://www.tutorialscollection.com/jquery-demo/jquery-demo.php?ex=8.0_1. I'm new to using jquery and I can't figure out how to get the dependencies listed in the head section:
<head>
<script src="jquery.alerts.js" type="text/javascript"></script>
<link href="jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />
Here is the full file, but probably not needed:
<!DOCTYPE html>
<head>
<title>Examples of using jQuery Alerts</title>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.ui.draggable.js" type="text/javascript"></script>
<script src="jquery.alerts.js" type="text/javascript"></script>
<link href="jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />
<!-- Example script -->
<script type="text/javascript">
$(document).ready( function() {
$("#basic_button").click( function() {
jAlert('Example of a basic alert box in jquery', 'jquery basic alert box');
});
});
</script>
</head>
<body>
<p>
<input id="basic_button" type="button" value="Show Basic Alert" />
</p>
</body>
</html>
Google hosts a CDN. To make sure JQuery's libary is loaded add this into the <head> tags
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
If you are trying this on a local machine then you can download jquery here and set it up in the <head> as this:
<script src="path_to_jquery" ></script>
I found the dependencies here:
http://www.tutorialscollection.com/jquery-demo.
This serves my purposes much better than the tutorial in this question: How to generate a simple popup using jQuery
I have existing asp.net pages using bootstrap datepickers.
I need it now in a simple html page, so I copied the related link and script lines from the asp.net project into a bare minimum html file.
The datepicker never shows, and I have no idea what is wrong with it. I have looked aroud and searched the web for examples, but did not find out why it does not work.
Here's a little test file:
<html>
<head>
<title>datepicker test</title>
<link href="http://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<script>
$(document).ready(function() {
$("#datepicker").datetimepicker({
format: "dd-MMM-yyyy"
});
})
</script>
</head>
<body>
<form>
<div class="input-append date" id="datepicker">
<input size="16" type="text" value="" readonly>
<span class="add-on"><i class="icon-th"></i></span>
</div>
</form>
</body>
</html>
Please advise,
TIA,
Guido
You misspelled the function to call the datepicker. It's
$("#datepicker").datepicker({
format: "dd-MMM-yyyy"
});
And you typed 'dateTIMEpicker'
I'm trying to get a localized implementation of a date picker to work, for a while now. I first attempted doing at the application I am working on, to no avail. So I decided to create a small html page and use it on my local httpd to try and get it running and get transfer the working code to my app.
I copied all the CSS and JS files, adjusted the path and tried the implementation. The file is the following:
As you can see, it's very simple. All I want to do here is learn how to use the bootstrap-datetimepicker, so I can manipulate data for my main application.
Problem is: if I use jquery-ui's notation $('#datepicker0').datepicker(); it works. But if I try to use $('#datepicker0').datetimepicker(); from https://github.com/Eonasdan/bootstrap-datetimepicker it doesn't.
I'm pretty sure it's a very basic mistake, but I'm looking at this piece of code for a while now and can't fathom what it is...
Can someone lend me a help here?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-datetimepicker.css" />
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/beyond.min.css" />
<link rel="stylesheet" href="css/demo.min.css" />
<link rel="stylesheet" href="css/animate.min.css" />
<link rel="stylesheet" href="css/jquery-ui.css" />
<script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="js/moment/moment.js"></script>
<script type="text/javascript" src="js/moment/moment-with-locales.js"></script>
<script type="text/javascript" src="js/moment/pt-br.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$('#datepicker0').datepicker();
});
</script>
<div class="container">
<div class="row">
<div class="input-group date col-sm-3">
<input id="datepicker0" type="text" name="executionDate" class="form-control"></input>
</div>
</div>
</div>
</body>
</html>
I got it working. Solution was as simple as use the right file. How so? I was trying to download the libraries files by right clicking on it and saving it to my computer. What I got instead of the file was the html for the page. I discovered my stupidity quite by accident this morning and got the correct files, by download the zip for the library and, like in a magic trick, it started working... Thanks for your insights and hel
I am using this plugin:
https://github.com/evoluteur/colorpicker
I am stuck on this step:
Now, let's attach it to an existing <input> tag:
<script type="text/javascript">
$(document).ready(function() {
$("#mycolor").colorpicker();
});
</script>
<input style="width:100px;" id="mycolor" />
I am putting the script in the head and obviously the input is in the body. I ensured that the file paths are right and I get no error. When I go into mycolor field the color box doesn't show. I am new to JS and a bit puzzled. Not sure how to get it to work. Any ideas on what I might be doing wrong?
If you keep reading the directions on that site, it says you must also place this:
<div style="width:128px;">
<input style="width:100px;" id="mycolor" class="colorPicker evo-cp0" />
<div class="evo-colorind" style="background-color:#8db3e2"></div>
</div>
After the <input>.
Basically, the absolute minimum is this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/evol.colorpicker.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/ui-lightness/jquery-ui.css">
<link href="css/evol.colorpicker.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
$(document).ready(function() {
$("#mycolor").colorpicker();
});
</script>
<div style="width:128px;">
<input style="width:100px;" id="mycolor" class="colorPicker evo-cp0" />
<div class="evo-colorind" style="background-color:#8db3e2"></div>
</div>
Actually no, the absolute minimum is this:
<link id="jquiCSS" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/ui-lightness/jquery-ui.css" type="text/css" media="all">
<link href="css/evol.colorpicker.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/evol.colorpicker.js" type="text/javascript"></script>
<input id="mycolor" value="#000000" />
<script>
$(document).ready(function(){
$('#mycolor').colorpicker()
});
</script>
The color picker puts the extra div tags in for you. The section of the directions that #DevlshOne is referring to shows another way to initiate the colour picker by manually adding the tags yourself, but they are not needed. The instructions aren't the clearest.
You only have to ensure the prerequisites are present: JQuery, JQuery-UI, Any JQuery-UI theme (it will still show without one, but will be transparent), evol.colorpicker.js (or evol.colorpicker.min.js), evol.colorpicker.css, and are loaded before you initiate the color picker.