Angular Material — Datepicker 🧑💻
Si ya hemos tenido un acercamiento con angular estos pasos te van a resultar muy sencillos, y claro debemos de tener instalado Angular CLI para que estos comandos los reconozca nuestro equipo:
1. Crear aplicación de Angular
Si conocemos algunos comandos de angular sabremos que para crear una nueva aplicación debe agregar lo siguiente en nuestra consola.
2. Instalar Angular Material
Para que podamos hacer uso de datepicker debemos agregar el siguiente comando, ya que este hará que podamos usar diferentes componentes de esta líbreria.
Nos mostrará un mensaje donde debemos seleccionar lo siguiente:
Installing packages for tooling via npm.Installed packages for tooling via npm.? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink[ Preview: https://material.angular.io?theme=indigo-pink ]? Set up HammerJS for gesture recognition? Yes? Set up browser animations for Angular Material? Yes
3. Importar Modulo Material Datepicker
En este paso importaremos el angular datepicker en el modulo que debamos usarlo. Para que este funcione de manera adecuada debemos agregar estos módulos:
- MatDatepickerModule
- MatNativeDateModule
- MatFormFieldModule
- MatInputModule
Si no agregamos estos módulos no tendremos un resultado acorde a lo que buscamos.
4. Uso del Datepicker de Angular Material
Para finalizar con nuestro módulo datepicker debemos de agregar las siguientes líneas en nuestro componente HTML
Ya colocando estas líneas podemos proseguir con observar como quedo nuestro datepicker y para poder hacer esto debemos de agregar el siguiente comando en nuestra consola
5. Resultado Final
Podemos observar que quedo de esta manera y con un estilo totalmente diferente al que nos ofrece los navegadores.
Si nos piden algo mucho mas complejo la documentación de Angular Material nos ofrece diferentes tipos de datepicker. De ti depende en que momento aplicarlos 👌
Espero les haya servido esta guía sobre Angular Material — Datepicker 😎. Si tienes dudas, inquietudes o añadir algo sobre esta configuración puedes dejar tu comentario.
