1

Busco la forma de calcular en Ionic V2 los días transcurridos entre dos fechas almacenadas en inputs y que muestre el resultado en un modal al hacer clic en el botón calcular.

Esta es la vista en html

        <form id="new-form">
            <ion-item id="new-input2">
              <ion-label stacked>
                Fecha inicial
              </ion-label>
              <ion-input type="datetime-local" placeholder="" name="fechaini" [(ngModel)]="fechaini"></ion-input>
            </ion-item>
            <ion-item id="new-input3">
              <ion-label stacked>
                Fecha final
              </ion-label>
              <ion-input type="datetime-local" placeholder="" name="fechafin" [(ngModel)]="fechafin"></ion-input>
            </ion-item>                
          </form>
      <button id="button1" ion-button block color="dark" (click)="calcular()">
        Calcular
      </button>

Este es el código que tengo en home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

fechaini: any ;
fechafin: any ;

  constructor(public navCtrl: NavController) {

  }

parseDate(str: string): Date {
    let mdy: String[] = str.split('-');
    return new Date(Number(mdy[0]), Number(mdy[1]) - 1, Number(mdy[2]));
  }

daydiff(first, second): Number {
    return Math.round((second - first) / (1000 * 60 * 60 * 24));
  }

calcular (){
     let fIni: Date = this.parseDate("1984-1-3");
     let fFin: Date = this.parseDate("1984-1-16");
     let dias: Number = this.daydiff(fIni, fFin);
     console.log("dias:"+dias);
 }

}
4
  • Hola YES. Deberias añadir tambien lo que has intentado hasta ahora junto a por qué no te funcionó para poder contextualizar a la gente en tu codigo y tambien los intentos infructuosos. Un saludo
    – lois6b
    Commented el 16 ago. 2017 a las 7:15
  • Hola Alex. Edité la pregunta para añadirle el código que tengo hasta ahora.
    – DjCrazy
    Commented el 20 ago. 2017 a las 18:52
  • Hola @YESIDDOTNET no es necesario que edites el titulo para poner solucionado, solo recuerda aceptar tu respuesta que publicaste marcandola como respuesta aceptada con el boton en forma de V del lado izquierdo, si no puedes hacerlo en este momento es porque hay un tiempo de gracia para que se pueda hacer ;)
    – jasilva
    Commented el 24 ago. 2017 a las 21:51
  • Gracias, lo tendré en cuenta.
    – DjCrazy
    Commented el 25 ago. 2017 a las 2:42

1 respuesta 1

1

Finalmente logré resolverlo instalando moment.js

npm install --save moment

se importa en el controlador y se usa una función para calcular los días, en la vista modifiqué el input por un ion-datetime. El código quedó así:

Formulario en home.html

            <form id="new-form">
            <ion-item id="new-input2">
              <ion-label stacked>
                Fecha inicial
              </ion-label>
              <ion-datetime displayFormat="DD/MM/YYYY" placeholder="" name="fechaini" [(ngModel)]="fechaini"></ion-datetime>
            </ion-item>
            <ion-item id="new-input3">
              <ion-label stacked>
                Fecha final
              </ion-label>
              <ion-datetime displayFormat="DD/MM/YYYY" placeholder="" name="fechafin" [(ngModel)]="fechafin"></ion-datetime>
            </ion-item>                
          </form>
      <button id="button1" ion-button block color="dark" (click)="calcular()">
        Calcular
      </button>

Controlador en home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import * as moment from 'moment';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

fechaini: String;
fechafin: String;

  constructor(public navCtrl: NavController) {

  }

calcular(){
    let ini = moment(this.fechaini);
    let fin = moment(this.fechafin);
    let diff = fin.diff(ini, 'days');
    console.log(diff);
}
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.