Menu
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;
}
} );
573
Just adding a textbox with datepicker id will not work properly, you need separate id or class with separate jQuery functions. Where two jQuery datepicker functions are used, ie, first datepicker is for text input with id “datepicker1” and second datepicker for text input with id “datepicker2”.
Originally built for reporting at Improvely, the Date Range Picker can be attached to any webpage element to pop up two calendars for selecting dates, times, or from predefined ranges like "Last 30 Days".
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
