I have a date field where the user is able to pick the date and time:
<ion-item>
<ion-label>Date</ion-label>
<ion-datetime displayFormat="DD MMM YYYY" [(ngModel)]="time" (ngModelChange)="onChange($event)" name = "time"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>Time</ion-label>
<ion-datetime displayFormat="HH:mm" minuteValues="0,15,30,45" [(ngModel)]="time" (ngModelChange)="onChange($event)" name = "time"></ion-datetime>
</ion-item>
Similar to the above, I would like the user to be able to select the timezone by timezone offset (e.g. UTC+1:00).
How would I include timezone selection in a datetime picker? If this isn't possible, I'm happy to have a separate dropdown which in turn updates the "time" variable in the typescript (potentially using moment?).
The idea would be that this works similarly to Google Calendar, but just with offset as an option:
Related
I want to display the user's last sign-in date in Kotlin but it always returns today's day.
val user :FirebaseUser = FirebaseAuth().getInstance().currentUser!!
val timeStamp : Timestamp = Timestamp(user.metadata?.lastSignInTimestamp!!)
val date = Date(timeStamp.time)
Toast.make(this, date.toString() ,Toast.LENGTH_SHORT).show()
I want to display the user's last sign-in date in Kotlin
To display the user's last sign-in date in a Kotlin "style", please use the following lines of code:
FirebaseAuth.getInstance().currentUser?.metadata?.apply {
val lastSignInDate = Date(lastSignInTimestamp)
Toast.makeText(this, lastSignInDate.toString() ,Toast.LENGTH_SHORT).show()
}
The result will be a Toast message containing the String representation of the "lastSignInDate" object, which is an object of type Date. Let's suppose the user has signed in last time yesterday, the message might look similar to this:
Wed Mar 31 11:20:10 GMT+03:00 2021
If needed, you can also format the Date in a more readable way, as explained in the answer from the following post:
convert epoch time to date
In my ionic 4 application I am reading a timestamp from my firebase database and attempting to display it in the format of a ion-datetime element.
The page loads and displays ok but my ion-datetime field is blank and I'm getting the following error:
ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous
value: 'model: undefined'. Current value: 'model: Invalid Date'.
at viewDebugError (core.js:19006)
at expressionChangedAfterItHasBeenCheckedError (core.js:18994)
at checkBindingNoChanges (core.js:19096)
at checkNoChangesNodeInline (core.js:21967)
at checkNoChangesNode (core.js:21956)
at debugCheckNoChangesNode (core.js:22560)
at debugCheckDirectivesFn (core.js:22488)
at Object.eval [as updateDirectives] (EditMatchPage.html:42)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:22477)
at checkNoChangesView (core.js:21855)
Here is my html code
<ion-item>
<ion-label position="stacked">Match Date</ion-label>
<ion-datetime
[(ngModel)]="matchDate"
displayFormat="D MMM, YYYY HH:mm"
pickerFormat="DD MMM YYYY HH:mm"
min="2019"
max="2020-12-31"
value="{{currentMatchDetails?.date}}">
</ion-datetime>
</ion-item>
and my .ts function which I don't think is relevant but I'll include it anyway
private async returnMatchDetails(matchId: string){
const matchDetailsSnapshot = await this.matchService.getMatch(matchId).get();
this.currentMatchDetails = matchDetailsSnapshot.data();
this.currentMatchDetails.id = matchDetailsSnapshot.id;
}
You are using both ngModel and value attributes which is causing the issue as both are trying to update the field.
<ion-item>
<ion-label position="stacked">Match Date</ion-label>
<ion-datetime
[(ngModel)]="matchDate"
displayFormat="D MMM, YYYY HH:mm"
pickerFormat="DD MMM YYYY HH:mm"
min="2019"
max="2020-12-31">
</ion-datetime>
</ion-item>
Where matchDate should be on your component:
matchDate = currentMatchDetails ? currentMatchDetails.Date : new Date().toISOString();
Be careful with currentMatchDetails.Date as ionic docs states that it should be ISO 8601 Datetime format.
I want to display this time format in ion-datetime. Both date and time I want to display.
But when I am assigning this value to ngmodel it is not displaying.
Can anyone please help me how to do this.
You can use displayForamt attribute to show date like this.
Check Example blow.
<ion-item>
<ion-label>D MMM YYYY H:mm</ion-label>
<ion-datetime pickerFormat="YYYY/MM/DD H:mm:s" displayFormat="YYYY/MM/DD H:mm:ss" min="1997" max="2010" [(ngModel)]="dateN"></ion-datetime>
</ion-item>
set your date in this format YYYY/MM/DD HH:mm:ss for example 2019/08/05 09:35:07
Here is an example in your .ts file current = '2019/08/01 04:31:07'; // you can format your date to fit this
then in your html
<ion-datetime [(ngModel)]="current" displayFormat="YYYY/MM/DD HH:mm:ss" pickerFormat="YYYY/MM/DD HH:mm:ss"></ion-datetime>
displayFormat decides how you want the date-time to be displayed
I want to set min date and time to ion-datetime. But I am not able to set it without converting that to toISOString().
If I am converting to toISOString() then time is not setting the exact time. It is setting the 5.30 hr previous time.
<ion-datetime text-center placeholder="Start Date"
pickerFormat="MMM-DD-YYYY hh:mm A" displayFormat="MM-DD-YYYY hh:mm A" min="{{startDate}}"></ion-datetime>
startDate: any;
this.startDate = new Date().toISOString();
Can anyone please help me how to resolve this.
You can use the moment library for this and set max date like:
this.startDate = moment.utc(new Date()).local().format('YYYY-MM-DDTHH:mm:ss.SSS');
and ion-datetime does not compare time part.
I'm working with IONIC2, Angular2 and Typescript. I have an Datetime working as follows:
page.html
<ion-datetime displayFormat="DD MMMM YYYY" pickerFormat="DD MMMM YYYY" [(ngModel)]="date"></ion-datetime>
page.ts
date: string = new Date().toISOString();
The ion-datetime field shows time with an hour less, how can I display date on Datetime picker considering the timezone?
Reading this answer I solve my problem. Finally I use:
moment(new Date().toISOString()).locale('es').format();
Thanks to sebaferreras
the simplest is to remove timezone offset in milliseconds:
date = new Date();
myDate: String = new Date(this.date.getTime() -
this.date.getTimezoneOffset()*60000).toISOString();