Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap datepicker concrete example of the index.html

I must be an idiot. I've been trying to get the bootstrap datepicker to work for hours unsuccessfully. What do I need to write in the index.html to put up a simple datepicker?

<html>
<head><title>A concrete example I will upload to github for future people</title>

<!-- What exactly do I need to include here? There's /js/bootstrap-datepicker.js -->

</head>
<body>

Datepicker:
<!-- The documentation says <input type="text" type="text" class="form-control"> -->

</body></html>

Steps

  1. Create node.js server and clone github into the 'public' folder
  2. cd to the datepicker folder and npm install. Make sure grunt-cli is installed.
  3. create index.html file with code generously provided by hero on Stack Overflow, whom we owe a tremendous thanks.
like image 838
user3373281 Avatar asked Dec 17 '25 11:12

user3373281


1 Answers

Alternatively, you could:

  1. Download the zip file
  2. Copy the bootstrap-datepicker.js and datepicker3.css files to your bootstrap project
  3. Link the files to your page
  4. Add an input and use the data attributes <input data-provide="datepicker"> or the js method to call the datepicker $('.datepicker').datepicker()

The docs have a bunch of other details on setting up things like date ranges etc. http://bootstrap-datepicker.readthedocs.org/en/release/

Where are you specifically getting stuck?

EDIT: it could be as basic as this:

<!DOCTYPE html>
<html lang="en">
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="plugins/bootstrap-datepicker-master/css/datepicker3.css">
 </head>

 <body>
    <div class="container">
      <div class="row">
        <div class="col-md-12">
            <input data-provide="datepicker">
        </div>
      </div> 
    </div> 

    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="plugins/bootstrap-3.1.1-dist/js/bootstrap.min.js"></script>
    <script src="plugins/bootstrap-datepicker-master/js/bootstrap-datepicker.js"></script>
 </body>
</html>
like image 193
jme11 Avatar answered Dec 19 '25 07:12

jme11



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!