Estoy usando Bootstrap y JQuery UI y parece que me encontré con un problema. Diseñé la mayor parte de mi código en Bootstrap. Estaba tratando de implementar un cuadro de diálogo de validación de edad " Validación : si una persona tiene menos de 18 años, haga algo...". Logré implementar esa validación de verificación de edad con JQuery. A continuación, quería hacer que el campo de entrada pareciera campos de entrada de arranque, porque todos mis campos de entrada en mi formulario principal se parecen al campo de entrada de arranque. ¿Cómo puedo lograr esto?
$(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>Para tener tanto el aspecto de bootstrap como la funcionalidad del selector de fechas de JQuery-UI, tuve que reorganizar mi referencia.
$(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>Cabeza interior:
<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>Cuerpo interior:
<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>Si solo desea el estilo de los elementos de formulario de arranque, puede agregar una clase personalizada a su input y sobrescribir todas sus propiedades css y hacer que sea igual que los componentes de formulario de arranque.
$(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>