Live
<html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Date Range Picker</title> <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" /> </head> <body> Pick a Date Range:<input type="text" name="dates" value="01/01/2018 - 01/15/2018" /> </body> </html>
Live
xxxxxxxxxx1
$('input[name="dates"]').daterangepicker();
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.