Skip to content

define own calendar animation

Keke edited this page Mar 5, 2020 · 2 revisions
<input angular-mydatepicker [(ngModel)]="model" [options]="myDatePickerOptions" 
   #dp="angular-mydatepicker">
import {IAngularMyDpOptions, CalAnimation} from 'angular-mydatepicker';

export class MyApp {
    myDatePickerOptions: IAngularMyDpOptions = {
        dateFormat: 'dd.mm.yyyy',
        calendarAnimation: {in: CalAnimation.Own, out: CalAnimation.Own},
        stylesData: {
          selector: 'dp1',
          styles: `
          .dp1 .myDpAnimationOwnIn {
             animation: myDpAnimationOwnIn 0.3s linear;
          }

          @keyframes myDpAnimationOwnIn {
             0% {
               // add in animation here
             }
             100% {
               // add in animation here
             }
          }

          .dp1 .myDpAnimationOwnOut {
             animation: myDpAnimationOwnOut 0.3s linear forwards;
          }

          @keyframes myDpAnimationOwnOut {
             0% {
               // add out animation here
             }
             100% {
               // add out animation here
             }
          }
          `
        }
        // other options here
    }

    constructor() {}
}