使用Bootstraps输入字段样式和JQuery功能

Question

我正在使用Bootstrap和JQuery 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>

Answer 1

为了同时拥有 JQuery-UI 的引导程序外观和日期选择器的功能，我必须重新安排我的参考。

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