Hi can someone tell me why the following jquery mobile datepicker doesnt work as i directly copied from http://jqueryui.com/datepicker/ and the following is a screenshot of my problem. It only showed a text field for the datepicker. Initially i thought it was a browser issue but it works on none of the browser and also including the phonegap platform i am currently using.Example of the problem
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
Your code works! I think that the problem is another one:
From http://demos.jquerymobile.com/1.4.1/datepicker/
You have Popup Datepicker
<input type="text" data-role="date">
and Inline Datepicker
<input type="text" data-role="date" data-inline="true">
The Popup does not always position well for use on small screens and mobile devices there for the wrapper adds an inline option this option makes the calendar for the datepicker show up inline after the input which it is called on avoiding the issues related to popups.
Documentation about Datepicker widget: http://api.jqueryui.com/datepicker/
Information and support on the jQuery Mobile Wrapper: https://github.com/arschmitz/jquery-mobile-datepicker-wrapper
For more information about datepicker inline and how to use it take a look at this question: Combine inline jquery datepicker with an input field? that explain how to use:
$(function(){
$( "#datepicker" ).datepicker({
inline: true
})
})
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.
<!DOCTYPE html>
<html>
<body>
<form>
Birthday: <input type="date" id="datepicker">
<input type="submit">
</form>
</body>
</html>
I want to pick date from the calender. I have used Date input from HTML5
this code is working fine in IE and Chrome
and not working in Mozilla
please help me to fix the code
The HTML element is a specific version of the element used to create an input field accepting a date.
Browsers generate a control for entering, and changing, the date. This date includes a year, month and day. The control itself varies from one browser to another; browsers not supporting this type will display a simple text control.
Read more
use datetime picker jquery plugin will be a good option
Read this
or try this code :-
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
I'm using JQuery Mobile with it's mobile themed datepicker plugin. Here is the relevant code, as per JQuery Mobile Datepicker demo, that works just as expected:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.4.5.min.css"/>
<link rel="stylesheet" href="jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="style.css"/>
<link rel="stylesheet" href="jquery.mobile.datepicker.css"/>
<script src="jquery-1.11.3.min.js"></script>
<script>
//reset type=date inputs to text
$( document ).bind( "mobileinit", function(){
$.mobile.page.prototype.options.degradeInputs.date = true;
});
</script>
<script src="jquery.mobile-1.4.5.min.js"></script>
<script src="jquery.ui.datepicker.js"></script>
<script id="mobile-datepicker" src="jquery.mobile.datepicker.js"></script>
</head>
<body>
<input id="servicedate" name="servicedate" data-role="date" type="text" />
</body>
Above produces properly styled mobile datepicker tied to "servicedate" input like this.
Now, any attempt to interact with datepicker, like dynamically changing any of the options, causes it to lose its mobile style. To the bottom of body, I add a:
<script>
$("#servicedate").datepicker({ dateFormat: "DD, MM dd yy", });
</script>
... and it now, while option does work, produces rather unpleasant looking, un-themed datepicker like this.
Any help/guidance with what I am doing wrong would be appreciated. Thanks.
You need to add a reference to jqueryUI.css to your header
Something like this:
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
I would prefer to not have to do this but its the only way I got it to work.
(edited)
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.
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.