Menu
I'm using Bootstrap and JQuery UI and i seem to have stumbled upon a problem. I styled most of my code in Bootstrap. I was trying to implement a age validation dialog-box "Validation: if a person is less then 18 years of age do something...". I managed to implement that age-checking validation with JQuery. Next, I wanted to make the input-field look like bootstraps input fields, because all of my input-fields in my main form look like the bootstraps input-field. How can i accomplish this?
$(document).ready(function () {
$("#age").datepicker({
onSelect: function(value, ui) {
var current = new Date().getTime(),
dateSelect = new Date(value).getTime();
age = current - dateSelect;
ageGet = Math.floor(age / 1000 / 60 / 60 / 24 / 365.25); // age / ms / sec / min / hour / days in a year
if(ageGet < 18){
less_than_18(ageGet);
}
},
yearRange: '1900:+0d',//base year:current year
changeMonth: true,
changeYear: true,
defaultDate: '-18yr',
}).attr("readonly", "readonly"); //prevent manual changes
function less_than_18(theAge){
$( function() {
$('<div></div>').dialog({
modal: true,
title: "Age Check?",
open: function () {
var markup = 'Applicant is not 18 years old. Do you wish to continue?';
$(this).html(markup);
},
buttons: {
'Confirm': function() {
$(this).dialog('close');
},
'Change': function() {
$('#age').val('');
$(this).dialog('close');
}
}
});
} );
}
}); <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<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>
<div class="container">
<div class="form-group">
<input type="text" class="form-control" placeholder="Select your age" id="age">
</div>
</div>
459
If you just want the styling from bootstrap form elements, then you can add a custom class to your input and overwrite all its css properties and make it same as bootstrap form components.
$(document).ready(function () {
$("#age").datepicker({
onSelect: function(value, ui) {
var current = new Date().getTime(),
dateSelect = new Date(value).getTime();
age = current - dateSelect;
ageGet = Math.floor(age / 1000 / 60 / 60 / 24 / 365.25); // age / ms / sec / min / hour / days in a year
if(ageGet < 18){
less_than_18(ageGet);
}
},
yearRange: '1900:+0d',//base year:current year
changeMonth: true,
changeYear: true,
defaultDate: '-18yr',
}).attr("readonly", "readonly"); //prevent manual changes
function less_than_18(theAge){
$( function() {
$('<div></div>').dialog({
modal: true,
title: "Age Check?",
open: function () {
var markup = 'Applicant is not 18 years old. Do you wish to continue?';
$(this).html(markup);
},
buttons: {
'Confirm': function() {
$(this).dialog('close');
},
'Change': function() {
$('#age').val('');
$(this).dialog('close');
}
}
});
} );
}
});.ageValidation{
display: block;
width: 50%;
height: 20px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<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>
<div class="container">
<div class="form-group">
<input type="text" class="form-control ageValidation" placeholder="Select your age" id="age">
</div>
</div>To have both the look of bootstrap and functionality of the date-picker from JQuery-UI I had to rearrange my reference around.
$(document).ready(function () {
$("#age").datepicker({
onSelect: function(value, ui) {
var current = new Date().getTime(),
dateSelect = new Date(value).getTime();
age = current - dateSelect;
ageGet = Math.floor(age / 1000 / 60 / 60 / 24 / 365.25); // age / ms / sec / min / hour / days in a year
if(ageGet < 18){
less_than_18(ageGet);
}
},
yearRange: '1900:+0d',//base year:current year
changeMonth: true,
changeYear: true,
defaultDate: '-18yr',
}).attr("readonly", "readonly"); //prevent manual changes
function less_than_18(theAge){
$( function() {
$('<div></div>').dialog({
modal: true,
title: "Age Check?",
open: function () {
var markup = 'Applicant is not 18 years old. Do you wish to continue?';
$(this).html(markup);
},
buttons: {
'Confirm': function() {
$(this).dialog('close');
},
'Change': function() {
$('#age').val('');
$(this).dialog('close');
}
}
});
} );
}
});<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"></script>
<div class="container">
<div class="form-group">
<input type="text" class="form-control" placeholder="Select your age" id="age">
</div>
</div>All you have to do is get rid of the jquery UI css and any associated files. Check out my fiddle
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="form-group">
<input type="text" class="form-control" placeholder="Select your age" id="age">
</div>
</div>
Inside Head:
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<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>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script>
$(document).ready(function () {
$("#age").datepicker({
onSelect: function (value, ui) {
var current = new Date().getTime(),
dateSelect = new Date(value).getTime();
age = current - dateSelect;
ageGet = Math.floor(age / 1000 / 60 / 60 / 24 / 365.25); // age / ms / sec / min / hour / days in a year
if (ageGet < 18) {
less_than_18(ageGet);
}
},
yearRange: '1900:+0d', //base year:current year
changeMonth: true,
changeYear: true,
defaultDate: '-18yr',
}).attr("readonly", "readonly"); //prevent manual changes
function less_than_18(theAge) {
$(function () {
$('<div></div>').dialog({
modal: true,
title: "Age Check?",
open: function () {
var markup = 'Applicant is not 18 years old. Do you wish to continue?';
$(this).html(markup);
},
buttons: {
'Confirm': function () {
$(this).dialog('close');
},
'Change': function () {
$('#age').val('');
$(this).dialog('close');
}
}
});
});
}
});
</script>
Inside Body:
<div class="container">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">Age</div>
<input type="text" class="form-control" placeholder="Select your age" id="age">
</div>
</div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
