All Components

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 [togglable]="true" (click)="setOp('add')" [selected]="true">
                    Add
                </button>
                <button kendoButton [togglable]="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';

Date Calculations

The Date Math provides options for performing date calculations such as:

Add and Remove Days

You can add and remove a conditional number of days from a Date object by using the addDays method.

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

const date = new Date(2000, 10, 10);
const newDate = addDays(date, 10); //returns a new Date instance

Add and Remove Weeks

You can add and remove a conditional number of weeks from a Date object by using the addWeeks method.

import { addWeeks } from '@progress/kendo-date-math';

const date = new Date(2000, 10, 10);
const newDate = addWeeks(date, 10); //returns a new Date instance

Add and Remove Months

You can add and remove a conditional number of months from a Date object by using the addMonths method.

import { addMonths } from '@progress/kendo-date-math';

const date = new Date(2000, 10, 10);
const newDate = addMonths(date, 10); //returns a new Date instance `2001-9-10`

Add and Remove Years

You can add and remove a conditional number of years from a Date object by using the addYears method.

import { addYears } from '@progress/kendo-date-math';

const date = new Date(2000, 10, 10);
const newDate = addYears(date, 10); //returns a new Date instance `2010-11-10`

Add and Remove Decades

You can add and remove a conditional number of decades from a Date object by using the addDecades method.

import { addDecades } from '@progress/kendo-date-math';

const date = new Date(2000, 10, 10);
const newDate = addDecades(date, 10); //returns a new Date instance `2100-11-10`

Add and Remove Centuries

You can add and remove a conditional number of centuries from a Date object by using the addCenturies method.

import { addCenturies } from '@progress/kendo-date-math';

const date = new Date(2000, 10, 10);
const newDate = addCenturies(date, 10); //returns a new Date instance `3000-11-10`

Get First and Last Dates in Months

You can get the first and the last dates from a Date object by using the firstDayOfMonth and lastDayOfMonth functions respectively.

import { firstDayOfMonth, lastDayOfMonth } from '@progress/kendo-date-math';

const date = new Date(2000, 10, 10);
const firstDay = firstDayOfMonth(date); //returns first date of the month, `2000-11-1`
const lastDay = lastDayOfMonth(date); //returns last date of the month, `2000-11-30`

Get First and Last Months in Years

You can get the first and the last months from a Date object by using the firstMonthOfYear and lastMonthOfYear functions respectively.

import { firstMonthOfYear, lastMonthOfYear } from '@progress/kendo-date-math';

const date = new Date(2000, 10, 10);
const firstDay = firstMonthOfYear(date); //returns first month of the year, `2000-1-10`
const lastDay = lastMonthOfYear(date); //returns last month of the year, `2000-12-10`

Get First and Last Years in Decades

You can get the first and the last years from a Date object by using the firstYearOfDecade and lastYearOfDecade functions respectively.

import { firstYearOfDecade, lastYearOfDecade } from '@progress/kendo-date-math';

const date = new Date(2005, 10, 10);
const firstDay = firstYearOfDecade(date); //returns first year of the decade, `2000-11-10`
const lastDay = lastYearOfDecade(date); //returns last year of the decade, `2009-11-10`

Get First and Last Decades in Centuries

You can get the first and the last decades from a Date object by using the firstDecadeOfCentury and lastDecadeOfCentury functions respectively.

import { firstDecadeOfCentury, lastDecadeOfCentury } from '@progress/kendo-date-math';

const date = new Date(2020, 10, 10);
const firstDay = firstDecadeOfCentury(date); //returns first decade of the century, `2000-11-10`
const lastDay = lastDecadeOfCentury(date); //returns last decade of the century, `2090-11-10`

Get Next and Previous Dates in Weeks

You can get the next and the previous dates in a week based on a week day number by using the nextDayOfWeek and prevDayOfWeek functions respectively.

import { Day, prevDayOfWeek, nextDayOfWeek } from '@progress/kendo-date-math';

const nextDate = nextDayOfWeek(new Date(2016, 0, 1), Day.Wednesday); // 2016-01-06, Wednesday
const prevDate = prevDayOfWeek(new Date(2016, 0, 1), Day.Wednesday); // 2015-12-30, Wednesday

Get Week Numbers in Years

You can calculate the week number of a date by using the weekInYear function.

import { weekInYear } from '@progress/kendo-date-math';

const date = new Date(2000, 10, 10);
const weekNumber = weekInYear(date); //returns the week number of the corresponding date

Get Duration in Months between Two Dates

You can get the duration in months between two Date objects by using the durationInMonths function.

import { durationInMonths } from '@progress/kendo-date-math';

const start = new Date(2020, 1, 20);
const end = new Date(2020, 10, 4);
const duration = durationInMonths(start, end); //returns the duration in months, `9`

Get Duration in Years between Two Dates

You can get the duration in years between two Date objects by using the durationInYears function.

import { durationInYears } from '@progress/kendo-date-math';

const start = new Date(2015, 1, 20);
const end = new Date(2020, 10, 4);
const duration = durationInYears(start, end); //returns the duration in years, `5`

Get Duration in Decades between Two Dates

You can get the duration in decades between two Date objects by using the durationInDecades function.

import { durationInDecades } from '@progress/kendo-date-math';

const start = new Date(2000, 1, 20);
const end = new Date(2020, 10, 4);
const duration = durationInDecades(start, end); //returns the duration in decades, `2`

Get Duration in Centuries between Two Dates

You can get the centuries in decades between two Date objects by using the durationInCenturies function.

import { durationInCenturies } from '@progress/kendo-date-math';

const start = new Date(2000, 1, 20);
const end = new Date(2300, 10, 4);
const duration = durationInCenturies(start, end); //returns the duration in centuries, `3`

Get the Date Part

You can get only the date part of a Date instance by using the getDate function.

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

const date = new Date(2000, 10, 10, 22, 30);
const datePart = getDate(date); //returns a Date instance with '00:00:00' time

Compare Dates

To compare dates, the Date Math provides options for:

Compare Date and Time Portions

You can compare the date and time portions of the date instance of 2 dates by using isEqual function.

import { isEqual } from '@progress/kendo-date-math';

const date1 = new Date(2000, 10, 10);
const date2 = new Date(2000, 10, 10, 10);
const equal = isEqual(date1, date2); //returns false

Compare Only Date Portions

You can compare only the date portions of the date instance of 2 dates by using the isEqualDate function.

import { isEqual } from '@progress/kendo-date-math';

const date1 = new Date(2000, 10, 10);
const date2 = new Date(2000, 10, 10, 10);
const equal = isEqualDate(date1, date2); //returns true

Create Date

You can create a date with year value below 100 using createDate function.

import { createDate } from '@progress/kendo-date-math';

createDate(16, 0, 15); // 0016-01-15 00:00:00
createDate(2016, 0, 15); // 2016-01-15 00:00:00
createDate(2016, 0, 15, 22, 22, 20); // 2016-01-15 22:22:20
In this article