Ionic 2 version request.

[rohamak]

Hello, This is a great control, can you make an ionic 2 version of this ? I want to use for desktops since ion-datatime-picker for ionic 2 iOS like is unusable and very difficult to use on desktops specially when using track pad it is very difficult to go from beginning to ends and vice versa. Thanks.

[katemihalikova]

Moving from #104:

@katemihalikova commented 10 hours ago I'm currently working on a new version of the picker that will work with both v1 and v2, but it's still not finished. However I can quickly convert current code (just simplified version of it) to v2 directive if you are interested in a quick solution.

@rohamak commented 3 hours ago I looked at it, I think there is an injectable needed the i18n .factory and a ModalControlView to replace showPopup since the popup class does not exist in ionic 2 the way to pass templateUrl and cssClass, and a bunch ionic directive changes in the picker-popup.html. That's my guesses so there might be some other stuff as well.

[katemihalikova]

I'll hook it into existing ion-datetime so that the api is almost the same. Stay tuned 📶

[katemihalikova]

Sneak-peek

[rohamak]

wow this looks fantastic, looking forward to using it. great job.

[katemihalikova]

Would you please give it a try? Readme

npm install ion-datetime-picker@ionic3

[rohamak]

thanks for the update however I get an error which I'm not sure if I should set some thing correctly. I followed your instructions.

[katemihalikova]

Thanks for trying, I hope you don't mind a little debugging ☺ Could you please share your app.module.ts? The error you posted usually means that the module is under declarations, not under imports where it belongs. Also please make sure that the ionic version you are using is >=3.0.1.

[rohamak]

Sure no problem, happy to participate, that's right I overlooked that, I changed it to imports and it works, but there are a couple of issues,

• first when ion-label and ion-datetime picker are under the same ion-col the generated DOM is not clickable, then I put them in two different ion-col s but this way user has to click on the blank area in from of the date presentation, instead of clicking on the date itself. Maybe ion-date picker should be wrapped in a button directive ?

  

• When the picker shows up input boxes are shrunk vertically, I attached pictures.

  

  Hope it helps. thank you.

[katemihalikova]

• ion-label and ion-datetime should be both put inside ion-item, otherwise the behaviour is weird even with the original unmodified version of the picker.
• what browser and operating system are you using for testing this? I'd like to reproduce.

[rohamak]

yes, sure, this is a great work done is a short amount of time, I can take care of these issues by downloading the project from github , so if you want to spend more time on it for the purpose of public, other wise I'm more than fine with what is already here. here are my settings :

I have changed it to the following but still label is not clickable, which I think I can do some thing about it so don;t worry a bout that.

[katemihalikova]

I've found some old Mac with Safari 9.1 and I'm able to reproduce, thank you very much. It seems that Safari is very picky about some styles, I'll try to fix them soon.

[rohamak]

That's good to be able see the problem, and hope it's not going to take a lot of your time. :)

[claudiozam]

Hi, when the picker shows up input boxes are shrunk vertically. Tested on IPhone 5S - 10.3 Ionic 3.

[katemihalikova]

Yep, they are. I currently don't have much time to dig through Safari issues, but feel free to open a PR 👍

[betatools]

A quick dirty fix for me was to change two lines in picker.component.js file.

Line 321: <div class="item item-input item-select" style="min-height: 25px;"> Line 330: <input type="number" [(ngModel)]="bind.year" min="1900" max="2999" (change)="change('year')" (blur)="changed()" required style="min-height: 25px;">

Just added the two style attributes

[jbarbede]

hi @katemihalikova, I'd like to help to improve that component for last ionic version but first I face some AOT compilation error: Error: Unexpected value 'DatetimePickerModule in .../node_modules/ion-datetime-picker/dist/picker.module.d.ts' imported by the module 'AppModule in .../src/app/app.module.ts'. Please add a @NgModule annotation.

I will check what is happening deeper this week-end but if you have any idea, let me know what could cause that.

[node-ist]

The same problem as @jbarbede has described - error during AOT compilation

[jbarbede]

I sent a PR to make the module AOT compatible. Please take a look @katemihalikova. I need your comments, specially on some fix I had to make on the picker directive.

[roggerlacerda]

Hi, @katemihalikova! Could you update the peerDependencies to newer ionic versions, please? I'm facing an error "angular is not defined" when using the component. Thanks!

[husainsr]

I faced same problem AOT compilation error: Error: Unexpected value 'DatetimePickerModule in .../node_modules/ion-datetime-picker/dist/picker.module.d.ts' imported by the module 'AppModule in .../src/app/app.module.ts'. Please add a @NgModule annotation.

what should i do ?

[mubasshir]

hi, any update on this? How to resolve this?

[katemihalikova]

You may try using alpha-1 using npm install @ion-datetime-picker/core@1.0.0-alpha.1 --save-exact.

[mydoal]

npm install @ion-datetime-picker/core@1.0.0-alpha.1 --save-exact fixes the AOT compilation problems. Thanks.