Ionic 4: DateTime - Start picker on today's date

[bkarv]

Feature Request

Ionic Info
Run ionic info from a terminal/cmd prompt and paste the output below.

Ionic:

   ionic (Ionic CLI)             : 4.3.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-beta.15
   @angular-devkit/build-angular : 0.9.0-beta.3
   @angular-devkit/schematics    : 0.9.0-beta.3
   @angular/cli                  : 6.1.5
   @ionic/angular-toolkit        : not installed

Cordova:

   cordova (Cordova CLI) : 7.1.0
   Cordova Platforms     : browser 5.0.4
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.2.0, (and 9 other plugins)

System:

   ios-deploy : 1.9.1
   NodeJS     : v10.10.0 (/usr/local/bin/node)
   npm        : 6.4.1
   OS         : macOS High Sierra

Describe the Bug
In DateTime when a 'max' is set, the date picker starts at at max value, which makes it a poor UI experience. It should start at current date/time or property to supply a starting point.

Steps to Reproduce
In Ionic 4 set Datetime 'max' to a large number and picker will start their.

Expected Behavior
Start at today's date or allow us to supply a starting pointl

Additional Context

.

[bryce13950]

Have you tried adding an initial value to this as todays date?

[bkarv]

I was trying to avoid dirtying the form. I can do a work around by having a viewValue and my dataValue. The viewValue is what the date time uses whilst the dataValue updates if the OK button is pressed which now can be controlled though the custom picker options.

However it’s seems a bit of work for something that logically should be available. If you look at angular material date picker which is a good comparison given it’s maturity and popularity, they have a whole section dedicated to setting the initial view.

https://material.angular.io/components/datepicker/overview

[bryce13950]

Yeah it's definitely not ideal, but I am just trying to find a way that you can get around it for the time being. We will let you know when it is fixed!

[bkarv]

Thanks for considering, look forward to the fix

[bkarv]

Is there any idea when this will be fixed?

I’ve tried as a work around setting the today date when date is empty using the ionFocus event but still doesn’t work ie displays on max range.

Is there any other work around available in the interim?

[liamdebeasi]

Hi @bkarv,

I have created a PR that will fix this issue: #17443

Hoping to get it merged in soon.

Thanks for using Ionic!

[bkarv]

@liamdebeasi thank you, ultimately if we can have a property that allows us to pass a start view date like today's date that would be awesome

[liamdebeasi]

Hi @bkarv,

You should be able to do that already. If you provide a valid ISO string to the value prop, it should start the date picker on that date.

Example:

<ion-datetime value="2019-02-14T09:00:00.000Z"></ion-datetime>

[bkarv]

@liamdebeasi Unfortunately no the issue is the value is initially null, if you set this value it will show as as the value set in the UI input not as null. Maybe I wasn't clear what I meant by start view date, I meant the value to be shown when the date selection window is open. It would be great to be able to pass the value for the dial to open on if not value is set.

But hey right now I settle for it opening on the current date when the value is null.

Can you just confirm in datetime mode it shows the current local time as I think there was a bug in Ionic 3 when it wouldn't open on the current time. Many thanks for the help on this..

[liamdebeasi]

Hi @bkarv,

Thanks for the clarification. In the next release of Ionic (v4.1.0), the datetime component will default to the current date/time when value is null.

I will add "being able to set the starting date" as a feature request. (#16630)

Thanks for using Ionic!

[bkarv]

@liamdebeasi Thanks Liam upgraded and looks like it is defaulting to today's time. However it seems like it defaults to GMT time not the local time. Another person has already raised an issue:

#17587

[liamdebeasi]

Hi @bkarv,

This has been fixed via #17706 and will be in the next release of Ionic. I have published a nightly build of Ionic with this fix (npm install @ionic/core@dev). Feel free to test it out and provide feedback if you have the time.

Thanks!

[carlos2712]

Hi @liamdebeasi I've been using the nightly build ( "@ionic/core": "^4.1.2-dev.201903111954.bab56e8") in order to have the current date on ion-datetime but I'm still getting the wrong date/hour:

Example :

My code:
<ion-datetime picker-format="MM/DD/YYYY HH:mm" display-format="HH:mm" placeholder="-Select-" [(ngModel)]="item.StartTime" (ionChange)="updateProviderTime(item)"> </ion-datetime>

Scenario:
item.StartTime = null
Time Zone: Eastern
Do I miss something?

[liamdebeasi]

Hi @carlos2712,

If you set item.StartTime = undefined does that fix it?

Thanks!

[carlos2712]

@liamdebeasi

Nope, It didn't work. I tried with undefined and also like this :

<ion-datetime class="input-style" picker-format="MM/DD/YYYY HH:mm" display-format="HH:mm" placeholder="-Select-" (ionChange)="updateProviderTime(item)"> </ion-datetime>

Like not having values at all. But it didn't work. Any idea? Thanks!

[liamdebeasi]

Interesting. The following datetimes are showing the correct date and formatted properly:

<ion-datetime picker-format="MM/DD/YYYY HH:mm" display-format="HH:mm" placeholder="-Select-" [value]="undefined"></ion-datetime>
  
<ion-datetime picker-format="MM/DD/YYYY HH:mm" display-format="HH:mm" placeholder="-Select-"></ion-datetime>  

The following datetimes are not formatted properly (working on a fix for this):

<ion-datetime picker-format="MM/DD/YYYY HH:mm" display-format="HH:mm" placeholder="-Select-" [value]="null"></ion-datetime>  

None of these are working for you, correct?

[carlos2712]

Yeah, correct look at my screenshot :

[liamdebeasi]

Thanks for the additional info. Could you post the contents of your package.json?

[carlos2712]

{
"name": "App",
"version": "1.0.0",
"author": "App",
"homepage": "https://www.app.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^7.2.4",
"@angular/cdk": "^7.3.2",
"@angular/common": "^7.2.2",
"@angular/core": "^7.2.2",
"@angular/forms": "^7.2.2",
"@angular/http": "^7.2.2",
"@angular/platform-browser": "^7.2.2",
"@angular/platform-browser-dynamic": "^7.2.2",
"@angular/pwa": "^0.13.5",
"@angular/router": "^7.2.2",
"@angular/service-worker": "^7.2.2",
"@ionic-native/barcode-scanner": "^5.0.0",
"@ionic-native/core": "5.2.0",
"@ionic-native/network": "^5.2.0",
"@ionic-native/splash-screen": "^5.0.0",
"@ionic-native/status-bar": "^5.0.0",
"@ionic/angular": "^4.0.0",
"@ionic/core": "^4.1.2-dev.201903111954.bab56e8",
"@ionic/pro": "^2.0.4",
"@ionic/storage": "^2.2.0",
"cordova-android": "7.1.4",
"cordova-browser": "5.0.4",
"cordova-ios": "4.5.5",
"cordova-osx": "4.0.2",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-document-viewer": "^0.9.10",
"cordova-plugin-file": "6.0.1",
"cordova-plugin-file-transfer": "1.7.1",
"cordova-plugin-inappbrowser": "^3.0.0",
"cordova-plugin-ionic": "5.3.0",
"cordova-plugin-ionic-keyboard": "^2.1.3",
"cordova-plugin-ionic-webview": "^3.1.2",
"cordova-plugin-network-information": "^2.0.1",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-statusbar": "^2.4.2",
"cordova-plugin-whitelist": "^1.3.3",
"cordova-sqlite-storage": "^3.1.0",
"cordova-windows": "6.0.1",
"core-js": "^2.5.4",
"ionic": "^4.11.0",
"moment": "^2.24.0",
"moment-timezone": "^0.5.23",
"phonegap-plugin-barcodescanner": "^8.0.1",
"rxjs": "~6.3.3",
"terser": "^3.14.1",
"zone.js": "~0.8.29"
},
"devDependencies": {
"@angular-devkit/architect": "~0.12.3",
"@angular-devkit/build-angular": "~0.12.3",
"@angular-devkit/core": "~7.2.3",
"@angular-devkit/schematics": "~7.2.3",
"@angular/cli": "~7.2.3",
"@angular/compiler": "~7.2.2",
"@angular/compiler-cli": "~7.2.2",
"@angular/language-service": "~7.2.2",
"@ionic/angular-toolkit": "~1.3.0",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^10.12.26",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.1.4",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~8.0.0",
"tslint": "~5.12.0",
"typescript": "~3.1.6"
},
"description": "xxx Version",
"cordova": {
"plugins": {
"cordova-plugin-whitelist": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {},
"cordova-plugin-ionic-keyboard": {},
"phonegap-plugin-barcodescanner": {},
"cordova-sqlite-storage": {},
"cordova-plugin-document-viewer": {},
"cordova-plugin-inappbrowser": {},
"cordova-plugin-network-information": {},
"cordova-plugin-ionic": {
"APP_ID": "xxxx",
"CHANNEL_NAME": "xxx",
"UPDATE_METHOD": "xxx",
"UPDATE_API": "https://api.ionicjs.com",
"MAX_STORE": "2",
"MIN_BACKGROUND_DURATION": "30"
}
},
"platforms": [
"ios",
"android",
"browser",
"osx",
"windows"
]
}
}

[liamdebeasi]

Ah! Make sure you install the nightly @ionic/angular too (npm i @ionic/angular@dev). Sorry, should have specified earlier. I pushed a new nightly this morning, so you might want to update @ionic/core to the latest nightly as well.

[carlos2712]

Thanks! after update, even though the value is undefined is showing the current time on the input is not respecting the placeholder :

[liamdebeasi]

Great, glad to hear the time is formatting correctly. I will work on a fix for the placeholder issue.

[carlos2712]

Thanks! Will be more than happy to test when you get the PR.

[liamdebeasi]

I appreciate all the testing you are doing! I pushed a new nightly build a moment ago that should resolve the placeholder issues. There were some discrepancies between the core Ionic component and Angular's [(ngModel)] binding that I had to account for, so hopefully I didn't miss any other scenarios 🙂.

[carlos2712]

Okay, I will test that out! Thank you for your help!

[liamdebeasi]

Hi there,

This has been fixed with the latest version of Ionic (v4.1.2)! To get the latest changes, run npm i @ionic/core@latest @ionic/angular@latest.

Thanks!

[ionitron-bot]

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.