In this tutorial you will know how to use simple datepicker in your form. Using datepicker, you can easily choose the date from a calendar instead of typing manually.Here in below example we use bootstrap datepicker which is going most popular and has full-featured libraries.
The following example will tell you how to set datepicker using bootstrap datepicker.
- <html>
- <head>
- <title>Bootstrap datepicker example text input with specifying date format</title>
- <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
- <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet">
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script> </head>
- <body>
- <input class="form-control" type="text" placeholder="click to show datepicker" id="example1">
- <script type="text/javascript">
- // When the document is ready
- $(document).ready(function () {
- $('#example1').datepicker({
- format: "dd/mm/yyyy"
- });
- });
- </script>
- </body>
- </html>
If you need to auto closing the date picker which means datepicker immediately closed after choosing a date then you will have to set autoclose true :
- $('#example1').datepicker({
- autoclose: true,
- format: "dd/mm/yyyy"
- });
