Jquery Datepicker select multiple date ranges in one calender
23,939
Please check this might solve your issue.
$(function() {
$('input[name="daterange"]').daterangepicker();
$('input[name="daterange"]').change(function(){
$(this).val();
console.log($(this).val());
});
});
<html>
<head>
<!-- Include Required Prerequisites -->
<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/3/css/bootstrap.css" />
<!-- Include Date Range Picker -->
<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 class="pull-right" type="text" name="daterange" value="01/15/2020 - 02/15/2010">
</body>
</html>
Author by
Shanaka
Evangelist of UX practices. All front end stuff HTML, CSS, and Javascript SOreadytohelp
Updated on July 05, 2022Comments
-
Shanaka almost 2 years
My requirement is to allow user to select multiple date ranges in a single calendar, also previous date selections should not be allowed to change. How is this possible? Below is the code and link to fiddle
HTML
<p>from</p> <input type="text" class="spromotion-input-inbody spromotion-input-datepick" id="sproid-bookingcondition-datefrom"> <p>to</p> <input type="text" class="spromotion-input-inbody spromotion-input-datepick" id="sproid-bookingcondition-dateto">
SCRIPT
$( function() { var dateFormat = "mm/dd/yy", from = $( "#sproid-bookingcondition-datefrom" ) .datepicker({ defaultDate: "+1w", changeMonth: true, numberOfMonths: 1 }) .on( "change", function() { to.datepicker( "option", "minDate", getDate( this ) ); }), to = $( "#sproid-bookingcondition-dateto" ).datepicker({ defaultDate: "+1w", changeMonth: true, numberOfMonths: 1 }) .on( "change", function() { from.datepicker( "option", "maxDate", getDate( this ) ); }); function getDate( element ) { var date; try { date = $.datepicker.parseDate( dateFormat, element.value ); } catch( error ) { date = null; } return date; } } );