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
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.
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
})
})
<!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 am trying to use masked input to make my date look like 9999-99-99 but doesen't seem to be effecting anything. I can't tell what I am doing wrong.
<script type="text/javascript" src="http://digitalbush.com/wp-content/uploads/2013/01/jquery.maskedinput-1.3.1.min_.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
jQuery(function ($) {
$("#date").mask("9999-99-99");
});
</script>
http://jsfiddle.net/doitlikejustin/xw2je/3/
This is my input box-
<input name="date" type="text" id="date" value="<?php echo $_SESSION['date'];?>" />
You need to include jQuery script first.
The order is important, since jQuery Masked input plugin depends on jQuery. You should tell the browser to load jQuery first and then only you can work on jQuery stuff.
For example (I tested this):
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="http://digitalbush.com/wp-content/uploads/2013/01/jquery.maskedinput-1.3.1.min_.js"></script>
<script type="text/javascript">
jQuery(function ($) {
$("#date").mask("9999-99-99");
});
</script>
</head>
<body>
<input name="date" type="text" id="date" value="" />
</body>
</html>
I hope this helps.
You just need to change jquery definition order, put version jquery file first and then put plugin jquery. It will solve your problem.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="http://digitalbush.com/wp-content/uploads/2013/01/jquery.maskedinput-1.3.1.min_.js"></script>
main jquery file should place first and then the addon.It will definitely solve ur problem.
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.