ng-date-carousel-picker

Angular library with custom date picker, which differs from other similar components in design, scroll and calendar in the end of period (if specific property set to true).

Motivation

Sometime ago I needed a datepicker in one of my pet project. I wanted to make it BeAuTiFuL. BeAuTiFuL means great, gorgeous, usable, user-friendly. BeAuTiFuL can also be described by this meme:

I created a component, but only inside of that pet project. So I thought it would be great if it was a separate component that could be reused...

Usage

1. Install library:

npm i ng-date-carousel-picker

2. Import the component:

// ...
import { NgDateCarouselPickerComponent } from 'ng-date-carousel-picker';

@Component({
  // ...
  imports: [NgDateCarouselPickerComponent]
})
export class SomeComponent {
  // ...
}

3. Add in template:

<ng-date-carousel-picker></ng-date-carousel-picker>

Input properties

[!IMPORTANT]
All input properties are optional. If you didn't provide a value, it would set default value.

Name	Type	Description	Default
scrollShift	number	Distance (in px) which scrolls with button click. By default is 150.	150
startDate	Date	Date of period beginning. By default is current date.	new Date()
endDate	Date	Date of period end. By default is exactly 3 months more than current date.	new Date() + 3 months
showCalendar	boolean	Need to show calendar instead of scroll button in the end of period. By default is true.	true
firstDayOfWeekIndex	number	Order (number) for first day of the week, 0 is for Sunday, 1 is for Monday. By default is 1.	1
weekendIndexes	number[]	Numbers for weekend days. By default [0, 6].	[0, 6]

Output properties

Name	Description
changed	Emitter of changed value. Can be null, one day or range.

[!NOTE]
You can see scripts for library in root README.