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 align Placeholder Text in HTML ?

Input Placeholder attribute specifies a short hint to describe the expected value of an input field / textarea. The short hint is displayed in the field before the user enters a value. In most of the browsers, placeholder texts are usually aligned on the left. The selector uses text-align property to set the text alignment in the placeholder. This selector can change browser to browser. For example: For Chrome, Mozilla, and Opera Browsers: use ::placeholder For Internet Explorer: use :-ms-input-placeholder   Example 1: This example describes only placeholder alignment, it does not align placeholder value. <!DOCTYPE html>  <html>      <head>          <title>Change Placeholder alignment | Codewithanbu</title>          <style>              body {text-align:center;padding: 20px;}              .body-section{width: 20%;margin: 0 auto;padding: 20px;background: #ddd;}             h1 {color:#5042e0; }              input[type="text"]::placeholder {t
Post a Comment
Read more

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").serializeArray();                     $.each(x, function(i, field){                         $("#results1").append(field.name + ":" + field.value + "<br><br>");                         $("#results2").append(field.value);                     });                 });          
Post a Comment
Read more