How to use bootstrap datepicker

Question

Okay, So I'm new to using frameworks and js libraries and I'm wanting to us bootstrap and bootstrap datepicker for a form and I have no clue if I have the file order correct but the links is how the files are setup, and I know very little about javascript, pretty much all I code in is php but I need this for a form.

Here's my testing form for the bootstrap datepicker:

 <!DOCTYPE html>
 <html>
 <head>
<title>Testing</title>
<meta charset="utf-8">

<link rel="stylesheet" href="_css/datepicker.css">
<link rel="stylesheet" href="_css/bootstrap.css">
<link rel="stylesheet" href="_css/bootstrap-responsive.css">
<script type="text/javascript" src="datepicker/bootstrap-datepicker.js"></script>
 </head>
 <body>
 <center>
      <h1>BootStrap Datepicker</h1>
  <form>
  <div class="well span12 main">
  <input type="text" id="dp1" class="span2 datepicker" placeholder="Date..."  
           name="date"> <br>
      </div>
      <input type="submit" value="Search" class="btn">
  </form>
 </center>

<!-- JAVAscript ----------------------------------------------------------------->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="_js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="_js/bootstrap.js"></script>
 </body>
 </html>

What exactly am I doing wrong?

you have an extra `bootstrap-datepicker.js` script tag in your head, also bootstrap.js should be loaded before the plugin and you need to initialize the plugin to your element, it won't work just because you set the datepicker class — omma2289, Aug 29 '13 at 19:51

score 39 · Accepted Answer · answered Aug 29 '13 at 19:50

39

You should include bootstrap-datepicker.js after bootstrap.js and you should bind the datepicker to your control.

$(function(){
   $('.datepicker').datepicker({
      format: 'mm-dd-yyyy'
    });
});

answered Aug 29 '13 at 19:50

Teja Kantamneni

17,402
12
56
86

1

What exactly is the control and how do I bind the datepicker, and also where does the code that you wrote up here go? Does is it go in its own script tags withing the html and if so where in the html? – user2701687 Aug 29 '13 at 20:24
2

Add the sample code in the answer to your script tag after your js includes. It should work and you may want to tweak the settings for datepicker – Teja Kantamneni Aug 29 '13 at 20:27
is there is any way to achieve this through java-script .. no jquery – NMathur Jun 16 '17 at 08:00
1

@NMathur I advise looking into `document.getElementsByClassName('datepicker')` or `document.querySelector('.datepicker')`. – Hazel へいぜる Nov 18 '19 at 19:17

score 3 · Answer 2 · answered Jun 27 '16 at 13:47

man you can use the basic Bootstrap Datepicker this way:

<!DOCTYPE html>
<head runat="server">
<title>Test Zone</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="Css/datepicker.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="../Js/bootstrap-datepicker.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#pickyDate').datepicker({
            format: "dd/mm/yyyy"
        });
    });
</script>

and inside body:

<body>
<div id="testDIV">
    <div class="container">
        <div class="hero-unit">
            <input  type="text" placeholder="click to show datepicker"  id="pickyDate"/>
        </div>
    </div>
</div>

datepicker.css and bootstrap-datepicker.js you can download from here on the Download button below "About" on the left side. Hope this help someone, greetings.

score 2 · Answer 3 · answered Aug 29 '13 at 19:49

2

I believe you have to reference bootstrap.js before bootstrap-datepicker.js

answered Aug 29 '13 at 19:49

Colt Stumpf

121
1
10

score 0 · Answer 4 · answered Mar 31 '19 at 10:24

0

Just add this below JS file

<script type="text/javascript">
    $(document).ready(function () {
        $('your input's id or class with # or .').datepicker({
            format: "dd/mm/yyyy"
        });
    });
</script>

answered Mar 31 '19 at 10:24

Fahad Shakeel

11
4

score 0 · Answer 5 · answered Jun 01 '20 at 15:32

0

Couldn't get bootstrap datepicker to work until I wrap the textbox with position relative element as shown here:

<span style="position: relative">
 <input  type="text" placeholder="click to show datepicker"  id="pickyDate"/>
</span>

answered Jun 01 '20 at 15:32

estinamir

435
5
11

How to use bootstrap datepicker

5 Answers5