How to add date picker jquery plugins to bootstrab?
Question
I need to add datepicker in my form. I want to use jquery with bootstrap. For the purpose, I googled and got free jquery plugins here . Now I am unable to get the functionality. I am novice to bootstrap. Please help me.
html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="input-append date datepicker" id="dp3" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
<input class="span2" size="16" type="text" value="12-02-2012" />
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/google-code-prettify/prettify.js"></script>
<script src="js/jquery.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function () {
$('.datepicker').datepicker();
});
</script>
</body>
</html>
2 answers
solution1
0 2014-09-15 20:44:05
There are plugins to do this which are adapted to work just fine with bootstrap like datepicker - Demo . Repository here .They even add snippets and are well documented.
solution2
0 2014-10-08 19:28:38
I personally use the Bootstrap twitter datepicker plugin. It's relatively easy to setup and is one of the best looking pickers out there IMHO, also the possible customization is great. This is the tutorial i used to set it up: http://develop.alpdesigns.ch/pages/other/bootstrap-datepicker.html You can also use the bootstrap libs to theme your whole form like the plugin http://getbootstrap.com/components/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.