Bootstrap daterangepicker example code with demo using daterangepicker.js

By Hardik Savani | May 28, 2016 | | 16053 Viewer | Category : Javascript Bootstrap jQuery


Share this post:

Sometimes, we may require to use daterangepicker in our php project or laravel project etc, then you can use date range picker easily using daterangepicker.js plugin. In this post i give you full example from scratch and also give you demo that way you can check how it's looks like. So just copy bellow code and run in your local system.

Example:

<html lang="en">

<head>

<title>Jquery - Bootstrap Daterangepicker Example</title>

<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>

<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/latest/css/bootstrap.css" />

<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />

</head>

<body>


<input type="text" class="daterange" />


<script type="text/javascript">

$('.daterange').daterangepicker();

</script>


</body>

</html>

you can get more inforation from here : daterangepicker.