Skip to content

Flux date range picker not resetting after cancel and single day range on mobile #2668

Description

@edwinvdpol

Flux version

v2.15.0

Livewire version

v4.3.3

Tailwind version

v4.3.1

Browser and Operating System

Chrome on macOS

What is the problem?

I don't know if it is by design, but when selecting a range with the date range picker (with DateRange object) the value isn't reset when clicking the Cancel button. Not sure if this is intended behaviour though.
I was looking for an event that fires when the cancel button is pressed, but I couldn't find it in the documentation.

One other thing, will it be possible to add functionality / extra attribute that when the end date is selected, the range is set and the modal closes immediately instead of having to click the "Select range" button on mobile? In my case, the range can also be one day, and now it is unclear if the end date is also set (see video).

Code snippets to replicate the problem

<flux:date-picker wire:model.live="range" label="Periode" mode="range" :min="$this->min" :unavailable="$this->unavailable" :open-to="$this->min" selectable-header />

Screenshots/ screen recordings of the problem

flux-date-range.mov

How do you expect it to work?

I would like the option to opt-in that the range should be set when selecting the second / end date (like on desktop) instead of having to use the "Select range" button on mobile. Another option would be to disable the "Select range" button when the start- or end date is not set yet.

Also when making changes to the range and the "Cancel" button is pressed, it should revert to the actual selected range imho (or make this optional).

Please confirm (incomplete submissions will not be addressed)

  • I have provided easy and step-by-step instructions to reproduce the bug.
  • I have provided code samples as text and NOT images.
  • I understand my bug report will be closed if I haven't met the criteria above.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions