Menu Close

How to set Datepicker in bootstrap?

0
(0)

You are using bootstrap and you want to add datepicker, then you can use the bootstrap-datepicker library. But if you are new then learn to add datepicker in bootstrap.

Follow the codes below

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <meta name="author" content="">

        <title>Bootstrap Datepiker</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="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.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>

        <strong>Date : </strong>  

        <input class="date form-control" style="width: 300px;" type="text">  

        <script type="text/javascript">  

            $('.date').datepicker({  

               format: 'mm-dd-yyyy'  

             });  

        </script>  

    </body>

</html> 

Output

Bootstrap Datepiker Date :

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?

Share

Posted in Bootstrap, CSS, HTML

Leave a Reply

Your email address will not be published. Required fields are marked *

You can also read...