I am using this DateRangePicker jQuery plugin and it works perfect for when you are using it with dates ranges but I want to be able also to select just one date without lose the range functionality. In other words: if you open both calendars and pick just a date from each then I want to be able to click the Apply
button. My issue: the click
event for the calendars is not exposed and therefore I am unable to catch when the user click and where.
I know the plugin offer a setting singleDatePicker
that when it is set to true
it shows only one calendar but this is not what I am looking for. If I force this then the second calendar isn’t show up.
See my code below (Fiddle here):
$(document).ready(function () {
const dateRangePicker = $('.dateRangePicker');
dateRangePicker.daterangepicker({
autoUpdateInput: false,
linkedCalendars: false,
opens: 'left',
locale: {
cancelLabel: 'Clear'
},
timePicker: false,
format: 'm/d/Y'
});
dateRangePicker.on('apply.daterangepicker', function (ev, picker) {
const startDate = picker.startDate.format('MM/DD/YYYY');
const endDate = picker.endDate.format('MM/DD/YYYY');
if (startDate === endDate) {
$(this).val(startDate);
} else {
$(this).val(startDate + ' ... ' + endDate);
}
});
dateRangePicker.on('showCalendar.daterangepicker', function (ev, picker) {
$('.applyBtn').prop('disabled', true);
});
dateRangePicker.on('cancel.daterangepicker', function (ev, picker) {
$(this).val('');
});
});
as soon as you click a date on any calendar then the plugin is forcing me to pick a second date which I would or wouldn’t because in my form I can force always a range, I need to add the ability to choose a date or a range of dates.
Can I get some ideas for how to trick the plugin to achieve what I am looking for?