Componente selector de fecha y hora de material angular

1. Selector DateTime usando dependencia de material angular
2. Otros métodos para crear el componente selector DateTime

El componente datepicker es uno de los componentes utilizados en situaciones en las que estamos completando nuestros formularios de información personal.

Es un componente que se utiliza en los casos en los que queremos seleccionar nuestra fecha de nacimiento en una página o en los que queremos completar el día en que comenzamos un trabajo y finalizamos el trabajo.

Encontramos varios casos en los que vemos el componente selector DateTime en las páginas web. Ahora aprendamos cómo implementarlo usando la dependencia de material angular.

Selector DateTime usando dependencia de material angular

La interfaz de usuario de material angular es la biblioteca goto para componentes listos para usar, y la implementaremos al crear el selector DateTime.

Después de crear un nuevo proyecto angular, navegue por la carpeta del proyecto e instale el material con ng add @angular/material. Ahora a la parte de codificación, navegamos a src>>app, localizamos el archivo app.component.html y escribimos estos códigos:

Fragmento de código para app.component.html:

<mat-form-field appearance="fill">
  <mat-label>Enter a date range</mat-label>
  <mat-date-range-input [rangePicker]="picker">
    <input matStartDate placeholder="Start date">
    <input matEndDate placeholder="End date">
  </mat-date-range-input>
  <mat-hint>MM/DD/YYYY – MM/DD/YYYY</mat-hint>
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-date-range-picker #picker></mat-date-range-picker>
</mat-form-field>

Aquí estamos creando la estructura básica y el comportamiento del componente selector DateTime.

Debemos importar algunas dependencias del material angular al archivo app.module.ts. Hará que nuestro componente selector DateTime funcione.

Fragmento de código para app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatDatepickerModule} from '@angular/material/datepicker';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatNativeDateModule} from '@angular/material/core';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatDatepickerModule,
    MatFormFieldModule,
    MatNativeDateModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Lo que hemos hecho aquí es importar las dependencias necesarias en app.module.ts. Como no haríamos ningún cambio dentro del archivo app.component.ts, lo dejaremos como está.

De esta forma, obtendremos la siguiente salida:

Otros métodos para crear el componente selector DateTime

En aras de la variedad, la exploración y el aprendizaje, visitaremos otros métodos que podemos usar para diseñar un componente selector DateTime.

Componente selector DateTime con la biblioteca ng-bootstrap

Al igual que el material angular, ng-bootstrap es una biblioteca popular que proporciona widgets y dependencias para el marco angular. Es igual de fácil implementar el componente selector DateTime.

Dentro de la carpeta del proyecto de la aplicación angular recién creada que hemos creado, instalaremos ng-bootstrap escribiendo: ng add @ng-bootstrap/ng-bootstrap.

Luego comenzamos con la estructura y comportamiento del componente; nos dirigimos al archivo app.component.html para crear esto con códigos.

Fragmento de código para app.component.html:

<p>Simple datepicker</p>
<ngb-datepicker #dp [(ngModel)]="model" (navigate)="date = $event.next"></ngb-datepicker>
<hr/>
<button class="btn btn-sm btn-outline-primary me-2" (click)="selectToday()">Select Today</button>
<button class="btn btn-sm btn-outline-primary me-2" (click)="dp.navigateTo()">To current month</button>
<button class="btn btn-sm btn-outline-primary me-2" (click)="dp.navigateTo({year: 2013, month: 2})">To Feb 2013</button>
<hr/>
<pre>Month: {{ date.month }}.{{ date.year }}</pre>
<pre>Model: {{ model | json }}</pre>

Con este código, notaremos que la fecha seleccionada se muestra debajo del componente; este comportamiento se crea con las dos últimas líneas de código.

Ahora debemos centrarnos en la funcionalidad del componente selector DateTime. Para hacer eso, navegaremos al archivo app.component.ts y escribiremos estos códigos.

Fragmento de código para app.component.ts:

import {Component} from '@angular/core';
import {NgbDateStruct, NgbCalendar} from '@ng-bootstrap/ng-bootstrap';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'timetwo';
  model: NgbDateStruct;
  date: {year: number, month: number};
  constructor(private calendar: NgbCalendar) {
  }
  selectToday() {
    this.model = this.calendar.getToday();
  }
}

Lo que estamos haciendo con este código es tratar de definir el comportamiento del componente selector DateTime de tal manera que cuando seleccionamos la fecha, la función selectToday() activa el Modelo dentro de app.component.html, que imprime las fechas que hemos elegido.

La parte final trata sobre la gestión de las dependencias que instalamos desde ng-bootstrap. Dentro del archivo app.module.ts, crearemos estos códigos.

Fragmento de código para app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import {FormsModule} from '@angular/forms';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgbModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Obtendremos el siguiente resultado después de escribir todo el código para esta sección:

Selector DateTime usando ng2 NPM

El método final en el que queremos trabajar es la biblioteca ng2, que nos proporciona un componente selector de fecha altamente configurable para el marco angular.

Dentro de nuestra nueva carpeta de proyecto, instalamos la biblioteca ng2 escribiendo: npm i ng2-date-picker. Después de la instalación, nos dirigimos al archivo app.component.html y escribimos los códigos que diseñan la estructura y el comportamiento de la página web.

Fragmento de código para app.component.html:

<dp-date-picker theme="dp-material"
[config]="datePickerConfig" required="true">
</dp-date-picker>
<br />
<input type="button" (click)="updateFormat()"  value="update date picker format" />
<br />
format : {{datePickerConfig.format}}

Ahora nos dirigimos al archivo app.component.ts para hacer algunas codificaciones más, trayendo funcionalidad a nuestro componente selector DateTime.

Fragmento de código para app.component.ts:

import { Component, OnInit, ViewChild } from '@angular/core';
import { FormControl, FormGroup, FormBuilder } from "@angular/forms";
import moment from 'moment'
import { IDayCalendarConfig, DatePickerComponent } from "ng2-date-picker";
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'timethree';
  datePickerConfig = {
    format: 'DD'
  };
  updateFormat() {
    console.log('update')
    this.datePickerConfig = {
      ...this.datePickerConfig,
      format: 'DD-MM-YYYY'
    }
  }
}

Primero, importamos algunos de los módulos ng2 al archivo app.component.ts; importaremos el resto de módulos al archivo app.module.ts.

Luego usamos la función updateFormat() para mostrar la fecha que seleccionamos en el componente selector DateTime.

Lo siguiente es trabajar en el archivo app.module.ts, donde importamos el resto de módulos que necesitamos de la biblioteca ng2.

Fragmento de código para app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { DpDatePickerModule } from "ng2-date-picker";
@NgModule({
  imports:      [ BrowserModule, ReactiveFormsModule, DpDatePickerModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Finalmente, para que la aplicación funcione, debemos agregar esta configuración: "allowSyntheticDefaultImports": true dentro del archivo tsconfig.json de nuestra carpeta de proyecto.

Veremos el siguiente resultado después de seguir con éxito todos los pasos para la sección: