Ion-datetime wheel not draggable in browser mode

Ionic Framework ionic-v3
1

The ion-datetime wheel works fine on the device or if the chrome desktop browser is in mobile mode but if not the wheel is not draggable e.g. I can’t drag to change the value. I can click to change it one year at a time.

Is there a way to get this working in

<ion-datetime presentation="date" [preferWheel]="true" [(ngModel)]="additionalDataDob"></ion-datetime>

image

2

I’m guessing there is no solution for this. Its not very usable in the browser.
I have tried using [preferWheel]=“false” for the browser but month and year are always wheel selection.

I have changed to use the below for desktop as the Ionic datetime picker is not really usable.

<mat-form-field>
  <mat-label>Choose a date</mat-label>
  <input matInput [matDatepicker]="picker">
  <mat-hint>MM/DD/YYYY</mat-hint>
  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>
3

Hi,

To enable drag functionality for date selection on desktop browsers, you can use the following workaround:

Add CSS to allow scrolling on the ion-datetime component:

ion-datetime {
    overflow-y: auto;
}

Check the Version: Ensure you are using the latest version of Ionic, as updates may include fixes or enhancements for the datetime component.

Use Touch Events: Consider adding custom touch or mouse event handlers to manage dragging behavior explicitly.

However, the best approach is to check the Ionic documentation or GitHub issues for updates or community-provided solutions, as this is a common request among developers.

Thanks

4

Unfortunately that CSS does not work. I had tried that previously.
I am using version 6 of Ionic. I’m not ready to upgrade at this time.
I have searched but can’t seem to find a solution.

Currently looking at using a different date control such as Angular Material for desktop/web.

Cheers,

5

It doesn’t work on the Ionic website so don’t think it will work.
Click on the year to see the wheel selector.