Datetime in ionic

Ionic Framework ionic-v3
1

2
down vote
favorite
I have some questions about datetime picker in ionic 2:

  1. what variable to store the datetime when i choose it? i add my the code from my project that i just try to store it in some variables without succcessful

import { Component } from ‘@angular/core’;
import { NavController } from ‘ionic-angular’;
import {DatePicker} from ‘ionic-native’;
import {Calendar} from ‘ionic-native’;
import {Platform} from ‘ionic-angular’;
import { Pipe } from ‘@angular/core’;

/*
Generated class for the InviteDates page.

See Ionic Demo: UI Components & API Customization to Create Interface for more info on
Ionic pages and navigation.
*/
@Component({
selector: ‘page-invite-dates’,
templateUrl: ‘invite-dates.html’
})
export class InviteDates {
dateshow:any;
newdate:any;
d:any;
b:any;
year:any;
month:any;
day:any;
today:Date;
mydate: String = new Date().toISOString();

constructor(public navCtrl: NavController,private platform:Platform) {
this.d="";

}

ionViewDidLoad() {
console.log(‘Hello InviteDates Page’);
this.datefun();
}

}

the html file

<ion-content padding>

<ion-item>
    <ion-label>Date</ion-label>
    <ion-datetime displayFormat="DD/MM/YYYY" [(ngModel)]="mydate"></ion-datetime>
    <p> the date is :{{mydate}}</p>

</ion-item>

2.i want 3datetime:

  • #1 datetime of the current date
  • #2 datetime of chosen date
  • #3 datetime of the time the user chosen how to do that?

3.how can i limit the dates? i mean, the user can’t choose from past, just a week from today for example.

2

In html :

<ion-item>
    <ion-label>Date</ion-label>
    <ion-datetime min={{currentDate}} max="2020" displayFormat="DD/MM/YYYY" [(ngModel)]="chosenDate"></ion-datetime>
</ion-item>
<p> Current date is {{currentDate}}</p>
<p> Chosen date is {{chosenDate}}</p>

And in TS :

export class InviteDates {
public currentDate: String;
public chosenDate: String;

constructor(public navCtrl: NavController,private platform:Platform) {
  this.currentDate = (new Date()).toISOString();
  this.chosenDate = this.currentDate;
}

You can play with the min and max in <datetime>

3 Likes
3

I want to get day, month, year individually. do you have any idea

4

Date.parse(this.chosenDate).getDay()
Date.parse(this.chosenDate).getMonth()
Date.parse(this.chosenDate).getYear()

5

Thanks @mvrc
i did google and made this working fine for me
var selDate = new Date(this.date);
dob_day: selDate.getDate(),
dob_month: selDate.getMonth() + 1,
dob_year: selDate.getFullYear(),