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'
Related
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>
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 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.
I have a script for dynamic javascript date picker, taken from here. Please scroll down to Toggle by Element which i want to implement but it is not working
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<SCRIPT type="text/javascript" src="js/jquery.min.js"></SCRIPT>
edit: i added the following mootools script
<script src='http://cdnjs.cloudflare.com/ajax/libs/mootools/1.3.2/mootools-yui-
compressed.js'
type='text/javascript'></script>
<SCRIPT type="text/javascript" src="datepicker.js"></SCRIPT>
<SCRIPT type="text/css" src="datepicker.css"></SCRIPT>
<SCRIPT type="text/css" src="datepicker_vista.css"></SCRIPT>
</head>
<body>
<script language="JavaScript">
window.addEvent('load', function() {
new DatePicker('.demo_allow_empty', {
pickerClass: 'datepicker_dashboard',
allowEmpty: true
});
});
</script>
<label>Datepicker starting at and allowing no value:</label>
<input name='date_allow_empty' type='text' value='' class='date demo_allow_empty' />
</body>
</html>
what i am missing?
It seems it require mootools, i cant see any mootools script tag in your source.
it has nothing to do with jQuery.
edit : here is an exemple :
<script src='http://cdnjs.cloudflare.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js'
type='text/javascript'></script>
put it before the date picker script