Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[4.2.0] bug: ion-datetime does not displays the correct date if set programatically (e.g. using reactive forms or by [ngModel] prop) #17977

Closed
kevin-barrientos opened this issue Apr 5, 2019 · 6 comments

Comments

3 participants
@kevin-barrientos
Copy link

commented Apr 5, 2019

Bug Report

Ionic version:
[x] 4.2.0

Current behavior:
Setting ionDateTime value programatically results in a day before the original one (e.g. setting 2019-03-01 displays Feb 28, 2019).

Expected behavior:
Set one date and display the same date.

Steps to reproduce:
Set an initial date by setting [ngModel]="'2019-03-01'", it will display as Feb 28, 2019

Related code:

<ion-datetime [ngModel]="'2019-03-01'" </ion-datetime>

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.12.0 (C:\Users\kbarrientos\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.2.0
   @angular-devkit/build-angular : 0.12.4
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.2.4
   @ionic/angular-toolkit        : 1.4.0

Cordova:

   cordova (Cordova CLI) : not installed
   Cordova Platforms     : not available
   Cordova Plugins       : not available

System:

   NodeJS : v10.15.3 (C:\Program Files\nodejs\node.exe)
   npm    : 6.4.1
   OS     : Windows 10
@liamdebeasi

This comment has been minimized.

Copy link
Member

commented Apr 5, 2019

Hi there,

Thanks for the issue. I am unable to reproduce this:

image

What timezone are you in? I can try changing my clock's timezone to yours and see if that makes a difference.

Thanks!

@ionitron-bot ionitron-bot bot removed the triage label Apr 5, 2019

@davl3232

This comment has been minimized.

Copy link

commented Apr 8, 2019

Hi Liam,

I'm facing this same issue.

Two unexpected things happen:

  1. I give a date in format 'YYYY-MM-DD' and ionic displays the date of the previous day.
  2. I pick a date and the output is an ISO string with the date converted to UTC from the user's timezone.

These are unexpected to me because I didn't specify a timezone for the date I passed to the ion-datetime. I expect the component to display the date as I passed it and to return the picked date in the same format I first passed (YYYY-MM-DD) without timezone changes from what is displayed.

Also, if I do pass a date with timezone I would expect ion-datetime to do these conversions for me.

I don't know if this behavior would fit better as an option for the component to use either no timezone or user timezone.

I made a repo that reproduces this bug. It has a text input that passes its string value to an ion-datetime and another text input that shows the value output by the ion-datetime.
You need to set your computer's timezone to a negative timezone, the screenshot below was taken with timezone GMT-5.

https://github.com/davl3232/prueba-fechas

Screen Shot 2019-04-08 at 3 02 22 PM

Thank you.

@ionitron-bot ionitron-bot bot added triage and removed needs: reply labels Apr 8, 2019

@liamdebeasi

This comment has been minimized.

Copy link
Member

commented Apr 11, 2019

Hi there,

Thanks for additional info. I can confirm that this is a bug.

It's technically correct as the JS Date implementation assumes 2019-03-20 00:00.00 and applies a timezone offset (in this case GMT-5) which would bring you to 2019-03-19 19:00.00. For what we are trying to provide with ion-datetime, this is not desired functionality.

I will work on getting a fix in for this. As an (odd) workaround, adding a single space after your input appears to fix the issue.

Thanks!

@ionitron-bot ionitron-bot bot removed triage labels Apr 11, 2019

@liamdebeasi liamdebeasi added this to Backlog 🤖 in Ionic Core via automation Apr 11, 2019

Ionic Core automation moved this from Backlog 🤖 to Done 🎉 Apr 16, 2019

@liamdebeasi

This comment has been minimized.

Copy link
Member

commented Apr 16, 2019

Hi there,

This issue has been fixed and will be in the next release of Ionic.

Thanks!

@davl3232

This comment has been minimized.

Copy link

commented Apr 24, 2019

Hi, it's working on 4.3.0. Thank you!

@ionitron-bot

This comment has been minimized.

Copy link

commented May 24, 2019

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators May 24, 2019

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.