Using Bootstraps Input Field Style with JQuery Functionalities

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>