spcm-datepicker

The SpcmDatepickerComponent is a custom Angular component that integrates the Kendo UI for Angular DatePicker, offering extensive customization for date selection and display.

Features

• Date Selection: Allows users to select dates within specified ranges with support for various formats.

• Customization: Provides flexibility in configuring placeholder text, initial focused date, minimum and maximum selectable dates, and more.

• Visual Customization: Customize appearance with options for size, fill mode, and calendar type (standard or infinite).

• Animation: Supports animated navigation within the calendar.

Component Properties

Inputs

• value: any - The currently selected date value.

• disabled: (boolean) - Disables the date picker if set to true.

• control: (FormControl) - Form control data binding.

• placeholder (string) - Placeholder text displayed when no date is selected.

• focusedDate (Date) - The initially focused date when the date picker opens.

• min (Date) - The minimum selectable date.

• max (Date) - The maximum selectable date.

• showOtherInfinite (boolean) - Shows or hides days from adjacent months in the calendar.

• format (string) - Date format string for displaying and parsing dates.

• formatPlaceholder (any) - Placeholder strings for month, day, and year in the format input.

• readonly (boolean) - Makes the date picker readonly.

• readOnlyInput (boolean) - Makes the date input field readonly.

• navigation (boolean) - Enables or disables navigation buttons in the calendar.

• fillMode (DateInputFillMode) - Fill mode of the input ('outline' or 'solid').

• size (DateInputSize) - Size of the input ('small', 'medium', 'large').

• message (string) - Custom message to display in the date picker.

• bottomView (CalendarView) - Initial view of the calendar when opened ('month', 'year', 'decade').

• topView (CalendarView) - Highest level view in the calendar navigation ('decade' or 'century').

• calenderType (CalendarType) - Type of the calendar ('standard' or 'infinite').

• animateCalendarNavigation (boolean) - Flag to animate calendar navigation.

Outputs

• onValueChange (EventEmitter<any>) - Event emitted when the selected date changes.

Installation

Install spcm-datepicker via npm or yarn:

npm  install  spcm-datepicker

Usage

Import Component

Import SpcmDatepickerComponent into your Angular standalone component.

   
    import { SpcmDatepickerComponent } from  'spcm-datepicker';
    
    @Component({
	    selector:  'app-root',
	    standalone:  true,
	    imports: [
		    RouterOutlet,
		    CommonModule,
		    SpcmDatepickerComponent
	    ],
	    templateUrl:  './app.component.html',
	    styleUrl:  './app.component.css'
    })
    
    export  class  AppComponent { }

Use Component

In your component template, use the spcm-datepicker component:

    <spcm-datepicker
      [disabled]="false"
      [placeholder]="'Select Date'"
      [focusedDate]="initialDate"
      [control]="formControl"
      [min]="minDate"
      [max]="maxDate"
      [showOtherInfinite]="false"
      [format]="'MM/dd/yyyy'"
      [formatPlaceholder]="{ month: 'MM', day: 'DD', year: 'YYYY' }"
      [readonly]="false"
      [readOnlyInput]="false"
      [navigation]="true"
      [fillMode]="'outline'"
      [size]="'medium'"
      [message]="'Today is a special day!'"
      [bottomView]="'month'"
      [topView]="'decade'"
      [calenderType]="'infinite'"
      [animateCalendarNavigation]="true"
      (onValueChange)="handleDateChange($event)">
    </spcm-datepicker>