Categorias
iiiiii
uso de ion-datetime
Descripcion
Se muestra el uso del datetime oinic 6
Nota
<app-header titulo="data time"></app-header>
<ion-content>
<!--********************************datetime por defecto con fecha y hora 12 ************************************************-->
<ion-item>
<ion-label>Data time 1</ion-label>
<ion-datetime-button datetime="calendario1" ></ion-datetime-button>
</ion-item>
<ion-modal [keepContentsMounted]="true">
<ng-template>
<ion-datetime
(ionChange)="tomarfecha($event)"
name="fechauno"
id="calendario1"
presentation="date-time"
preferWheel=false
hour-cycle="12h"
show-default-buttons=true
>
<span slot="title">Selecione una fecha</span>
</ion-datetime>
</ng-template>
</ion-modal>
<ion-item>
<ion-label>Data time 2</ion-label>
<ion-datetime-button datetime="calendario2" ></ion-datetime-button>
</ion-item>
<!--**********************************Solo mostrar horas en datetime******************************************-->
<ion-modal [keepContentsMounted]="true">
<ng-template>
<ion-datetime
name="fechauno"
id="calendario2"
presentation="time"
hour-cycle="12h"
readonly=false
show-default-buttons=true
>
<span slot="title">Solo seleccione hora de 12h</span>
</ion-datetime>
</ng-template>
</ion-modal>
<ion-item>
<ion-label>Data time 3</ion-label>
<ion-datetime-button datetime="calendario3" ></ion-datetime-button>
</ion-item>
<!--*******************************Desabilitar el datepiker*********************************************-->
<ion-modal [keepContentsMounted]="true">
<ng-template>
<ion-datetime
name="fechatres"
id="calendario3"
format="YYYY-MM-DD"
value="2025-04-21"
presentation="date"
readonly=true
show-default-buttons=true
>
<span slot="title">Solo puedes ver la fecha sin cambiarla</span>
</ion-datetime>
</ng-template>
</ion-modal>
<!---*****************************************************************************************-->
<ion-item>
<ion-label>Data time 4</ion-label>
<ion-datetime-button datetime="calendario4" ></ion-datetime-button>
</ion-item>
<ion-modal [keepContentsMounted]="true">
<ng-template>
<ion-datetime
(ionChange)="tomarfecha($event)"
format="YYYY-MM-DD"
value="2023-04-21"
name="fechacuatro"
id="calendario4"
presentation="date"
preferWheel=true
show-default-buttons=true
>
<span slot="title">Calendario modo rueda</span>
</ion-datetime>
</ng-template>
</ion-modal>
</ion-content>
html
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-date-time',
templateUrl: './date-time.page.html',
styleUrls: ['./date-time.page.scss'],
})
export class DateTimePage implements OnInit {
constructor() { }
ngOnInit() {
}
tomarfecha(fecha:any){
console.log(fecha);
}
}