NgxMonthPicker

Esta libreria fue generada con Angular CLI version 8.2.9.

Instalación

Ejecutar npm i --save ngx-month-picker-range para instalar la dependencia en tu proyecto.

Uso

Para hacer uso de la libreria debes importarla en tu app.module.ts como en el ejemplo:

    import {NgxMonthPickerModule} from 'ngx-month-picker-range';
    ...
    imports: [
        ...
        NgxMonthPickerModule
        ...
    ],

Una vez importado, para usarlo en tu componente puedes usar el siguiente ejemplo:

    <ngx-month-picker 
        mode="single|range" 
        [(ngModel)]="value" 
        [firstYear]="2010" 
    ></ngx-month-picker>

Las propiedades del componente son:

| Propiedad | Tipo | Descripción | |:----------|:-------------:|:-------------| | placeholder | string | Por defecto es "Seleccionar..." | | required | boolean | Por defecto false | | disabled | boolean | Por defecto false | | readonly | boolean | Por defecto false | | mode | string (single/range) | Por defecto "single" | | firstYear | number | Por defecto año en curso - 5 | | lastYear | number | Por defecto año en curso + 5 | | locale | string | Por defecto 'es-MX' |

Se puede personalizar, para ello es necesario asignar la clase para cada parte del componente

| Propiedad | Descripción | |:----------|:-------------| | inputContainerClass | Clase para el contenedor del valor actual (div) | | inputValueClass | Clase para el span donde se muestra el valor actual | | monthItemClass | Clase para cada mes | | edgeClass | Clase para un mes en el borde del rango | | inRangeClass | Clase para un mes que esta dentro del rango | | notYearClass | Clase para los meses que no están dentro del año en curso | | lowerEdgeClass | Clase para el mes inicial del rango | | upperEdgeClass | Clase para el mes final del rango | | cleanBtnClass | Clase para el botón para limpiar los valores actuales | | acceptBtnClass | Clase para el botón que cierra el calendario y emite el valor actual |

Este componente lo hice basandome en el siguiente articulo.

Github

Puedes consultar el código en el repositorio de Github.