Trying to override the native chrome datepicker with the jquery ui datepicker.
454 views
Skip to first unread message
Spyros Tsompanakis
Apr 27, 2015, 9:25:35 PM4/27/15
to chromium...@chromium.org
Hi Guys,
I use the jquery UI datepicker for an application form on my library's web site. On Chrome, the native datepicker takes over and lacks certain functions and style. I can disable it with type="text", but chrome will not allow the jquery ui datepicker to show. On Firefox and IE it is fine, since there are no native datepickers there to cause a problem. The question is how can I override the chrome native datepicker and show the jquery UI datepicker. Any help would be greatly appreciated.
The entire page code follows.
Thanks,
S.T.
<!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.8/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>
I use the jquery UI datepicker for an application form on my library's web site. On Chrome, the native datepicker takes over and lacks certain functions and style. I can disable it with type="text", but chrome will not allow the jquery ui datepicker to show. On Firefox and IE it is fine, since there are no native datepickers there to cause a problem. The question is how can I override the chrome native datepicker and show the jquery UI datepicker. Any help would be greatly appreciated.
The entire page code follows.
Thanks,
S.T.
<!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.8/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>
PhistucK
Apr 28, 2015, 1:45:37 AM4/28/15
to spyros_t...@hotmail.com, Chromium-discuss
Please, use stackoverflow.com for such questions (or search first).
☆PhistucK
--
--
Chromium Discussion mailing list: chromium...@chromium.org
View archives, change email options, or unsubscribe:
http://groups.google.com/a/chromium.org/group/chromium-discuss
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-discu...@chromium.org.
Spyros Tsompanakis
Apr 29, 2015, 9:50:37 AM4/29/15
to chromium...@chromium.org, spyros_t...@hotmail.com
Hi Phistuck,
I searched and used stackoverflow, but came with nothing!
Spyros
I searched and used stackoverflow, but came with nothing!
Spyros
PhistucK
Apr 29, 2015, 11:41:38 AM4/29/15
to Spyros Tsompanakis, Chromium-discuss
Then use it to post a question.
☆PhistucK
Reply all
Reply to author
Forward
0 new messages