Skip to content

Commit 83eeb81

Browse files
committed
Adding documentation for more props
1 parent 3350901 commit 83eeb81

File tree

1 file changed

+114
-8
lines changed

1 file changed

+114
-8
lines changed

DOCUMENTATION.md

+114-8
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,18 @@ The react-dayjs component, DayJS, is a react component used for displaying, form
44

55
* [Quick Start](#quick-start)
66
* [Props](#props)
7-
* [Date](#date)
8-
* [Format](#format)
9-
* [Element](#element)
7+
* [date](#date)
8+
* [format](#format)
9+
* [element](#element)
10+
* [add](#add)
11+
* [subtract](#subtract)
1012
* [toJSON](#tojson)
1113
* [toISOString](#toisostring)
12-
* [toString](#tostring)
14+
* [asString](#asString)
15+
* [unixSeconds](#unixseconds)
16+
* [unixMilliseconds](#unixmilliseconds)
17+
* [daysInMonth](#daysinmonth)
18+
* [displayIsValid](#displayisvalid)
1319

1420
## Quick Start
1521
Add the `DayJS` component to a component:
@@ -61,6 +67,16 @@ The format the date should be displayed in. The default is `ISO 8601`, with no f
6167

6268
The available formats can be found on the [dayjs][dayjs] README.
6369

70+
```jsx
71+
<DayJS format="MM-DD-YYYY">2000-01-31T12:59-0500</DayJS>
72+
```
73+
74+
This will output:
75+
76+
```html
77+
<time>01-31-2000</time>
78+
```
79+
6480
### element
6581

6682
_element = { string | React.Component }_
@@ -77,6 +93,36 @@ This will output:
7793
<span>2000-01-31T11:59:00-05:00</span>
7894
```
7995

96+
### add
97+
_add = { object }_
98+
99+
Adds a specific amount of time to the given date.
100+
101+
```jsx
102+
<DayJS add={ { hours: 1 } }>2000-01-31T12:59-0500</DayJS>
103+
```
104+
105+
This will output:
106+
107+
```html
108+
<time>2000-01-31T12:59:00-05:00</time>
109+
```
110+
111+
### subtract
112+
_subtract = { object }_
113+
114+
Subtracts a specific amount of time to the given date.
115+
116+
```jsx
117+
<DayJS subtract={ { hours: 1 } }>2000-01-31T12:59-0500</DayJS>
118+
```
119+
120+
This will output:
121+
122+
```html
123+
<time>2000-01-31T10:59:00-05:00</time>
124+
```
125+
80126
### toJSON
81127
_toJSON = { boolean }_
82128

@@ -107,13 +153,13 @@ This will output:
107153
<time>2000-01-31T17:59:00.000Z</time>
108154
```
109155

110-
### toString
111-
_toString = { boolean }_
156+
### asString
157+
_asString = { boolean }_
112158

113-
Formats a date as a more readable string.
159+
Formats a date as a more readable string, using the `toString` dayjs function.
114160

115161
```jsx
116-
<DayJS toString={ true }>2000-01-31T12:59-0500</DayJS>
162+
<DayJS asString={ true }>2000-01-31T12:59-0500</DayJS>
117163
```
118164

119165
This will output:
@@ -122,4 +168,64 @@ This will output:
122168
<time>Mon, 31 Jan 2000 17:59:00 GMT</time>
123169
```
124170

171+
### unixSeconds
172+
_unixSeconds = { boolean }_
173+
174+
Displays the time as a unix timestamp (the number of seconds since Unix Epoch).
175+
176+
```jsx
177+
<DayJS unixSeconds={ true }>2000-01-31T12:59-0500</DayJS>
178+
```
179+
180+
This will output:
181+
182+
```html
183+
<time>949341540</time>
184+
```
185+
186+
### unixMilliseconds
187+
_unixMilliseconds = { boolean }_
188+
189+
Displays the time as a unix timestamp in milliseconds (the number of milliseconds since Unix Epoch).
190+
191+
```jsx
192+
<DayJS unixMilliseconds={ true }>2000-01-31T12:59-0500</DayJS>
193+
```
194+
195+
This will output:
196+
197+
```html
198+
<time>949341540000</time>
199+
```
200+
201+
### daysInMonth
202+
_daysInMonth = { boolean }_
203+
204+
Displays the number of days in the month of the given time.
205+
206+
```jsx
207+
<DayJS daysInMonth={ true }>2000-01-31T12:59-0500</DayJS>
208+
```
209+
210+
This will output:
211+
212+
```html
213+
<time>31</time>
214+
```
215+
216+
### displayIsValid
217+
_displayIsValid = { boolean }_
218+
219+
Displays if the given date is valid.
220+
221+
```jsx
222+
<DayJS displayIsValid={ true }>2000-01-31T12:59-0500</DayJS>
223+
```
224+
225+
This will output:
226+
227+
```html
228+
<time>true</time>
229+
```
230+
125231
[dayjs]: https://github.com/xx45/dayjs#format

0 commit comments

Comments
 (0)