rafaelaqueirozg / angular-day-picker

A simple and customizable day picker component built with Angular.

📆 Angular Day-Picker

Angular Day-Picker is a simple and customizable day picker component built with Angular.

📌 Live demo

See it in action, check out the demo page.

🚀 Technologies

• TypeScript
• Angular (v12.0.2)
• Scss
• Jasmine

⛏ Tools

• Visual Studio Code
• Karma

Or edit on Stackblitz.

💻 Usage

Install this lib

npm i --save ng-day-picker

In your module:

import { NgDayPickerModule } from 'ng-day-picker'

@NgModule({
  imports: [
    NgDayPickerModule
  ]
})

In your component:

import { Component } from "@angular/core";

import { SelectedDaysEmitter } from "ng-day-picker";

@Component({
  selector: "app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent {
  selectedDays({
    selectedDays,
    humanizedSelectedDays,
  }: SelectedDaysEmitter): void {
    console.log("selectedDays", selectedDays);
    console.log("humanizedSelectedDays", humanizedSelectedDays);
  }
}

In your HTML:

<ng-day-picker
  [label]="'Your label here'"
  [range]="{ initialDay: 1, finalDay: 31 }"
  [required]="true"
  [disabledDays]="[1, 31]"
  [maxSelectableDays]="5"
  (selectedDaysEmitter)="selectedDays($event)"
></ng-day-picker>

🤝 Contributions

Feel free to contribute. Suggestions, bugs reports or new features are always welcome.

📔 License

This project is under the MIT LICENSE.

✨ Acknowledgment

I want to thank my friend Diego for all the support and sugestions on this project; to my mentor Danilo for the tips and encouragement; to me for never giving up, always looking to learn and evolve; and to everyone who supports me directly or indirectly.

Made with ❤️ by Rafaela Queiroz