I have 2 datepickers in my web page and somehow one continue the other. I want them to work differently. Maybe its because of the object dateText but don't know how to clean it.
There are two scripts calling the same class
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.10.3.custom.css">
<script src="js/jquery.datepicker.extension.range.min.js"></script>
<script>
$(function() {
$('#date_range').datepicker({
range: 'multiple',
onSelect: function(dateText, inst, extensionRange) {
$('#dataF').val(extensionRange.datesText.join(','));
$('#date_range').val('DATA');
$('#datepicker').datepicker('selected','');
}
});
});
$("#date_range2").click(function(){
$('#date_range2').val(" ").datepicker({startDate: "+7d"});
});
</script>
<script>
$(function() {
$('#date_range2').datepicker({
range: 'multiple',
onSelect: function(dateText, inst, extensionRange) {
$('#dataS').val(extensionRange.datesText.join(','));
$('#date_range2').val('TILL');
}
});
});
</script>
Then I have
<input id="date_range" value="DATA:" />
<input name="dataF" id="dataF" type="text" size="50" />
<input id="date_range2" value="TILL:" />
<input name="dataS" id="dataS" type="text" size="50" />
Just try this sollution
example link http://jsfiddle.net/fMD62/
<input type="text" id="datepicker1" name="datepicker1" value="" />
<input type="text" id="datepicker2" name="datepicker2" value="" />
$(function() {
$("#datepicker1").datepicker();
$("#datepicker2").datepicker();
});
Related
When I don't use the Jquery Plugin it works but when I use it, it does not work. I have researched for a solution and am yet to solve it.
The HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="en-gb" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Place Advert</title>
<link rel="stylesheet" href="test/css/style.css" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<link href="runnable.css" rel="stylesheet" />
<!-- Load jQuery and the validate plugin -->
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="/resources/demos/style.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>
<style type="text/css">
.auto-style1 {
text-align: center;
}
.auto-style2 {
border-style: solid;
border-width: 1px;
padding: 1px 4px;
text-align: center;
}
</style>
</head>
<body>
<h1 class="auto-style1"> </h1>
<h1 class="auto-style1">Sign Up</h1>
<form action="" method="post" id="register-form" novalidate="novalidate">
<div class="auto-style1" style="height: 67px">
<br />
I am looking to<br />
<br />
<select name="AdvertType" id='purpose'>
<option id="AccountType" selected="selected" value="Buy">Buy</option>
<option id="AccountType" value="Sell">Sell</option>
</select>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
<div id="layer4" style="position: absolute; width: 750px; height: 366px; z-index: 4; left: 25%; top: 150px" class="auto-style2">
<br />
<br />
Enter In A Produce Name:
<input name="ProduceName" type="text" />
Enter In A Produce Category:
<input name="ProduceCategory" type="text" />
<br />
<br />
Enter In A Headline:
<input name="ProduceHeadline" type="text" id="EmailAddress" style="width: 290px" />
<br />
<br />
Buy/Sell Price (Per KG):
<input name="Price" type="text" id="BusinessName" style="width: 40px" />
Quantity Wanted/Avaliable:
<input name="Weight" type="text" style="width: 40px" />
KG
<br />
<div id='business'>
<br />
From
<input name="From" type="text" id="txtFromDate" />
To
<input name="To" type="text" id="txtToDate" />
<br />
</div>
<br />
<span lang="en-gb">
<textarea class="auto-style3" name="ProduceTags" rows="2" style="width: 547px" cols="20" id="word_count"></textarea>
<br />
<br />
Total word count: <span id="display_count">0</span> words. Words left: <span id="word_left">5</span>
<br />
<br />
<input name="Register" type="submit" value="Register" onclick="getwords()" />
</form>
<div id="layer7" style="position: absolute; width: 100px; height: 100px; z-index: 7; top: 680px; width: 100%; height: 40px" class="auto-style1">
<br />
Designed by Rajan Flora
</div>
</body>
</html>
The Java Script Code:
I have added the rules for the form, they worked fine before I added the Jquery Date Plugin. The form validation does not work when the Date Plugin was added. After doing further research online I can still not overcome the the issue and require assistance.
<script>
jQuery.validator.addMethod("lettersonly", function (value, element) {
return this.optional(element) || /^[a-z]+$/i.test(value);
}, "Please only enter Characters");
jQuery.validator.addMethod("spaceAllowed", function (value, element) {
return this.optional(element) || /^[a-z , (" ")]+$/i.test(value);
}, "Please only enter Characters");
jQuery.validator.addMethod("numbersonly", function (value, element) {
return this.optional(element) || /^[0-9]+$/i.test(value);
}, "Please only enter Numbers");
jQuery.validator.addMethod("postcode1", function (value, element) {
return this.optional(element) || /^[A-Z]+[A-Z]+[0-9]+$/i.test(value);
}, "Please enter a valid UK postcode and ensure there are no spaces");
</script>
<script>
// When the browser is ready...
$(function () {
// Setup form validation on the #register-form element
$("#register-form").validate({
// Specify the validation rules
rules: {
ProduceName: {
required: true,
},
ProduceCategory: {
required: true,
},
ProduceHeadline: {
required: true,
},
},
// Specify the validation error messages
messages: {
},
submitHandler: function (form) {
form.submit();
}
});
});
</script>
<script>
$(document).ready(function () {
$("#txtFromDate").datepicker({
numberOfMonths: 2,
onSelect: function (selected) {
$("#txtToDate").datepicker("option", "minDate", selected)
}
});
$("#txtToDate").datepicker({
numberOfMonths: 2,
onSelect: function (selected) {
$("#txtFromDate").datepicker("option", "maxDate", selected)
}
});
});
</script>
The reason it do not work is because you include jQuery many times on the page.
Usually you only include one version of jQuery on the page.
I have removed all but one in your example and then in started to work.
The datepicker logic seemed ok.
$("#txtFromDate").datepicker({
numberOfMonths: 2,
onSelect: function (selected) {
$("#txtToDate").datepicker("option", "minDate", selected)
}
});
$("#txtToDate").datepicker({
numberOfMonths: 2,
onSelect: function (selected) {
$("#txtFromDate").datepicker("option", "maxDate", selected)
}
});
modified jsfiddle
In my HTML page I use the Live Validation library
My problem however is when I input a correct value, the library shows 'Does not match!' and when I clear all input, it validates correctly. This is my code example:
<script type="text/javascript" src="resources/jquery/livevalidation.js"></script>
<p>
<label for="password">Password</label>
<form:password id="password" path="password" tabindex="4" />
</p>
<p>
<label for="password">Confirm Password</label>
<form:password id="conformPassword" path="conformPassword" tabindex="5" />
</p>
-----
<script>
$(document).ready(function(){
ValidCaptcha();
});
</script>
<script type="text/javascript">
function ValidCaptcha() {
var password1 = new LiveValidation('conformPassword');
password1.add( Validate.Confirmation, { match: 'password' } );
}
</script>
What goes wrong here?
I made this example based on your code....it's working btw:
<html>
<head>
<script type="text/javascript" src="http://livevalidation.com/javascripts/src/1.3/livevalidation_standalone.compressed.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
function ValidCaptcha() {
var password1 = new LiveValidation('conformPassword');
password1.add( Validate.Confirmation, { match: 'password' } );
}
$(document).ready(function() {
ValidCaptcha();
});
</script>
</head>
<body >
<p>
<label for="password">Password</label>
<input type="password" id="password" tabindex="4" />
</p>
<p>
<label for="password">Confirm Password</label>
<input type="password" id="conformPassword" tabindex="5" />
</p>
-----
</body>
</html>
Tested on my localhost; i switch the order of the javascript.
Saludos ;)
I am using a timepicker to select the time with an interval of 15 minutes. I use the timepicker from this link.
I am unable to add the timepicker to the input text field using the onclick function. Here is some sample code of what I am trying to achieve. Please help me solve this issue.
index.html
<link rel="stylesheet" href="include/jquery-ui-1.8.14.custom.css" type="text/css" />
<link rel="stylesheet" href="jquery.ui.timepicker.css?v=0.3.0" type="text/css" />
<script type="text/javascript" src="include/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="include/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="jquery.ui.timepicker.js?v=0.3.0"></script>
<style type="text/css">
.st{}
.et{}
#bod { font-size: small; margin:0px 0px 0px 0px; }
body{font-size:10px;}
......
<div id="bod">
<input type="text" id="timepicker_start1" value="" class="st"/>
<input type="text" id="timepicker_end1" value="" class="et"/>
</div>
<input type="button" id="Add" name="Add" value="Add" onClick="add()" />
<input type="hidden" id="tot" name="tot" value="1"/>
...
The javascript part of the page is:
<script type="text/javascript">
function add(){
var tot=document.getElementById("tot").value;
tot=parseInt(tot,10);
var i=tot+1;
$('#bod').append(i+". ");
var s=$('<input/>').attr({type:'text',id:'timepicker_start'+i}).addClass('st').appendTo("#bod");
var s1=$('<input/>').attr({type:'text',id:'timepicker_end'+i}).addClass('et').appendTo("#bod");
$('#bod').append(" ");
$('#timepicker_start'+i).timpicker({showLeadingZero: true, defaultTime: '', minutes:{interval:15}});
$('#timepicker_end'+i).timpicker({showLeadingZero: true, defaultTime: '', minutes:{interval:15}});
document.getElementById("tot").value=i;
}
$(document).ready(function(e) {
$('#timepicker_start1').timpicker({showLeadingZero: true, defaultTime: '', minutes:{interval:15}});
$('#timepicker_end1').timpicker({showLeadingZero: true, defaultTime: '', minutes:{interval:15}});
});
</script>
You got a typo: it's timepicker not timpicker.
Other than that you're good - the script is working - http://jsfiddle.net/FNww8/
my jquery calendar pop up no longer works now that I added javascript to add multiple pictures. I'm new to javascript and jquery. Any help would be appreciated.
I'm trying to make a webform that I can select the dates then attach multiple pictures below that. I just had the picture link input field as a placeholder until I get a process working to take the pictures and upload them.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>newRecord</title>
<style type="text/css">
div.ui-datepicker{
font-size:10px;
}
</style>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script> $(function() { $( "#datepicker" ).datepicker({changeMonth: true, changeYear: true}) });</script>
<script> $(function() { $( "#datepicker2" ).datepicker({changeMonth: true, changeYear: true}) });</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#btnAdd').click(function() {
var num = $('.clonedInput').length;
var newNum = new Number(num + 1);
var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);
newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);
$('#input' + num).after(newElem);
$('#btnDel').attr('disabled','');
if (newNum == 50)
$('#btnAdd').attr('disabled','disabled');
});
$('#btnDel').click(function() {
var num = $('.clonedInput').length;
$('#input' + num).remove();
$('#btnAdd').attr('disabled','');
if (num-1 == 1)
$('#btnDel').attr('disabled','disabled');
});
$('#btnDel').attr('disabled','disabled');
});
</script>
</head>
<body>
<form action="insert.php" method="post">
ID: <input name="ID" type="text"><br>
serial_number: <input name="serial_number" type="text"><br>
desc: <input name="desc" type="text"><br>
dmg: <input name="dmg" type="text"><br>
dmg_desc: <input name="dmg_desc" type="text"><br>
pic_link: <input name="pic_link" type="text"><br>
creation_date:<input type="text" name="creation_date" id="datepicker" value="" /><br>
created_by: <input name="created_by" type="text"><br>
last_update_date:<input type="text" name="last_update_date" id="datepicker2" value="" /><br>
last_update_by: <input name="last_update_by" type="text"><br>
<div id="input1" style="margin-bottom:4px;"class="clonedInput">
Picture Upload: <input type="file" name="name1" id="name1" />
</div>
<div>
<input type="button" id="btnAdd" value="add another picture" />
<input type="button" id="btnDel" value="remove picture" />
</div>
<input type="submit">
<br><br><br>
Go to All results of table!
</form>
</body>
Remove
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">
From your code, but keep
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
I cant get jquery's date picker to work on my page. I have a forum post on codecall if anyone wants more details. Here's a link http://forum.codecall.net/topic/70462-copy-and-paste-date-picker-javascipt/. Here's my code that is associated with this page. When I click the text fields the datepicker doesn't show up. Why? Can anyone see the problem?
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.21.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
$(function() {
$( "#start_date" ).datepicker();
});
$(function() {
$( "#end_date" ).datepicker();
});
<div id="dateField">
<p>
Start Date: <input type="TEXT"
name="start_date" id="startDate"
value="" />
</p>
<p>
End Date: <input type="TEXT"
name="end_date" id="endDate"
value="" />
</p>
<small>Dates Should be in the format DD/MM/YYYY</small>
</p>
</div>
Switch your Id and name tags around. An ID attribute has to be inside of the $('ID').datepicker() , not name.
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.21.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript">
$(function() {
$( "#start_date" ).datepicker();
});
$(function() {
$( "#end_date" ).datepicker();
});
</script>
<div id="dateField">
<p>
Start Date: <input type="TEXT"
id="start_date" name="startDate"
value="" />
</p>
<p>
End Date: <input type="TEXT"
id="end_date" name="endDate"
value="" />
</p>
<small>Dates Should be in the format DD/MM/YYYY</small>
</p>
</div>
Wrap your jQuery UI datepicker code in a <script> tag, and mark it as javascript with the type attribute. Use a single document ready block for your two datepicker calls. Ensure you're using the correct IDs of your elements.
<script type="text/javascript">
$(document).ready(function() {
$("#startDate").datepicker();
$("#endDate").datepicker();
});
</script>