We are giving to bootstrap 4 responsive year picker with free source code. In this snippets are creative design. This year picker are design in display year like 2019 etc.

We are provide to you free source code and download. Here in this post to year picker made with bootstrap 4. This snippet are creative and responsive design and clear source code. It is a nice design give to you year picker bootstrap 4. This snippet are provide to you three tab html,css,js you can easily run this layout.

<!DOCTYPE html> <html> <head> <title>Year Picker</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" rel="stylesheet"/> <link href="https://fonts.googleapis.com/css?family=Abel|Nunito" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="custom.css"> </head> <body> <div class="container"> <div class="row"> <div class="col-md-6 main-section"> <div class="row"> <div class="col-md-8 datepicker-section"> <h1>Year Picker</h1> <input type="text" id="datepicker" class="mt-4 form-control" placeholder="Select Year" /> </div> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <script src="custom.js"></script> </body> </html>
body{ background:#395693; font-family: 'Abel', sans-serif; } .main-section{ position:relative; background:#8798BD; transform: translate(0%,80%); padding:60px 0px; margin: auto; } .datepicker-section{ margin: auto; } .datepicker-section h1{ color:#395693; font-weight: bold; }
$("#datepicker").datepicker({ format: "yyyy", viewMode: "years", minViewMode: "years" });

Please Subscribe Your Email Address, We Will Notify You When Add New Snippet:

Random Post