Skip to main content

How to set Datepicker in bootstrap?

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.

<!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="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>

        <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:

 

How to set Datepicker in bootstrap datepicker, how to use datepicker in bootstrap, implement bootstrap datepicker, use bootstrap datepicker in php, how to use bootstrap datepicker in html, bootstrap datepicker example demo.
Labels:

Comments

Post a Comment

Popular posts from this blog

How to get form data using JavaScript / jQuery?

The serializeArray() method creates an array of objects (name and value) by serializing form values. You can select one or more form elements (like input and/or text area), or the form element itself. Syntax: $(selector).serializeArray() Example Code: Here I have added two variations for output results(With and Without labels).  <!DOCTYPE html> <html>     <head>         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>         <script>             $(document).ready(function(){                 $("#serialize").click(function(){                     var x = $("form").serializeAr...
Post a Comment
Read more

Text Align Property in CSS

  The text-align property in CSS is used to make the horizontal alignment of text in an element. Property Value: The text-align property value are listed below: S.No Property Value Syntex Description 1 left text-align:left; Used to align the text-alignment into left. 2 center text-align:center; Used to align the text-alignment into center. 3 right text-align:right; Used to align the text-alignment into right. 4 justify text-align:justify; Used to stretch the content of an element to display the same width of each line 5 initial text-align:initial; Used to set its default value. 6 inherit text-align:inherit; Used to be inherited from its parent.
Post a Comment
Read more