Premium support for our pure JavaScript UI components


Post by pmiklashevich »

Hi! According to your docs there is a multiSelect config on the DatePicker. It seems it doesn't work. I tried it in your code sandbox.

const picker = new DatePicker({
    appendTo          : targetElement,
    width             : '24em',
    multiSelect : true,
    date              : new Date(),
    onSelectionChange : ({ selection }) => {
        Toast.show(`You picked ${DateHelper.format(selection[0], 'MMM DD')}`);
    }
});

When you select the date no matter if you hold the Shift button or not, the selection is broken. See the screenshot. The 5th is today's date. It is not possible to select another date or a range. Please address.

One more question, does DateField support showing 2 dates if I configure the picker to work in multiSelect mode? I want to have an elegant component to update the Scheduler's date range. Please add an example of a DateField here, showing how date range works.

Attachments
Screen Shot 2022-10-05 at 16.52.35.png
Screen Shot 2022-10-05 at 16.52.35.png (628.9 KiB) Viewed 289 times

Pavlo Miklashevych
Sr. Frontend Developer


Post by Animal »

It was never implemented. There was no call for it in our widgets.


Post by Animal »

I will add it to my stack of issues to fix: https://github.com/bryntum/support/issues/5368


Post by pmiklashevich »

Hello Nige! Thanks for adding it to your stack of issues. If it has never been implemented, I suggest to implement it the way you don't need to hold shift button. See vuetify component for reference. https://vuetifyjs.com/en/components/date-pickers/#range
Cheers!

Pavlo Miklashevych
Sr. Frontend Developer


Post by pmiklashevich »

Basically you are using a date range component in every scheduler demo. See "dateRange" in TimeAxisHeaderMenu.

Screen Shot 2022-10-06 at 12.50.16.png
Screen Shot 2022-10-06 at 12.50.16.png (175.67 KiB) Viewed 266 times

But I need something elegant that looks like a single date field. Similar like you have in Vertical demo, but that supports 2 dates to be selected.

Screen Shot 2022-10-06 at 12.50.33.png
Screen Shot 2022-10-06 at 12.50.33.png (361.92 KiB) Viewed 266 times

Pavlo Miklashevych
Sr. Frontend Developer


Post by Animal »

I think there needs to be two modes of multiSelect.

full multiSelect where you can select a Set of dates. I have that already working in a unit test.

Screenshot 2022-10-07 at 09.29.08.png
Screenshot 2022-10-07 at 09.29.08.png (30.11 KiB) Viewed 253 times

And a mode where it can be a range of one or more dates.

So I suggest:

multiSelect  true

to mean full multiple selection as above.

and

multiSelect : 'range`

to mean a range of one or more dates.

I invite input from all on this proposal. Including onlookers.


Post Reply