gpt4 book ai didi

jquery - 将 Bootstraps 输入字段样式与 JQuery 功能结合使用

转载 作者:技术小花猫 更新时间:2023-10-29 12:34:12 28 4
gpt4 key购买 nike

我正在使用 BootstrapJQuery UI,我似乎偶然发现了一个问题。我在 Bootstrap 中设计了大部分代码的样式。我试图实现一个年龄验证对话框“验证:如果一个人未满 18 岁,请做某事...”。我设法用 JQuery 实现了年龄检查验证。接下来,我想让输入字段看起来像 bootstraps 输入字段,因为我的主表单中的所有输入字段看起来都像 bootstraps 输入字段。我怎样才能做到这一点?

      $(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>

最佳答案

为了从 JQuery-UI 中获得 Bootstrap 的外观和日期选择器的功能,我不得不重新安排我的引用。

$(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>

关于jquery - 将 Bootstraps 输入字段样式与 JQuery 功能结合使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43195032/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com