Range in two fields

Date and time pickers
1

When using two fields, how would I go about opening the range picker with the End pre-selected when clicking into the End field? Right now clicking into the End field opens the picker with the Start tab selected. Is this possible?

Thanks

2

Hi @Jesse_Schutt :wave:

At the moment, this is the default behavior of the Range picker with two fields.
The only exception to this is when the range label is not displayed, because then you can’t switch between the Star and End.
So when there are no range labels, the end will be automatically selected when you click on the end input.

In addition, you can do this by switching active selection to end, all you need is a click event listener for end input, and you can call .setActiveDate (‘end’) with setTimeout, but this will be visible in the UI because we will animate the selection for range labels.

For example:

const endInput = document.getElementById('endInput');
const inst = datepicker('#datepicker', {
    select: 'range',
    startInput: '#startInput',
    endInput: '#endInput',
});
endInput.addEventListener('click', function (ev) {
    setTimeout(() => {
      inst.setActiveDate('end');
    });
});
3

Ah, thank you! The hiding of the range labels gave me the behavior I was looking for.

showRangeLabels: false,

I appreciate your helpful response!