Applabcontrols NPM

AppLap Controls

Try three controls with no external dependencies.

You can use this to create your own calendar, time selection and number selection controls

🗜️ Installation

npm i moment --save
npm i applabcontrols --save

Note: moment is an necessary dependency

#Usage

In app.module.ts

import { CalendarModule, 
			ApplabcontrolsModule, 
			TimeSelectModule, 
			NumberSelectModule } from 'applabcontrols';

@NgModule({
  ...,
  imports: [
    ..,
    CalendarModule,
    ApplabcontrolsModule, 
    TimeSelectModule,
    NumberSelectModule
  ],
})

In TS template

import { CalendarConfig, 
			configNumberSelecter, 
			configTime, 
			Time } from 'applabcontrols';
import * as moment from 'moment';
//config numer selector 
config:configNumberSelecter = {
    max:10,
    min:1,
    steps:1
  }
seletNumer: number = 0;
//config time selector for hour and minut
  configTime: configTime = {
    minH:0,
    minM: 0,
    maxH: 12,
    maxM: 55,
    stepsH: 1,
    stepsM: 5,
    time: "AM"
  };

selectTimer: string = ""; // the formar is h:mm AM
//Config of calendar "nameWeek" is array of string with names of days o week
//and "blokDays" is array of string with dates to blok in calendar with format yyyy-mm-dd
  configCalendar: CalendarConfig = {
        nameWeek:['Lunes','Martes','Miercoles','Jueves','Viernes','Sabado','Domingo'],
        blockDays:['yyyy-mm-dd'],//only use this
        enabledDays:["yyy-mm-dd",]//or this
        moment: moment
        };
dateSelect: any = "2022/08/15";//Formato YYYY/MM/DD
//ouput of calendar
  selectDate(event:any){
    console.log(event);
  }
//ouput of time selecter
  time(event: Time){
    console.log(event);
  }
//ouput of numer selecter
  selectSets(events: number){
    console.log(events);
  }

  //ouput of change month
  monthChange($event: any){
    console.log($event);
  }

In HTML template

<!--calendar control-->
<applab-calendar [config]="configCalendar" (daySelect)="selectDate($event)"></applab-calendar>

<!--time selecter control-->
<applab-time-select [Config]="configTime" [(ngModel)]="selectTimer" (timeSelect)="time($event)" (monthChange)="monthChange($event)">
</applab-time-select>

<!--numer selecter control-->
<applab-number-select [config]="config" [(ngModel)]="seletNumer"></applab-number-select>