DateTime - default to todays date


No, because it works for me, so you would have to share your code for anybody to be able to say anything constructive.



in .ts file i am getting date like this
myDate: String = new Date().toISOString();

and in .html file
" ion-datetime displayFormat=“YYYY/MM/DD” pickerFormat=“YYYY MMMM DDDD” min=“2017” [(ngModel)]=“myDate” name=“booking_date”></ion-datetime "


I am not seeing anywhere in what you posted where you call anything from date-fns.


i found out the solution

new Date(new Date().getTime()+(32460601000)).toISOString();
in this I am adding 3 days in the actual date


OK, whatever. The entire point of libraries like date-fns is to eliminate the need for such ugliness as (3*24*60*60*1000), but if you’re not sufficiently motivated to get it to work and are happy with that, it’s not my business.


new Date().toISOString() is returning wrong time. It does not calculate the timezone I suppose.
Any idea how to fix this.
I am trying on simulator and time in simulator is 11:40 AM but Date object returns 9:40 AM

Calendar for scheduling app

Javascript time library does not manage time correctly.
I recommend using moment.js.
go to you folder application, run : npm install moment --save
in your page.ts add: import * as moment from ‘moment’;
declare your variable: myDate= moment().format();

Now just use ion-datetime like this:

                <ion-datetime type="datetime-local" displayFormat="MMM, YYYY" max="2099-12-31" [(ngModel)]="myDate"  ></ion-datetime>

I hope this helps.


This answer is spot on


Hello, your solution helped me. Would you like to know if you can put this result inside an object? Has an obejto receiving date:

Test = {data: ‘’, value: ‘’};

I tried to put

Test = {data: moment (). Format (), value: ‘’};

but it does not work


I used to use moment, but now I prefer date-fns. It’s much lighter weight, works with ISO 8601 strings or Date objects, needs no dedicated special object type like moment does, and is much more amenable to dead code elimination.


thanks for the tippy @rapropos.


it’s format not Format
try this: Test = {data: moment().format(), value: "’’};


Does not really work for me, I’m trying now with date-fns


@Claumir Did you add ? import * as moment from ‘moment’;
This is really weird I just tested it in Ionic 2.3.0 ant it works fine
Test = {data: moment ().format(), value: " ‘’};


Yes I did, even showed me the methods. Now I’m getting to use it, but for some reason it does not take the date to the ion-datetime through ngModel

test = {data: moment ().format(), value: ''};

<ion-datetime displayFormat="DD/MM/YYYY" [(ngModel)]="" name="data"></ion-datetime>


Thanks, works great!


works perfectly the date-fns even inside the *ngfor that i was fighting against heheh … thanks bro


May I ask the advocates of Date FNS to give a simple example of using it in HTML and TS just like its explained for Moment above. I think, its annoying to some extent to not to give real answer on date fns and expecting to be used…


I thought that my scenario wouldn’t be the same as the original asked therefore i didn’t post it, but it if it can be useful here it go:

install with

npm install date-fns --save


import {format} from 'date-fns/esm';


  loadAvailabilities(): Promise<any> {
     return new Promise( (resolve, reject) => {
    this.db.listAvailabilities(this.exKey).then((snapshot) => {
      this.availabilities = [];
      snapshot.forEach(snap => {
          key: snap.key,
          dateStart: format(snap.val().dateStart, 'dddd, DD MMMM HH:mm:ss'),
          dateEnd: format(snap.val().dateEnd, 'dddd, DD MMMM HH:mm:ss'),
          adults: snap.val().adults,
          kids: snap.val().kids,
          status: snap.val().status
        return false
    //    this.loader.hidePreloader();

HTML: (* I know availability wasn’t the best word to use here lol)

  <ion-card *ngFor="let availabilitie of availabilities" padding>

     <ion-note> Start </ion-note> <ion-label> {{availabilitie.dateStart}} </ion-label>
     <ion-note> Finish </ion-note> <ion-label> {{availabilitie.dateEnd}}  </ion-label>
     <ion-note> Adults </ion-note> <ion-label>{{availabilitie.adults}} </ion-label>
     <ion-note> Kids</ion-note> <ion-label>{{}} </ion-label>

          <button ion-button icon-left clear small color='danger'>
            <ion-icon name="trash"></ion-icon>


The documentation is quite good at their website, i’ve started developing 1 month ago and manage to do it.


i tried it and it also display current date on screen but when i print the vale of myDate on console then it represent current date in ISO format.So how can change its ISO format to another?