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.

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

 /