DateTime - default to todays date


#23

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


#24

@rapropos

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 "


#25

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


#26

@rapropos
i found out the solution

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


#27

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.


#28

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
#29

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.


#30

This answer is spot on


#31

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


#32

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.


#33

thanks for the tippy @rapropos.


#34

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


#35

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


#36

@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: " ‘’};


#37

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)]="test.data" name="data"></ion-datetime>


#39

Thanks, works great!


#40

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


#41

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…


#42

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

and

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

TS:

  loadAvailabilities(): Promise<any> {
     return new Promise( (resolve, reject) => {
    this.db.listAvailabilities(this.exKey).then((snapshot) => {
      console.log(snapshot);
      this.availabilities = [];
      snapshot.forEach(snap => {
        this.availabilities.push({
          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
      });
      resolve(this.availabilities);
    //    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>{{availabilitie.kids}} </ion-label>

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

  </ion-card>

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


#43

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?