jquery ui datepicker doesn't work on google Chrome
The jquery datepicker widget works on Firefox and IE but not on Google Chrome. All I get is the Chrome native datepicker, which is not customizable. Is there a way to resolve this issue?
Thanks!
Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Pancake Pavillion Application</title>
<link rel="stylesheet" type="text/css" href="pplcss.css" />
<script type="text/javascript" src=" http://ajax.googleapis.com/ajax/libs/jquery/1.11.4/jquery.min.js"></script>
<script type="text/javascript" src=" http://malsup.github.io/jquery.cycle.all.js"></script>
<script type="text/javascript" src="ppljs.js"></script>
<script type="text/javascript">
var datefield=document.createElement("input")
datefield.setAttribute("type", "date")
if (datefield.type!="date"){ //if browser doesn't support input type="date", load files for jQuery UI Date Picker
document.write('<link href=" http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/blitzer/jquery-ui.css" rel="stylesheet" type="text/css" />\n')
document.write('<script src=" http://ajax.googleapis.com/ajax/libs/jquery/1.11.4/jquery.min.js"><\/script>\n')
document.write('<script src=" http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"><\/script>\n')
}
</script>
<script>
if (datefield.type!="date"){
jQuery(function($){
$('#ApplDate').datepicker({minDate: 0});
$('#FundDate, #AltDate').datepicker({minDate: 1});
})
}
</script>
</head>
<body>
<div id="wrapper">
<a id="Top"></a>
<div id="content-container">
<div id="header">
<div id="banner">
<img src="Images/PPL-Original-logo-2.png" alt="PPL Original Logo 2"/>
</div>
</div>
<?php
if(isset($_POST["submit"])){
$to = "myemail";
$email_subject = "Pancake Pavillion Application";
$message .= $_POST['OrgName'] . "\r\n\r\n";
$message .= $_POST['RespPartyName'] . "\r\n\r\n";
$message .= $_POST['ApplDate'] . "\r\n\r\n";
$message .= $_POST['Address'] . "\r\n\r\n";
$message .= $_POST['City'] . "\r\n\r\n";
$message .= $_POST['State'] . "\r\n\r\n";
$message .= $_POST['ZipCode'] . "\r\n\r\n";
$message .= $_POST['HomePhone'] . "\r\n\r\n";
$message .= $_POST['CellPhone'] . "\r\n\r\n";
$message .= $_POST['Email'] . "\r\n\r\n";
$message .= $_POST['AltName'] . "\r\n\r\n";
$message .= $_POST['AltPhone'] . "\r\n\r\n";
$message .= $_POST['Fund'] . "\r\n\r\n";
$message .= $_POST['FundDate'] . "\r\n\r\n";
$message .= $_POST['AltDate'];
mail($to, $email_subject, $message);
echo "<p class='phpmsg'>Thank you! Your application has been submitted successfully!</p>";
}
?>
<p class="center"><a href="index.html" title="Return to the Library's Home Page">Home Page</a></p>
<div id="pancake">
<form id="application" method="post" onsubmit="return validateForm()" onsubmit="return validateForm()" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<fieldset>
<legend>Pancake Pavillion Application for Pancake Breakfast</legend>
<p class="indicates-required"><span class="asterisk">*</span> Indicates a Required Field</p>
<table class="labinp">
<th colspan="3">
<tr>
<td><label for='OrgName'>Name of Non-profit Organization<span class="asterisk">* </span></label><input type="text" id="OrgName" name="OrgName" required/></td>
<td><label for='RespPartyName'>Name of Responsible Party<span class="asterisk">* </span></label><input type="text" id="RespPartyName" name="RespPartyName" required/></td>
<td><label for='ApplDate'>Application Date<span class="asterisk">* </span></label><input type="date" id="ApplDate" name="ApplDate" required/></td>
</tr>
</th>
<th colspan="2">
<tr>
<td><label for='Address'>Address<span class="asterisk">* </span></label><input type="text" id="Address" name="Address" required/></td>
<td><label for='City'>City<span class="asterisk">* </span></label><input type="text" id="City" name="City" required/></td>
</tr>
</th>
<th colspan="2">
<tr>
<td><label for='State'>State<span class="asterisk">* </span></label><input type="text" id="State" name="State" required/></td>
<td><label for='ZipCode'>Zip Code<span class="asterisk">* </span></label><input type="text" id="ZipCode" name="ZipCode" required/></td>
</tr>
</th>
<th colspan="3">
<tr>
<td><label for='HomePhone'>Home Phone<span class="asterisk">* </span></label><input type="text" id="HomePhone" name="HomePhone" required/></td>
<td><label for='CellPhone'>Cell Phone<span class="asterisk">* </span></label><input type="text" id="CellPhone" name="CellPhone" required/></td>
<td><label for='Email'>Email Address<span class="asterisk">* </span></label><input type="email" id="Email" name="Email" required/></td>
</tr>
</th>
<th colspan="2">
<tr>
<td><label for='AltName'>Alternative Name<span class="asterisk">* </span></label><input type="text" id="AltName" name="AltName" required/></td>
<td><label for='AltPhone'>Alternative Phone<span class="asterisk">* </span></label><input type="text" id="AltPhone" name="AltPhone" required/></td>
</tr>
</th>
<th colspan="3">
<tr>
<td><label for='Fund'>Type of Fundraiser<span class="asterisk">* </span></label><input type="text" id="Fund" name="Fund" required/></td>
<td><label for='FundDate'>Fundraiser Date<span class="asterisk">* </span></label><input type="date" id="FundDate" name="FundDate" required/></td>
<td><label for='AltDate'>Alternative Date<span class="asterisk">* </span></label><input type="date" id="AltDate" name="AltDate" required/></td>
</tr>
<th>
</table>
<table class="subcl">
<tr>
<td><input id="send" name="submit" type="submit" value="Submit"></td>
<td><input id="clear" name="clear form" type="reset" value="Clear Form"></td>
</tr>
</table>
</div>
</form>
</div>
<script>
function replaceValidationUI( form ) {
// Suppress the default bubbles
form.addEventListener( "invalid", function( event ) {
event.preventDefault();
}, true );
// Support Safari, iOS Safari, and the Android browser—each of which do not prevent
// form submissions by default
form.addEventListener( "submit", function( event ) {
if ( !this.checkValidity() ) {
event.preventDefault();
}
});
var submitButton = form.querySelector( "button:not([type=button]), input[type=submit]" );
submitButton.addEventListener( "click", function( event ) {
var invalidFields = form.querySelectorAll( ":invalid" ),
errorMessages = form.querySelectorAll( ".error-message" ),
parent;
// Remove any existing messages
for ( var i = 0; i < errorMessages.length; i++ ) {
errorMessages[ i ].parentNode.removeChild( errorMessages[ i ] );
}
for ( var i = 0; i < invalidFields.length; i++ ) {
parent = invalidFields[ i ].parentNode;
parent.insertAdjacentHTML( "beforeend", "<div class='error-message'>" +
invalidFields[ i ].validationMessage +
"</div>" );
}
// If there are errors, give focus to the first invalid field
if ( invalidFields.length > 0 ) {
invalidFields[ 0 ].focus();
}
});
}
// Replace the validation UI for all forms
var forms = document.querySelectorAll( "form" );
for ( var i = 0; i < forms.length; i++ ) {
replaceValidationUI( forms[ i ] );
}
</script>
<p class="right2"><a href="#Top" title="Return to the Top">Return to the Top</a></p>
<p class="title">Please Note</p>
<p class="notes">There are three menu options available. The reservation fee is determined by menu selection.</p>
<p class="notes">Ticket prices are set by the organization holding the fundraiser. All proceeds go to the organization.</p>
<p class="notes">The Pontiac Pancake Breakfast Operator/s will notify organizations of confirmation of reservation.</p>
<p class="title">Hold Harmless</p>
<p class="disclosure">The granting of this reservation will in no way make Pontiac Public Library liable for any occurrence,
damage, claim or loss, which may occur in connection with the use of the Pancake Pavillion. This agreement is made upon the
express condition that Pontiac Public Library, its agents or employees, or third parties, from any cause or causes wahtsoever,
while in or upon said premises or any part thereof during the term of this agreement, occasioned by any occupancy or use of
said premises, or any activity carried on by the reservation holder in connection herewith and the reservation holder hereby
covenants and agrees to indemnify, defend, save, and hold harmless the Pontiac Public Library, its agents, and employees from
all liabilities, charges, expenses, and costs on account of or by reason of any such injuries, deaths, liabilities, claims,
suits, or losses, however occuring or damages growing out of the same.</p>
<p class="right2"><a href="#Top" title="Return to the Top">Return to the Top</a></p>
</div>
</div>
</body>
</html>
Thanks!
Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Pancake Pavillion Application</title>
<link rel="stylesheet" type="text/css" href="pplcss.css" />
<script type="text/javascript" src=" http://ajax.googleapis.com/ajax/libs/jquery/1.11.4/jquery.min.js"></script>
<script type="text/javascript" src=" http://malsup.github.io/jquery.cycle.all.js"></script>
<script type="text/javascript" src="ppljs.js"></script>
<script type="text/javascript">
var datefield=document.createElement("input")
datefield.setAttribute("type", "date")
if (datefield.type!="date"){ //if browser doesn't support input type="date", load files for jQuery UI Date Picker
document.write('<link href=" http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/blitzer/jquery-ui.css" rel="stylesheet" type="text/css" />\n')
document.write('<script src=" http://ajax.googleapis.com/ajax/libs/jquery/1.11.4/jquery.min.js"><\/script>\n')
document.write('<script src=" http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"><\/script>\n')
}
</script>
<script>
if (datefield.type!="date"){
jQuery(function($){
$('#ApplDate').datepicker({minDate: 0});
$('#FundDate, #AltDate').datepicker({minDate: 1});
})
}
</script>
</head>
<body>
<div id="wrapper">
<a id="Top"></a>
<div id="content-container">
<div id="header">
<div id="banner">
<img src="Images/PPL-Original-logo-2.png" alt="PPL Original Logo 2"/>
</div>
</div>
<?php
if(isset($_POST["submit"])){
$to = "myemail";
$email_subject = "Pancake Pavillion Application";
$message .= $_POST['OrgName'] . "\r\n\r\n";
$message .= $_POST['RespPartyName'] . "\r\n\r\n";
$message .= $_POST['ApplDate'] . "\r\n\r\n";
$message .= $_POST['Address'] . "\r\n\r\n";
$message .= $_POST['City'] . "\r\n\r\n";
$message .= $_POST['State'] . "\r\n\r\n";
$message .= $_POST['ZipCode'] . "\r\n\r\n";
$message .= $_POST['HomePhone'] . "\r\n\r\n";
$message .= $_POST['CellPhone'] . "\r\n\r\n";
$message .= $_POST['Email'] . "\r\n\r\n";
$message .= $_POST['AltName'] . "\r\n\r\n";
$message .= $_POST['AltPhone'] . "\r\n\r\n";
$message .= $_POST['Fund'] . "\r\n\r\n";
$message .= $_POST['FundDate'] . "\r\n\r\n";
$message .= $_POST['AltDate'];
mail($to, $email_subject, $message);
echo "<p class='phpmsg'>Thank you! Your application has been submitted successfully!</p>";
}
?>
<p class="center"><a href="index.html" title="Return to the Library's Home Page">Home Page</a></p>
<div id="pancake">
<form id="application" method="post" onsubmit="return validateForm()" onsubmit="return validateForm()" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<fieldset>
<legend>Pancake Pavillion Application for Pancake Breakfast</legend>
<p class="indicates-required"><span class="asterisk">*</span> Indicates a Required Field</p>
<table class="labinp">
<th colspan="3">
<tr>
<td><label for='OrgName'>Name of Non-profit Organization<span class="asterisk">* </span></label><input type="text" id="OrgName" name="OrgName" required/></td>
<td><label for='RespPartyName'>Name of Responsible Party<span class="asterisk">* </span></label><input type="text" id="RespPartyName" name="RespPartyName" required/></td>
<td><label for='ApplDate'>Application Date<span class="asterisk">* </span></label><input type="date" id="ApplDate" name="ApplDate" required/></td>
</tr>
</th>
<th colspan="2">
<tr>
<td><label for='Address'>Address<span class="asterisk">* </span></label><input type="text" id="Address" name="Address" required/></td>
<td><label for='City'>City<span class="asterisk">* </span></label><input type="text" id="City" name="City" required/></td>
</tr>
</th>
<th colspan="2">
<tr>
<td><label for='State'>State<span class="asterisk">* </span></label><input type="text" id="State" name="State" required/></td>
<td><label for='ZipCode'>Zip Code<span class="asterisk">* </span></label><input type="text" id="ZipCode" name="ZipCode" required/></td>
</tr>
</th>
<th colspan="3">
<tr>
<td><label for='HomePhone'>Home Phone<span class="asterisk">* </span></label><input type="text" id="HomePhone" name="HomePhone" required/></td>
<td><label for='CellPhone'>Cell Phone<span class="asterisk">* </span></label><input type="text" id="CellPhone" name="CellPhone" required/></td>
<td><label for='Email'>Email Address<span class="asterisk">* </span></label><input type="email" id="Email" name="Email" required/></td>
</tr>
</th>
<th colspan="2">
<tr>
<td><label for='AltName'>Alternative Name<span class="asterisk">* </span></label><input type="text" id="AltName" name="AltName" required/></td>
<td><label for='AltPhone'>Alternative Phone<span class="asterisk">* </span></label><input type="text" id="AltPhone" name="AltPhone" required/></td>
</tr>
</th>
<th colspan="3">
<tr>
<td><label for='Fund'>Type of Fundraiser<span class="asterisk">* </span></label><input type="text" id="Fund" name="Fund" required/></td>
<td><label for='FundDate'>Fundraiser Date<span class="asterisk">* </span></label><input type="date" id="FundDate" name="FundDate" required/></td>
<td><label for='AltDate'>Alternative Date<span class="asterisk">* </span></label><input type="date" id="AltDate" name="AltDate" required/></td>
</tr>
<th>
</table>
<table class="subcl">
<tr>
<td><input id="send" name="submit" type="submit" value="Submit"></td>
<td><input id="clear" name="clear form" type="reset" value="Clear Form"></td>
</tr>
</table>
</div>
</form>
</div>
<script>
function replaceValidationUI( form ) {
// Suppress the default bubbles
form.addEventListener( "invalid", function( event ) {
event.preventDefault();
}, true );
// Support Safari, iOS Safari, and the Android browser—each of which do not prevent
// form submissions by default
form.addEventListener( "submit", function( event ) {
if ( !this.checkValidity() ) {
event.preventDefault();
}
});
var submitButton = form.querySelector( "button:not([type=button]), input[type=submit]" );
submitButton.addEventListener( "click", function( event ) {
var invalidFields = form.querySelectorAll( ":invalid" ),
errorMessages = form.querySelectorAll( ".error-message" ),
parent;
// Remove any existing messages
for ( var i = 0; i < errorMessages.length; i++ ) {
errorMessages[ i ].parentNode.removeChild( errorMessages[ i ] );
}
for ( var i = 0; i < invalidFields.length; i++ ) {
parent = invalidFields[ i ].parentNode;
parent.insertAdjacentHTML( "beforeend", "<div class='error-message'>" +
invalidFields[ i ].validationMessage +
"</div>" );
}
// If there are errors, give focus to the first invalid field
if ( invalidFields.length > 0 ) {
invalidFields[ 0 ].focus();
}
});
}
// Replace the validation UI for all forms
var forms = document.querySelectorAll( "form" );
for ( var i = 0; i < forms.length; i++ ) {
replaceValidationUI( forms[ i ] );
}
</script>
<p class="right2"><a href="#Top" title="Return to the Top">Return to the Top</a></p>
<p class="title">Please Note</p>
<p class="notes">There are three menu options available. The reservation fee is determined by menu selection.</p>
<p class="notes">Ticket prices are set by the organization holding the fundraiser. All proceeds go to the organization.</p>
<p class="notes">The Pontiac Pancake Breakfast Operator/s will notify organizations of confirmation of reservation.</p>
<p class="title">Hold Harmless</p>
<p class="disclosure">The granting of this reservation will in no way make Pontiac Public Library liable for any occurrence,
damage, claim or loss, which may occur in connection with the use of the Pancake Pavillion. This agreement is made upon the
express condition that Pontiac Public Library, its agents or employees, or third parties, from any cause or causes wahtsoever,
while in or upon said premises or any part thereof during the term of this agreement, occasioned by any occupancy or use of
said premises, or any activity carried on by the reservation holder in connection herewith and the reservation holder hereby
covenants and agrees to indemnify, defend, save, and hold harmless the Pontiac Public Library, its agents, and employees from
all liabilities, charges, expenses, and costs on account of or by reason of any such injuries, deaths, liabilities, claims,
suits, or losses, however occuring or damages growing out of the same.</p>
<p class="right2"><a href="#Top" title="Return to the Top">Return to the Top</a></p>
</div>
</div>
</body>
</html>
Topic Participants
spyros_tsobanakis
jakecigar