Issue with masked input plugin - javascript

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.

Related

Preventing Selection of Future Dates with jQuery or Java

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.

Conflict b/w datepicker and autocomplete jquery

The below code works seperately in different php page. But when combining both in one page, nothing works. In firebug, the error says,
TypeError: $(...).datepicker is not a function
$("#test1").datepicker({
CODE FOR DATEPICKER
<link rel="stylesheet" href="css/date_pick/jquery-ui.css">
<script src="css/date_pick/jquery-1.10.2.js"></script>
<script src="css/date_pick/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#test1").datepicker({
changeMonth:true,
changeYear:true,
yearRange:"-35:+0",
dateFormat:"dd/mm/yy"
});
});
</script>
<input type="text" name="test1" id="test1" />
CODE FOR AUTOCOMPLETE
<link rel="stylesheet" href="lib/js/jquery.autocomplete.css">
<script src="bootstrap/js/jquery.js"></script>
<script src="lib/js/jquery.autocomplete.js "></script>
Maybe because you have included 2 times the jQuery library.
<script src="css/date_pick/jquery-1.10.2.js"></script>
<script src="bootstrap/js/jquery.js"></script>
The jQuery library should be included once.
can you try like
<link rel="stylesheet" href="css/date_pick/jquery-ui.css">
<link rel="stylesheet" href="lib/js/jquery.autocomplete.css">
<script src="css/date_pick/jquery-1.10.2.js"></script>
<script src="css/date_pick/jquery-ui.js"></script>
<script src="lib/js/jquery.autocomplete.js "></script>
<script type="text/javascript">
$(document).ready(function(){
$("#test1").datepicker({
changeMonth:true,
changeYear:true,
yearRange:"-35:+0",
dateFormat:"dd/mm/yy"
});
});
</script>
<input type="text" name="test1" id="test1" />
but I think it would be better to use a packed version of jquery UI so that you can call one file for each jquery UI component.
Also if you are getting $.browser is undefined error, I guess one of the UI libraries is outdated because it's calling a function which is deprecated in jquery v1.10.2

Jquery script doesnt work

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>

How do I make JQuery Color Box show?

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.

Adding 2 jquery scripts in the same page... 1 on 2 work

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)

Categories