Nightclub Party Music

    @nsnayp/angular-datepicker2
    TypeScript icon, indicating that this package has built-in type declarations

    2.2.13 • Public • Published

    Angular Datepicker 2

    v2.x.x

    Add suggestions from v2.2.x Add events from v2.1.x

    Node.js CI

    npm i angular-datepicker2

    now @angular/core: ^8.2.14

    DEMO

    https://nsnayp13.github.io/angular-datepicker2/

    Getting started

    Set to imports app.module.ts import { AngularDatepicker2Module } from 'angular-datepicker2'. Then you can use it by tag <angular-datepicker2></angular-datepicker2>.

    Options

    Props of AngularDatepicker2:

    // Array of selected dates.
    [(selectedDates)]: Date[]
    
    // Array custom definitions of days. Subscribable. See Day interface
    [days]: Day[]
    
    // Array custom definitions of suggestions. Suggestions for select dates
    [suggest]: Suggest[]
    
    // Date whould be render for default calendar .
    shownDate: Date
    
    // Alignment of days in a week. Default horizontal.
    vertical: boolean
    
    // Present mode of calendar. Quarter, semester or number of months. Default 1. Import from public-api or interfaces. Its enum
    viewMode: ViewMode | number
    
    // Start week day, default 0
    weekStart: number
    
    // Weekends, default [0,6], set Day.isWeekend true
    weekends: number[] = [0, 6]
    
    // Single, Multiple, Period. Import from public-api or interfaces. Its enum
    selectMode: SelectMode
    
    
    // Callback event when click on day
    // its returns a Day object before change self state by click
    (onDayClick)
    

    i18n

    set registerLocaleData(locale, "locale") in your app.module.ts. See https://angular.io/api/common/registerLocaleData

    Example

    this.selectedDates = [new Date(2020, 3, 7), new Date(2020, 3, 9)];
    
    this.shownDate = new Date(2020, 3, 7);
    
    this.suggest = [
      {
        title: "Last two weeks",
        selectMode: SelectMode.Period,
        selectedDates: [new Date(2020, 3, 1), new Date(2020, 3, 12)],
      },
      {
        title: "Last month",
        selectMode: SelectMode.Period,
        selectedDates: [new Date(2020, 3, 1), new Date(2020, 3, 30)],
      },
      {
        title: "1, 4 and 30",
        selectMode: SelectMode.Multiple,
        selectedDates: [
          new Date(2020, 3, 1),
          new Date(2020, 3, 4),
          new Date(2020, 3, 30),
        ],
      },
    ];
    
    this.days = [
      {
        isDisabled: false,
        isHovered: false,
        isSelected: false,
        isWeekEnd: true,
        date: new Date(2020, 3, 21),
      },
      {
        isDisabled: true,
        isHovered: false,
        isSelected: false,
        isWeekEnd: true,
        date: new Date(2020, 3, 26),
        template: {
          component: {
            componentClass: TestDayComponent,
            props: [
              {
                propName: "title",
                type: "input",
                value: new Date(2020, 3, 26).getDate(),
              },
              {
                propName: "callback2",
                type: "output",
                value: (data) => {
                  alert("click custom day. See Day interface");
                },
              },
            ],
          },
        },
      },
    ];
    <angular-datepicker2
      [shownDate]="shownDate"
      [suggest]="suggest"
      [days]="days"
      [(selectedDates)]="selectedDates"
      [selectMode]="'period'"
      [weekends]="[0,1]"
      [weekStart]="1"
      [viewMode]="'quarter'"
    ></angular-datepicker2>

    Install

    npm i @nsnayp/angular-datepicker2

    DownloadsWeekly Downloads

    1

    Version

    2.2.13

    License

    MIT

    Unpacked Size

    717 kB

    Total Files

    53

    Last publish

    Collaborators

    • nsnayp