formatDate
formatDate is a function that provides a relative date/time stamp.
Usage
import { formatDate } from 'stwui/utils';
// OR
import formatDate from 'stwui/utils/formatDate'; // for tree shaking
Currently: in 0 minutes
The Past
30 Minutes: 30 minutes ago
1 Hour: 60 minutes ago
2 Hour: 2 hours ago
4 Hour: 4 hours ago
1 Day: Nov 20, 7:28 AM
1 Year: Nov 22, 23, 7:28 AM
The Future
30 Minutes: in 29.999 minutes
1 Hour: in 59.999 minutes
2 Hour: in 119.999 minutes
4 Hour: in 4 hours
1 Day: in 24 hours
1 Year: Nov 21, 25, 7:28 AM
<script lang="ts">
import { Row, Col } from 'stwui';
import { formatDate } from 'stwui/utils';
let date = new Date(Date.now());
let dateMinus30Minutes = new Date(new Date().getTime() - 1000 * 60 * 30);
let dateMinus1Hour = new Date(new Date().getTime() - 1000 * 60 * 60);
let dateMinus2Hours = new Date(new Date().getTime() - 1000 * 60 * 120);
let dateMinus4Hours = new Date(new Date().getTime() - 1000 * 60 * 240);
let dateMinus1Day = new Date(new Date().getTime() - 1000 * 60 * 60 * 24);
let dateMinus1Year = new Date(new Date().getTime() - 1000 * 60 * 60 * 24 * 365);
let dateAdd30Minutes = new Date(new Date().getTime() + 1000 * 60 * 30);
let dateAdd1Hour = new Date(new Date().getTime() + 1000 * 60 * 60);
let dateAdd2Hours = new Date(new Date().getTime() + 1000 * 60 * 120);
let dateAdd4Hours = new Date(new Date().getTime() + 1000 * 60 * 240);
let dateAdd1Day = new Date(new Date().getTime() + 1000 * 60 * 60 * 24);
let dateAdd1Year = new Date(new Date().getTime() + 1000 * 60 * 60 * 24 * 365);
</script>
<Row>
<Col class="col-24 flex items-center justify-center">
Currently: {formatDate(date)}
</Col>
<Col class="col-24 md:col-12 lex items-center justify-center text-center">
<h3>The Past</h3>
<br />
30 Minutes: {formatDate(dateMinus30Minutes)}
<br />
1 Hour: {formatDate(dateMinus1Hour)}
<br />
2 Hour: {formatDate(dateMinus2Hours)}
<br />
4 Hour: {formatDate(dateMinus4Hours)}
<br />
1 Day: {formatDate(dateMinus1Day)}
<br />
1 Year: {formatDate(dateMinus1Year)}
</Col>
<Col class="col-24 md:col-12 lex items-center justify-center text-center">
<h3>The Future</h3>
<br />
30 Minutes: {formatDate(dateAdd30Minutes)}
<br />
1 Hour: {formatDate(dateAdd1Hour)}
<br />
2 Hour: {formatDate(dateAdd2Hours)}
<br />
4 Hour: {formatDate(dateAdd4Hours)}
<br />
1 Day: {formatDate(dateAdd1Day)}
<br />
1 Year: {formatDate(dateAdd1Year)}
</Col>
</Row>