For the trentrichardson timepicker addon (http://trentrichardson.com/examples/timepicker/) for datetimepicker and timepicker, it seems to work for a limited amount of time (6 hours to a day), THEN, it stops working. TO FIX THIS, I replace the addon CDN (http://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js), for the same one, and it works again.
How could this be? I put the CDN's in the correct order as well...
jQuery
jQueryUI (with datepicker and slider wigits)
Timepicker
Then CSS
P.S. I removed my main.css file and corresponding class="" from the inputs.
Once again, it works for 6 hours to a day, then stops working... with nothing changing. And I'm pretty sure the CDN's are not changing either, but they may be, but that should not matter since the file path itself is not changing. Let me know what you think, thanks! ALSO, when it stops working, I checked the file paths and they are still valid.
Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js"></script>
<link rel="stylesheet" href="http://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.css">
<script>
$(function() {
$( "#datetimepicker" ).datetimepicker();
});
$(function() {
$( "#timepicker" ).timepicker();
});
</script>
</head>
<body>
</body>
</html>
<?php
echo '<input type="text" id="datetimepicker" size="12px">';
echo '<input type="text" id="timepicker" size="2px">';
?>
Trent Richardson has explicitly started preventing hotlinks to his site as of last year:
http://trentrichardson.com/2012/09/27/no-more-hotlinking/
Your hotlinks may only work sporadically, or may not work at all.
You should use jsdeliver.com (which hosts his timepicker plugin) or find another CDN.
Related
I'm very new to website building and I'm trying to build validation into a form that employees will submit. I want to prevent them selecting dates in the future for a particular field. None of the suggested solutions I've read in the other posts have worked for me so far. Believe me I've been at this a longer that I would like to admit trying everything I could find. I would greatly appreciate some help in figuring out what I am doing wrong. Here are the sections of my code that will hopefully be enough to see what is going on.
<head>
<script>
$(document).ready(function(){
$(function(){
$("#purchasedate").datepicker({
maxDate: '0',
format: 'mm-dd-yyyy'
});
});
</script>
<script
src="https://ajax.googleapis.com/ajax/libs/
jquery/3.2.1/jquery.min.js">
</script>
</head>
<body>
<section>
<form method="post" action="#">
<p>Purchase Date</p>
<input class="purchasedate"
type="date"
name="purchaseDate"
value=""
/>
</form>
</section>
<body>
I've tried using maxDate: new Date(). I've tried it without the ready function or the function enclosing the datepicker. When previewing the page the calendar pops up to select a date but future dates are still available. Thanks for the help.
Can you try something like this :
You have to replace your script tag in the header by this one :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>Data sharemedia</title>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
</head>
<body>
<section>
<form method="post" action="#">
<p>Purchase Date</p>
<input type="text" id="datepicker">
</form>
</section>
</body>
<script>
$(document).ready(function() {
$( "#datepicker" ).datepicker({ maxDate: new Date });
});
</script>
</html>
Firstly, change the order of the scripts. Call the jquery, and any other plugins that uses this jquery after this one. Later, add your scripts. That will save you headaches.
Secondly, remove the $(function(){ line, as it's doing nothing right now. And it should be fine.
I got the jsfiddle of it right here: https://jsfiddle.net/tuk4pob3/
I just copied your code with the changes I told you and I can only select dates from past until the present day. The only thing I changed is the type of the input.
I am having a problem with the jquery-ui datepicker widget. I have a simple html file where the widget displays and functions properly.
But when I try to incorporate the widget into my project the widget displays, and does function but the days of the month are way at the bottom:
Here is a simple html mockup file that has the same problem:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<script type="text/javascript" src="javascript/jquery-1.11.2.js"></script>
<script type="text/javascript" src="javascript/jquery-ui-1.11.4.custom/jquery-ui.js"></script>
<script type="text/javascript" src="javascript/Chart.js"></script>
<script type="text/javascript" src="javascript/jRate.js"></script>
<script type="text/javascript" src="javascript/coffee-ratings.js"></script>
<script type="text/javascript" src="javascript/coffee-form.js"></script>
<script>
$(function(){
$("#datepicker").datepicker();
});
</script>
<!-- <link rel="stylesheet" type="text/css" href="javascript/jquery-ui-1.11.4.custom/jquery-ui.css"/> -->
<link rel="stylesheet" type="text/css" href="javascript/jquery-ui-1.11.4.custom/jquery-ui.structure.min.css"/>
<link rel="stylesheet" type="text/css" href="javascript/jquery-ui-1.11.4.custom/jquery-ui.theme.min.css"/>
<link rel="stylesheet" type="text/css" href="css/coffee.css"/>
<title>Create New Home Green Coffee Blend</title>
</head>
<body>
<table>
<tr><td>date: </td><td><input type="text" id="datepicker" name="date"/></td></tr>
</table>
</body>
</html>
since it works in the simple test file and not in the main project, it's not an OS thing. I've tried
doing a diff on the jquery-ui code in the test area and the main eclipse javascript folder, they are the same
adding and removing some of the different css files to see if that made a difference.
downloading a new copy of jquery-ui, copied to both folders, still got same behavior
The main app uses a new download of jquery, tried using the version that comes with jquery-ui was the same.
has to be some kind of css conflict. I did not see anything that grabbed me in firebug.
UPDATE
as I said in the comments, when I removed my main project css file, the datepicker rendered correctly. In playing around with my main css file, I was able to get the datepicker to display ok by commenting out the height in this block:
html, h1, div{
height: 100%;
padding: 0;
margin: 0;
}
but I need that in order to get the layout of the page to work.
any ideas?
thanks!
Anyone familiar with Zebra Datepicker?
I can't seem to get the calendar icon to show up.
http://jsfiddle.net/abalter/gzbqrxpL/
I'm also trying:
<!doctype html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="zebra_datepicker.js"></script>
<link rel="stylesheet" href="default.css" type="text/css">
<script>
$(document).ready(function() {
// assuming the controls you want to attach the plugin to
// have the "datepicker" class set
$('datepickertest').Zebra_DatePicker();
});
</script>
</head>
<body>
<form>
<input type="text" id="datepickertest" class="datepicker" />
</form>
</body>
</html>
With all those files local in the same directory, including calendar.png, the icon image.
In both cases the calendar icon doesn't show up.
Incidentally, I tried looking at the source of the demo page, and I don't see the scripts referred to anywhere, so that doesn't provide much guidance.
Here is a working example, based on your code: http://jsfiddle.net/gzbqrxpL/1/
You should follow their tutorial.
First, add <!doctype html> at the beginning of you html file.
Second, download the script with ALL files, including the /css folder with themes.png, calendar.png, and the folder metallic if you want to use that theme.
Third, add jquery BEFORE adding the zebra datepicker.
It should then work. Your JSFiddle was not working because you were refering the external sources to github, and github is not a CDN, so the browser was not loading.
That's it.
First of all, make sure you are correctly selecting the datepickertest. Include a "#" or "." beforehand to select id or class respectively. I think not including those selects tag elements.
Without looking specifically at Zebra-Datepicker, I know, at least, for the regular datepicker that you have to initialize some values.
$("#id").datepicker({
showOn: "button",
buttonImage: "../images/myImage.png",
buttonImageOnly: true,
...
});
Check which values you need to initialize.
I am trying to use jScrollPane, the original scrollbar disappearing and it is not working!
I already used it in another site about a month ago, and it worked well. The single problam was: The mouse wheel was not worked(Thats my second problem).
Code:
<link type="text/css" href="jScrollPane/jquery.jscrollpane.css" rel="stylesheet" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jScrollPane/jquery.mousewheel.js"></script>
<script type="text/javascript" src="jScrollPane/jquery.jscrollpane.min.js"></script>
<script type="text/javascript" src="jScrollPane/mwheelIntent.js"></script>
<script type="text/javascript">
$(function(){ $("#body").jScrollPane(); });
</script>
</head>
<body id="body">
I'm working on this same issue and have discovered a couple of things. I agree that you should use a newer version of jQuery. If you use 1.8.2, it will work. However, if you use 1.9.1, you will need to get rid of mWheelIntent.js as there is some issue with it and 1.9.1. Hope this helps someone!
The plugin needs to interact with the css file which contains basic styling of the scroll pane elements. The window.load method, loads all the assets of the page before of running the initialization script. I have used jQuery 1.9.1 for this case.
$(window).load(function(){
$(".scroll-pane").jScrollPane();
});
I hope this helps. Best regards
I'm trying to put together 2 Jquery scripts on the same page but can't get both working at the same time. There is always a bug of some sort. Could you tell me if you can do this?
All I'm looking for is a blank HTML page with 2 inputs, one with the datepicker and the other with timepickr.
I'm really not that good with javascript, so if someone could help me it would be awsome. Both links give like 2-6 files to include, js and css and I do not know which one to include so that they don't interfere with one another. I want the minimal implementation of both.
My latest try was this :
<link rel="stylesheet" href="js/jquery-ui-1.8.16.custom/development-bundle/themes/base/jquery.ui.all.css">
<link rel="Stylesheet" media="screen" href="js/ui-timepickr/src/css/ui.timepickr.css" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/ui-timepickr/page/jquery.utils.js"></script>
<script type="text/javascript" src="js/ui-timepickr/page/jquery.strings.js"></script>
<script type="text/javascript" src="js/ui-timepickr/page/jquery.anchorHandler.js"></script>
<script type="text/javascript" src="js/ui-timepickr/page/jquery.ui.all.js"></script>
<script type="text/javascript" src="js/ui-timepickr/src/ui.timepickr.js"></script>
<script src="js/jquery-ui-1.8.16.custom/development-bundle/ui/jquery.ui.core.js"></script>
<script src="js/jquery-ui-1.8.16.custom/development-bundle/ui/jquery.ui.datepicker.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
$('#ATTRIBUT_38').timepickr({
convention:24,
rangeMin: ['05','10','15','20','25','30','35','40','45','50','55'],
rangeHour24: [$.range(8, 12), $.range(12, 21)],
prefix: ['Avant-midi','Après-midi & Soirée'],
suffix: ['Avant-midi','Après-midi & Soirée']
});
});
</script>
</head>
<body>
<div class="demo">
Date: <input type="text" id="datepicker">
<input id="ATTRIBUT_38" type="text" value="02:30">
</body>
</html>
The problem with timepickr and jQuery UI exists since jQuery UI 1.8 and was reported already in April 2010. It seems there is no official bugfix yet :-( but here is a hack that might work: http://code.google.com/p/jquery-utils/issues/detail?id=48#c4
Anyway, I'd recommend to use an alternative TimePicker (e.g. as already proposed by Tim above)