Hello Dev.
in this small articles i will display you a way to enforce bootstrap daterangepicker example, bootstrap date range picker is use to select date option between time in html, php or any laravel file.
here, we will use a few jquery js, bootstrap css and js and bootstrap daterangepicker css and js for this bootstrap datepicker date range picker example, jquery date range picker provide many customised functionalities to user.
So let's start the lesson...
Example 1:
<html lang="en">
<head>
<title>Bootstrap Daterangepicker Example - meaningarticles.com</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>
Example 2: Date Range Picker With Times
<input type="text" name="datetimes" />
<script>
$(function() {
$('input[name="datetimes"]').daterangepicker({
timePicker: true,
startDate: moment().startOf('hour'),
endDate: moment().startOf('hour').add(32, 'hour'),
locale: {
format: 'M/DD hh:mm A'
}
});
});
</script>
I hope it assists you, thanks for visiting my article if you like my article then share it with your friends on the social media platform.
Happy Coding.....
