ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
50.48k stars 13.53k forks source link

bug: Angular standalone datetime is missing formatOptions property #29464

Closed moh4sa closed 1 week ago

moh4sa commented 1 week ago

Prerequisites

Ionic Framework Version

v8.x

Current Behavior

Can't bind to 'formatOptions' since it isn't a known property of 'ion-datetime'.

Expected Behavior

works as expected on docs

Steps to Reproduce

add [formatOptions]="{ time: { hour: '2-digit', minute: '2-digit' }, date: { day: '2-digit', month: 'long' }, } property to <ion-datetime> </<ion-datetime>

Code Reproduction URL

https://github.com/moh4sa/dateTimeIssue

Ionic Info

Ionic:

Ionic CLI : 7.2.0 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 8.1.0 @angular-devkit/build-angular : 17.3.6 @angular-devkit/schematics : 17.3.6 @angular/cli : 17.3.6 @ionic/angular-toolkit : 11.0.1

Capacitor:

Capacitor CLI : 6.0.0 @capacitor/android : 6.0.0 @capacitor/core : 6.0.0 @capacitor/ios : 6.0.0

Utility:

cordova-res : not installed globally native-run : 2.0.1

System:

NodeJS : v20.9.0 (/usr/local/bin/node) npm : 10.7.0 OS : macOS Unknown

Additional Information

No response

sean-perkins commented 1 week ago

@moh4sa please double check the reproduction link provided. It links to a blank node example.

When creating or linking a reproduction, please verify you are importing either the IonDatetime component if using standalone components or the IonicModule if using modules. This is required for binding camel case properties with Ionic's components in Angular.

moh4sa commented 1 week ago

@sean-perkins check this repo which will demonstrate the binding issue https://github.com/moh4sa/dateTimeIssue I think it only happens standalone component

sean-perkins commented 1 week ago

Hello @moh4sa, really appreciate the reproduction 🙏 this is a bug. I'll open a PR to address this.