JavaScript Demo
JavaScript / HTML/ CSS Code
Output
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <link rel="stylesheet" href="dist/datepickk.min.css"> <script src="dist/datepickk.min.js"></script> <style> .inputstl { padding: 9px; border: solid 1px #B3FFB3; outline: 0; background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #A4FFA4), to(#FFFFFF)); background: -moz-linear-gradient(top, #FFFFFF, #A4FFA4 1px, #FFFFFF 25px); box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; } </style> </head> <body> <div class="container"> <h1>Bootstrap date/time demo</h1> <form class="form-horizontal" role="form"> <div class="form-group"> <label for="name1" class="col-sm-2 control-label">Name:</label> <div class="col-sm-5 input-group"> <input type="email" class="form-control inputstl" id="name1" placeholder="Enter Your Full Name"> </div> </div> <div class="form-group"> <label for="gender1" class="col-sm-2 control-label">Gender:</label> <div class="col-sm-2 input-group"> <select class="form-control inputstl" id="gender1"> <option>Male</option> <option>Female</option> </select> </div> </div> <div class="form-group"> <label for="email1" class="col-sm-2 control-label">Email:</label> <div class="col-sm-5 input-group"> <input type="email" class="form-control inputstl" id="email1" placeholder="Enter Email"> </div> </div> <script> var datepicker = new Datepickk(); </script> <div class="form-group"> <label for="dtpickerdemo" class="col-sm-2 control-label">Date of birth:</label> <div class='col-sm-4 input-group date ' id='dtpickerdemo'> <input type='text' class="form-control inputstl" id="dob" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar" onclick="closeOnSelectDemo()"></span> </span> </div> </div> <div class="form-group"> <label for="password1" class="col-sm-2 control-label">Password:</label> <div class="col-sm-3 input-group"> <input type="password" class="form-control inputstl" id="password1" placeholder="Password here"> </div> </div> <div class="form-group"> <label for="address1" class="col-sm-2 control-label">Address:</label> <div class="col-sm-5 input-group"> <input type="email" class="form-control inputstl" id="address1" placeholder="Full Address"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox" class="inputstl"> Remember me </label> </div> </div> </div> <div class="form-group "> <div class="col-sm-offset-2 col-sm-4"> <button type="submit" class="btn btn-lg btn-block btn-success">Create Account</button> </div> </div> </form> </div> <script> function closeOnSelectDemo(){ datepicker.unselectAll(); datepicker.closeOnSelect = true; console.log(datepicker.closeOnSelect); datepicker.onSelect = function(checked){ document.getElementById("dob").value = this.toLocaleDateString(); }; datepicker.onClose = function(){ datepicker.closeOnSelect = false; datepicker.onClose = null; } datepicker.show(); } </script> </body> </html>
Bootstrap date/time demo
Name:
Gender:
Male
Female
Email:
Date of birth:
Password:
Address:
Remember me
Create Account