I am using a daterangepicker to select a range of dates. Once there are invalid dates in between the range it shouldn't go over them to another date.
Something similar to this question, however that uses Bootstrap daterangepicker whereas I am using DateRangePicker
var dateRanges = [{
'start': moment('2019-06-28'),
'end': moment('2019-07-5')
},
];
$('input[name="daterange"]').daterangepicker({
autoUpdateInput: false,
autoApply: true,
opens: 'left',
setStartDate: new Date(),
minDate: moment().startOf('day').add(2, 'day'),
locale: {
"format": "DD/MM/YYYY",
},
isInvalidDate: function(date) {
return dateRanges.reduce(function(bool, range) {
return bool || (date >= range.start && date <= range.end);
}, false);
},
});
$('input[name="daterange"]').on('apply.daterangepicker', function(ev, picker) {
$(this).val(picker.startDate.format('DD/MM/YYYY') + ' - ' + picker.endDate.format(
'DD/MM/YYYY'));
})input {
width: 400px;
height: 50px;
}<link href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<input type="text" name="daterange" readonly="true" readonly value="">