Date Math Overview

The Date Math is a package for JavaScript Date manipulations.

The package exports numerous functions that support the performing of different date manipulation tasks. For example, add and remove days or get the week number.

Basic Usage

The following example demonstrates the Date Math library in action.

import { Component, ElementRef, ViewChild } from '@angular/core';
import { AfterViewInit, OnDestroy } from '@angular/core';
import { addDays, addWeeks, addMonths, addYears, addDecades, addCenturies } from '@progress/kendo-date-math';

@Component({
  selector: 'my-app',
  template: `
    <div class="row example-config">

      <div class="col-xs-12 col-md-3 example-col">
              <p>
                  Start Date
              </p>
              <kendo-datepicker id="startDate"
              [(value)]="value"
              (valueChange)="calc()"
              ></kendo-datepicker>
      </div>

      <div class="col-xs-12 col-md-3 example-col">
              <p>
                Operation
              </p>
              <kendo-buttongroup [selection]="'single'">
                <button kendoButton [toggleable]="true" (click)="setOp('add')" [selected]="true">
                    Add
                </button>
                <button kendoButton [toggleable]="true" (click)="setOp('subtract')">
                    Subtract
                </button>
              </kendo-buttongroup>
      </div>

      <div class="col-xs-12 col-md-2 example-col">
        <p>
          Days
        </p>
        <kendo-numerictextbox id="days" [(ngModel)]="days" (valueChange)="calc()" format="N0" style="width: 80px;">
        </kendo-numerictextbox>
      </div>
      <div class="col-xs-12 col-md-2 example-col">
        <p>
          Weeks
        </p>
        <kendo-numerictextbox id="weeks" [(ngModel)]="weeks" (valueChange)="calc()" format="N0" style="width: 80px;">
        </kendo-numerictextbox>
      </div>
      <div class="col-xs-12 col-md-2 example-col">
        <p>
          Months
        </p>
        <kendo-numerictextbox id="months" [(ngModel)]="months" (valueChange)="calc()" format="N0" style="width: 80px;">
        </kendo-numerictextbox>
      </div>
      <div class="col-xs-12 col-md-2 example-col">
        <p>
          Years
        </p>
        <kendo-numerictextbox id="years" [(ngModel)]="years" (valueChange)="calc()" format="N0" style="width: 80px;">
        </kendo-numerictextbox>
      </div>
      <div class="col-xs-12 col-md-2 example-col">
        <p>
          Decades
        </p>
        <kendo-numerictextbox id="decades" [(ngModel)]="decades" (valueChange)="calc()" format="N0" style="width: 80px;">
        </kendo-numerictextbox>
      </div>
      <div class="col-xs-12 col-md-2 example-col">
        <p>
          Centuries
        </p>
        <kendo-numerictextbox id="centuries" [(ngModel)]="centuries" (valueChange)="calc()" format="N0" style="width: 80px;">
        </kendo-numerictextbox>
      </div>
    </div>
    <div>
      The new date is {{ result | kendoDate }}
    </div>
  `
})
export class AppComponent implements AfterViewInit, OnDestroy {
  public value: Date = new Date();
  public op: string = 'add';
  public days: number = 1;
  public weeks: number = 0;
  public months: number = 0;
  public years: number = 0;
  public decades: number = 0;
  public centuries: number = 0;
  public result: Date;

  constructor() {
    this.calc();
  }

  public calc(): void {
    const sign = this.op === 'add' ? 1 : -1;
    let value = this.value;

    value = addDays(value, sign * this.days);
    value = addWeeks(value, sign * this.weeks);
    value = addMonths(value, sign * this.months);
    value = addYears(value, sign * this.years);
    value = addDecades(value, sign * this.decades);
    value = addCenturies(value, sign * this.centuries);

    this.result = value;
  }

  public setOp(value: string): void {
    this.op = value;
    this.calc();
  }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { IntlModule } from '@progress/kendo-angular-intl';
import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
import { NumericTextBoxModule } from '@progress/kendo-angular-inputs';

import { AppComponent } from './app.component';

@NgModule({
  imports:      [
    BrowserModule,
    BrowserAnimationsModule,
    ButtonsModule,
    DateInputsModule,
    FormsModule,
    IntlModule,
    NumericTextBoxModule
  ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Installation

  1. Download and install the package:

    npm install --save @progress/kendo-date-math
  2. Once installed, individual functions can be imported and the Data Query component is ready to use.

    import { getDate, addDays } from '@progress/kendo-date-math';

Functionality and Features

In this article