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.
Related
I have created custom form for drupal 8 site and taken date type field. i want to disable dates after got selected like booked some slot types. i have seen so many codes which uses .datepicker(). but when i use this code it shows two calenders. i want to use jQuery for it. please give some suggestions
Thankyou
use the below code to disable the date field after selecting the date using jQuery. Hope the following code can help you.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script>
$(document).ready(function(){
$(function() {
$('#datepicker').datepicker( {
onSelect: function() {
$('#datepicker').attr('disabled','disabled');
}
});
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" ></p>
</body>
</html>
Here is the reference
<!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 newbie with jQuery and I my facing the following problem.
I'm trying to use a mask, but the script doesn't work. At all.
The code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/jquery.maskedinput.js" type="text/javascript"></script>
<script>
$( document ).ready(function() {
$("#date").mask("99/99/9999",{placeholder:"mm/dd/yyyy"});
$("#phone").mask("(999) 999-9999");
$("#tin").mask("99-9999999");
$("#ssn").mask("999-99-9999");
});
</script>
</head>
<body>
<input type="text" id="date">
<input type="text" id="phone">
<input type="text" id="tin">
<input type="text" id="ssn">
</body>
</html>
What's wrong?
I'm using the plugin from this site: http://digitalbush.com/projects/masked-input-plugin/
I checked the code. And I used this latest jQuery Mask Plugin. It works.
Here are some examples , they might help.
Only change I did is
<script src="jquery.mask.min.js" type="text/javascript"></script>
You may have put your files in wrong location.
You can check those using the built in inspect element functionality (right click and you can see it) in Google chrome. If the console indicate missing .js files you can correct them.
There are ways for other browser to check those also.
It looks like maskedinput.js either not be found or there is something wrong in this script
change from
<script src="js/jquery.maskedinput.js" type="text/javascript"></script>
to
<script src="http://digitalbush.com/wp-content/uploads/2013/01/jquery.maskedinput-1.3.1.min_.js" type="text/javascript"></script>
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.
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)