Menu
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?
446
Bootstrap date picker is a plugin that adds the function of selecting time without the necessity of using custom JavaScript code.
The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.
If the Controls task pane is not visible, click More Controls on the Insert menu, or press ALT+I, C. Under Insert controls, click Date Picker. In the Date Picker Binding dialog box, select the field in which you want to store the date picker data, and then click OK.
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' }); }); 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.
40
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
