Date Math / Overview
material theme

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.

The Date Math package is part of KendoReact, a professionally built commercial UI library. To try out this package you need to sign up for a 30-day trial, which gives you access to the full KendoReact library.

Start Free Trial

Basic Usage

The following example demonstrates the Date Math library in action.

import React from 'react';
import ReactDOM from 'react-dom';

import { addDays, addWeeks, addMonths, addYears, addDecades, addCenturies } from '@progress/kendo-date-math';
import { Calendar } from '@progress/kendo-react-dateinputs';
import { NumericTextBox } from '@progress/kendo-react-inputs';

class App extends React.Component {
    state = {
        startDate: new Date(),
        resultDate: new Date(),
        dateParts: {
            days: 1,
            weeks: 0,
            months: 0,
            years: 0,
            decades: 0,
            centuries: 0
        }
    };

    render() {
        const { startDate, dateParts, resultDate } = this.state;
        return (
            <div>
                The new date is {resultDate.toLocaleDateString()}
                <div className="row example-config">
                    <div className="col-sm-12 col-md-6 example-col">
                        <p>
                            Start Date
                    </p>
                        <Calendar
                            value={startDate}
                            onChange={this.changeStartDate}
                        />
                    </div>
                    <div className="col-sm-12 col-md-6 example-col">
                        <div className="row">
                            <div className="col-sm-4">
                                <p>
                                    Days
                                </p>
                                <NumericTextBox
                                    id="days"
                                    format="N0"
                                    width={80}
                                    value={dateParts.days}
                                    onChange={this.changePart}
                                />
                            </div>
                            <div className="col-sm-4">
                                <p>
                                    Weeks
                                </p>
                                <NumericTextBox
                                    id="weeks"
                                    format="N0"
                                    width={80}
                                    value={dateParts.weeks}
                                    onChange={this.changePart}
                                />
                            </div>
                            <div className="col-sm-4">
                                <p>
                                    Months
                                </p>
                                <NumericTextBox
                                    id="months"
                                    format="N0"
                                    width={80}
                                    value={dateParts.months}
                                    onChange={this.changePart}
                                />
                            </div>
                            <div className="col-sm-4">
                                <p>
                                    Years
                                </p>
                                <NumericTextBox
                                    id="years"
                                    format="N0"
                                    width={80}
                                    value={dateParts.years}
                                    onChange={this.changePart}
                                />
                            </div>
                            <div className="col-sm-4">
                                <p>
                                    Decades
                                </p>
                                <NumericTextBox
                                    id="decades"
                                    format="N0"
                                    width={80}
                                    value={dateParts.decades}
                                    onChange={this.changePart}
                                />
                            </div>
                            <div className="col-sm-4">
                                <p>
                                    Centuries
                                </p>
                                <NumericTextBox
                                    id="centuries"
                                    format="N0"
                                    width={80}
                                    value={dateParts.centuries}
                                    onChange={this.changePart}
                                />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }

    changeStartDate = ({ value }) => {
        this.setState({
            startDate: value,
            resultDate: value,
            dateParts: {
                days: 1,
                weeks: 0,
                months: 0,
                years: 0,
                decades: 0,
                centuries: 0
            }
        });
    }

    changePart = ({ value, target }) => {
        let { startDate, dateParts, resultDate } = this.state;
        const part = Object.keys(this.state.dateParts).find((key) => key === target.props.id);

        switch (part) {
            case 'days':
                resultDate = addDays(startDate, value);
                break;
            case 'weeks':
                resultDate = addWeeks(startDate, value);
                break;
            case 'months':
                resultDate = addMonths(startDate, value);
                break;
            case 'years':
                resultDate = addYears(startDate, value);
                break;
            case 'decades':
                resultDate = addDecades(startDate, value);
                break;
            case 'centuries':
                resultDate = addCenturies(startDate, value);
                break;
            default:
                resultDate = startDate;
        }

        dateParts[part] = value;

        this.setState({ resultDate, dateParts });
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

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

Is this article helpful?

Not finding the help you need?

Contact Support