Non-Partisan Magicians

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

    3.4.3 • Public • Published

    Angular Datepicker 2

    v3.x.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
    
    // Disabed dates to select by click on a day. See DisabledDates interface. Suggest select work
    disabledDates: DisabledDates
    
    // 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):Day
    
    // Callback event when selectedDatesChange changed
    // its returns a Date[]
    (selectedDatesChange):Date[]

    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.disabledDates = {
      dates?:[], // :Date[]
      after?: new Date(2020, 3, 7), // :Date
      before?:null // : Date
    };
    
    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),
      },
    ];
    <angular-datepicker2
      [shownDate]="shownDate"
      [suggest]="suggest"
      [days]="days"
      [(selectedDates)]="selectedDates"
      [selectMode]="'period'"
      [weekends]="[0,1]"
      [weekStart]="1"
      [viewMode]="'quarter'"
      [disabledDates]="disabledDates"
    >
      <!--  Here special directive *day="let date from new Date()"
            Wrap or html or component by *day
      -->
    
      <!--  If you are use *ngFor set it to ng-container. 
            <ng-container *ngFor="let dateItem of datesArray">
              <yourComponentOrDiv *ad2day="let date from dateItem">
                  day is {{date.getDate()}}
              </yourComponentOrDiv>
            </ng-container>
      -->
    
      <div *day="let date from days[0].date" [attr.title]="'Custom day'">
        {{date.getDate()}}
        <div class="points">
          <div class="point blue"></div>
          <div class="point green"></div>
        </div>
        <!--app -my-custom-component-->
      </div>
    </angular-datepicker2>

    Install

    npm i angular-datepicker2

    DownloadsWeekly Downloads

    4

    Version

    3.4.3

    License

    MIT

    Unpacked Size

    792 kB

    Total Files

    56

    Last publish

    Collaborators

    • nsnayp