Bootstrap Datepicker in HTML
Hi, guys. Create Bootstrap Datepicker in HTML page is very quickly and follow simple example code. The Bootstrap Datepicker is a input field of a from page of a web Application.In this tutorial I will show you How to create a beautiful Datepicker input field in the HTML page using bootstrap CSS and JS file.
Use this CSS CDN link:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.css" rel="stylesheet" id="bootstrap-css">
Use this JS CDN link:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
The Bootstrap Datepicker is tied to a standard form input field in the HTML page. When click in this input field then the input open an interactive calendar in a small overlay. There you choose a date, which you want to choose and click elsewhere on the page. At the first time current date is automatic show in the input date field.
So first copy the Bootstrap Datepicker CSS and JS CDN link, then paste in in the HTML page. I hope it will work nicely.
I have an example for you, that are show you in below and try the example code.
Try with this example code:
<!DOCTYPE html> <html> <head> <title>Datepicker Example</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.css" rel="stylesheet" id="bootstrap-css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head> <body> <div class="container"> <div class="row"> <h2>Bootstrap Datepicker</h2> </div> <div class="row"> <div class='col-sm-6'> <form> <div class="form-group"> <div class='input-group date' id='datepicker'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </form> </div> </div> </div> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script> <script > $(function () { $('#datepicker').datepicker({ format: "dd/mm/yyyy", autoclose: true, todayHighlight: true, showOtherMonths: true, selectOtherMonths: true, autoclose: true, changeMonth: true, changeYear: true, orientation: "button" }); }); </script> </body> </html>
This example is help for you if you want to set a date calendar in you web application.
You can set the Date of Birth of a user, who fill the form or set and date type, which you want to set in your web page. I will give more helping tutorial and example code. So follow this web site and get more latest tutorial of HTML 5, CSS, Bootstrap, PHP, CodeIgniter, Laravel.
Click here: To get example code of Add emojionearea in your website
You much like DataInFlow.com because it provides you to ask any kind of programming questions and get answer in quick time. Also you can answer any others question if you know. If you have any programming question, so Click for ASK Here.
HI,
how can size de input textbox?