Skip to content

Latest commit

 

History

History
231 lines (158 loc) · 4.05 KB

DOCUMENTATION.md

File metadata and controls

231 lines (158 loc) · 4.05 KB

Documentation

The react-dayjs component, DayJS, is a react component used for displaying, formatting, and manipulating dates utilizing the dayjs date library.

Quick Start

Add the DayJS component to a component:

import React from 'react';
import DayJS from 'react-dayjs';

export default class MyComponent extends React.Component {
    render() {
        const date = "2000-01-31T11:59:00-05:00";
        return (
            <DayJS>{ date }</DayJS>
        );
    }
}

This will output:

<time>2000-01-31T11:59:00-05:00</time>

Props

The component currently supports the following props:

date

date = { string | number | Date | dayjs object }

The date to be displayed, if not given as children. The default is the current time.

<DayJS date={ "2000-01-31T11:59:00-05:00" }/>

This will output:

<time>2000-01-31T11:59:00-05:00</time>

format

format = { string }

The format the date should be displayed in. The default is ISO 8601, with no fractional seconds.

The available formats can be found on the dayjs README.

<DayJS format="MM-DD-YYYY">2000-01-31T11:59:00-05:00</DayJS>

This will output:

<time>01-31-2000</time>

element

element = { string | React.Component }

The element the component should be rendered as. The default is time.

<DayJS element="span">2000-01-31T11:59:00-05:00</DayJS>

This will output:

<span>2000-01-31T11:59:00-05:00</span>

add

add = { object }

Adds a specific amount of time to the given date.

<DayJS add={ { hours: 1 } }>2000-01-31T11:59:00-05:00</DayJS>

This will output:

<time>2000-01-31T12:59:00-05:00</time>

subtract

subtract = { object }

Subtracts a specific amount of time to the given date.

<DayJS subtract={ { hours: 1 } }>2000-01-31T11:59:00-05:00</DayJS>

This will output:

<time>2000-01-31T10:59:00-05:00</time>

toJSON

toJSON = { boolean }

Serializes a dayjs object to JSON, which returns an ISO8601 string.

<DayJS toJSON={ true }>2000-01-31T11:59:00-05:00</DayJS>

This will output:

<time>2000-01-31T17:59:00.000Z</time>

toISOString

toISOString = { boolean }

Formats a date to an ISO8601 string.

<DayJS toISOString={ true }>2000-01-31T11:59:00-05:00</DayJS>

This will output:

<time>2000-01-31T17:59:00.000Z</time>

asString

asString = { boolean }

Formats a date as a more readable string, using the toString dayjs function.

<DayJS asString={ true }>2000-01-31T11:59:00-05:00</DayJS>

This will output:

<time>Mon, 31 Jan 2000 17:59:00 GMT</time>

unixSeconds

unixSeconds = { boolean }

Displays the time as a unix timestamp (the number of seconds since Unix Epoch).

<DayJS unixSeconds={ true }>2000-01-31T11:59:00-05:00</DayJS>

This will output:

<time>949337940</time>

unixMilliseconds

unixMilliseconds = { boolean }

Displays the time as a unix timestamp in milliseconds (the number of milliseconds since Unix Epoch).

<DayJS unixMilliseconds={ true }>2000-01-31T11:59:00-05:00</DayJS>

This will output:

<time>949337940000</time>

daysInMonth

daysInMonth = { boolean }

Displays the number of days in the month of the given time.

<DayJS daysInMonth={ true }>2000-01-31T11:59:00-05:00</DayJS>

This will output:

<time>31</time>

displayIsValid

displayIsValid = { boolean }

Displays if the given date is valid.

<DayJS displayIsValid={ true }>2000-01-31T11:59:00-05:00</DayJS>

This will output:

<time>true</time>