Hi
I’m trying to open an ion-datetime but it doesn’t work, doesn’t show anything, errors neither.
I tried using the ion-datetime out of ion-item and it shows and error, but i don’t want to use it like that
I’m using an api to get the data, and in the page where i put the ion-datetime might be different components, i don’t know if that affects the way it should works or something (my objects and function names are in spanish, sorry)
If you can help me, it’d help me a lot
My HTML code is:
<app-header-secundario Titulo="Agregar Actividad" SubTitulo="{{ actividad }}"></app-header-secundario>
<ion-content padding>
<ion-item (click)=seleccionarActividad($event)>
<ion-label *ngIf="actividad===''" >Seleccione qué actividad desea agregar</ion-label>
<ion-label *ngIf="actividad!=''" text-capitalize>{{ actividad }}</ion-label>
<ion-icon slot="end" name="arrow-dropdown"></ion-icon>
</ion-item>
<ion-row>
<ion-col *ngIf="actividad==='tarea'"
size="12">
<ion-item>
<ion-label position="floating" color="celeste" required>Título de la Tarea</ion-label>
<ion-input name="tituloTarea" [(ngModel)]="tarea.titulo" clearInput></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating" color="celeste">Descripcion de la Tarea</ion-label>
<ion-textarea name="descripcionTarea" [(ngModel)]="tarea.contenido" rows="6"></ion-textarea>
</ion-item>
<!-- <ion-item>
<ion-label color="celeste">Fecha de Entrega</ion-label>
<ion-datetime display-format="DDDD DD/MM/YYYY"
picker-format="DD MMMM YYYY"
doneText="Aceptar"
min="01-01-2019" max="08-05-2019"
placeholder="Seleccione Fecha"
dayShortNames={{diasCorto}}
dayNames={{diasCompleto}}
monthNames={{mesesCompleto}}
monthShortNames={{mesesCorto}}
name="fechaTarea"
[(ngModel)]="tarea.fecha_entrega">
</ion-datetime>
</ion-item> -->
<ion-item>
<ion-label>Date</ion-label>
<ion-datetime displayFormat="DD/MM/YYYY" pickerFormat="DD MMMM YYYY" [(ngModel)]="tarea.fecha_entrega"></ion-datetime>
</ion-item>
</ion-col>
<ion-col *ngIf="actividad==='evento'"
size="12">
<ion-item>
<ion-label position="floating" color="celeste" required>Título del Evento</ion-label>
<ion-input name="tituloEvento" [(ngModel)]="evento.titulo" clearInput></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating" color="celeste">Descripcion del Evento</ion-label>
<ion-textarea name="descripcionEvento" [(ngModel)]="evento.contenido" rows="6"></ion-textarea>
</ion-item>
<ion-item>
<ion-label color="celeste">Fecha de Inicio</ion-label>
<ion-datetime display-format="DDDD DD/MM/YYYY"
picker-format="DD MMMM YYYY"
doneText="Aceptar"
min="01-01-2019" max="08-05-2019"
placeholder="Seleccione Fecha"
dayShortNames={{diasCorto}}
dayNames={{diasCompleto}}
monthNames={{mesesCompleto}}
monthShortNames={{mesesCorto}}
name="fechaEvento1"
[(ngModel)]="evento.fecha_inicio">
</ion-datetime>
</ion-item>
<ion-item>
<ion-label color="celeste">Fecha de Finalizacion</ion-label>
<ion-datetime display-format="DDDD DD/MM/YYYY"
picker-format="DD MMMM YYYY"
doneText="Aceptar"
min="01-01-2019" max="08-05-2019"
placeholder="Seleccione Fecha"
dayShortNames={{diasCorto}}
dayNames={{diasCompleto}}
monthNames={{mesesCompleto}}
monthShortNames={{mesesCorto}}
name="fechaEvento2"
[(ngModel)]="evento.fecha_fin">
</ion-datetime>
</ion-item>
</ion-col>
<ion-col *ngIf="actividad==='examen'"
size="12">
<ion-item>
<ion-label position="floating" color="celeste" required>Examen</ion-label>
<ion-input name="tituloExamen" [(ngModel)]="examen.titulo" clearInput></ion-input>
</ion-item>
<ion-item>
<ion-label color="celeste">Fecha de Realizacion</ion-label>
<ion-datetime display-format="DDDD DD/MM/YYYY"
picker-format="DD MMMM YYYY"
doneText="Aceptar"
min="01-01-2019" max="08-05-2019"
placeholder="Seleccione Fecha"
dayShortNames={{diasCorto}}
dayNames={{diasCompleto}}
monthNames={{mesesCompleto}}
monthShortNames={{mesesCorto}}
name="fechaExamen"
[(ngModel)]="examen.fecha">
</ion-datetime>
</ion-item>
</ion-col>
<ion-col *ngIf="actividad!=''"
size="6" offset="3">
<ion-button color="celeste"
(click)="agregarActividad()">
Agregar Actividad
</ion-button>
</ion-col>
</ion-row>
</ion-content>
And my .ts file is
actividad = '';
json: JSON;
idCurso: string;
nombreCurso: string;
token: string;
tarea: any = {
idUsuario: '',
idCurso: '',
titulo: '',
contenido: '',
fecha_entrega: ''
}
examen: any = {
idUsuario: '',
idCurso: '',
titulo: '',
contenido: '',
tipo_examen: '',
fecha: ''
}
evento: any = {
idUsuario: '',
idCurso: '',
titulo: '',
contenido: '',
fecha_inicio: '',
fecha_fin: ''
}
mesesCorto=['Ene','Feb','Mar','Abr','May','Jun','Jul','Ago','Sep','Oct','Nov','Dic'];
mesesCompleto=['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'];
diasCorto=['Lun','Mar','Mie','Jue','Vie','Sab','Dom'];
diasCompleto=['Lunes','Martes','Miercoles','Jueves','Viernes','Sabado','Domingo'];
constructor(private cursoService: CursoService,
private popoverCtrl: PopoverController,
private toastCtrl: ToastController,
private navCtrl: NavController,
private ruta: ActivatedRoute,
private storage: Storage) {
}
ngOnInit() {
this.idCurso = this.ruta.snapshot.paramMap.get('idC');
this.nombreCurso = this.ruta.snapshot.paramMap.get('nombre');
this.storage.get('TOKEN').then(token => {
this.token = token;
});
this.storage.get('ID').then(idU => {
this.tarea.idUsuario = idU;
this.examen.idUsuario = idU;
this.evento.idUsuario = idU;
});
this.tarea.idCurso = this.idCurso;
this.examen.idCurso = this.idCurso;
this.evento.idCurso = this.idCurso;
}
generarJSON(){
if(this.actividad === 'tarea') {
this.json = <JSON>this.tarea;
} else if(this.actividad === 'evento') {
this.json = <JSON>this.evento;
} else if(this.actividad === 'examen') {
this.json = <JSON>this.examen;
}
console.log(this.json);
}
async seleccionarActividad(event){
const popover = await this.popoverCtrl.create({
component: OpcionActividadComponent,
event,
mode: 'ios',
backdropDismiss: false
});
await popover.present();
const {data} = await popover.onWillDismiss();
this.actividad = data.actividad;
}