Skip to content

Commit edd763b

Browse files
robbdimitrovrobbdimitrov
authored
Merge pull request #1 from robbdimitrov/feature/styles
Added new date styles and made the code more extensible
2 parents 2ba38e4 + 098eaef commit edd763b

File tree

18 files changed

+612
-374
lines changed

18 files changed

+612
-374
lines changed

‎.eslintrc.js‎

Lines changed: 0 additions & 32 deletions
This file was deleted.

‎.eslintrc.json‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
{
2+
"env": {
3+
"browser": true,
4+
"commonjs": true,
5+
"amd": true,
6+
"es6": true,
7+
"node": true,
8+
"mocha": true
9+
},
10+
"extends": "eslint:recommended",
11+
"parserOptions": {
12+
"ecmaVersion": 2018,
13+
"sourceType": "module"
14+
},
15+
"rules": {
16+
"comma-dangle": [
17+
"error",
18+
"never"
19+
],
20+
"indent": [
21+
"error",
22+
2
23+
],
24+
"linebreak-style": [
25+
"error",
26+
"unix"
27+
],
28+
"quotes": [
29+
"error",
30+
"single"
31+
],
32+
"semi": [
33+
"error",
34+
"always"
35+
]
36+
}
37+
}

‎README.md‎

Lines changed: 57 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,25 @@
11
# Quartzite
22

3-
Lightweight relative date/time formatter without external dependencies.
4-
The formatter offers two styles - *normal* and *short*. *Normal* produces the
5-
same date outputs as seen in Instagram and *short* is Twitter-like.
3+
Lightweight relative date/time formatter without external dependencies.
4+
The formatter offers three styles - `short`, `medium` and `long`.
5+
6+
## Styles
7+
8+
| Short | Medium | Long |
9+
| --- | --- | --- |
10+
| now | Just now | Today, 18:00 |
11+
| 25s | 25 seconds ago | Today, 18:00 |
12+
| 30m | 30 minutes ago | Today, 17:30 |
13+
| 18h | Today | Today 00:00 |
14+
| 2d | Yesterday | Yesterday, 07:00 |
15+
| 5d | November 7 | Thursday, November 7th |
16+
| Oct 8, 2018 | October 8, 2018 | October 8th, 2018 |
17+
| In 25s | In 25 seconds | Today, 10:00 |
18+
| In 30m | In 30 minutes | Today, 10:30 |
19+
| In 18h | Tomorrow | Tomorrow, 04:00 |
20+
| In 2d | Thursday | Thursday, 10:00 |
21+
| In 5d | November 17 | Sunday, November 17th |
22+
| Dec 16, 2020 | December 16, 2020 | December 16th, 2020 |
623

724
## Installation
825

@@ -18,27 +35,51 @@ Using cdn
1835
<script src="https://unpkg.com/quartzite/dist/quartzite.js"></script>
1936
```
2037

21-
## Usage
38+
## Example
39+
40+
Importing as ES6 module
2241

2342
```javascript
2443
import * as quartzite from 'quartzite';
44+
```
45+
46+
or using CommonJS
47+
48+
```javascript
49+
const quartzite = require('quartzite');
50+
```
51+
52+
Create date in the past
53+
54+
```javascript
55+
const date = new Date();
56+
const yesterday = quartzite.dateByAdding('hours', date, -25);
57+
```
58+
59+
Create date in the future
2560

26-
let date = new Date();
61+
```javascript
62+
const date = new Date();
63+
const someday = quartzite.dateByAdding('days', date, 5);
64+
```
2765

28-
// Create date in the past
29-
let yesterday = quartzite.dateByAdding('hours', date, -25);
66+
Format date using `medium` style
3067

31-
// Create date in the future
32-
let someday = quartzite.dateByAdding('days', date, 5);
68+
```javascript
69+
console.log(quartzite.dateString(yesterday)); // Medium is the default option
70+
console.log(quartzite.dateString(someday, 'medium'));
71+
```
3372

34-
// Format date using normal style
35-
// Will return 'Just now', '5 hours ago', 'Tomorrow at 7:00'
36-
console.log(quartzite.formatDate(yesterday));
37-
console.log(quartzite.formatDate(someday, 'normal'));
73+
Format date using `short` style
3874

39-
// Format date using short style
40-
// Will return '20m', '2d', 'Feb 7', '8 Aug 2017'
41-
console.log(quartzite.formatDate(someday, 'short'));
75+
```javascript
76+
console.log(quartzite.dateString(someday, 'short'));
77+
```
78+
79+
Format date using `long` style
80+
81+
```javascript
82+
console.log(quartzite.dateString(someday, 'long'));
4283
```
4384

4485
## License

‎examples/index.html‎

Lines changed: 68 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -3,32 +3,67 @@
33
<head>
44
<meta charset="utf-8">
55
<title>Relative Date</title>
6-
<style>
7-
.dates-list-normal,
8-
.dates-list-compact {
9-
width: 200px;
10-
display: inline-block;
6+
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
9+
<style type="text/css">
10+
.title {
11+
text-align: center;
12+
margin-top: 30px;
13+
}
14+
15+
.container {
16+
display: flex;
17+
width: 90%;
18+
margin-left: auto;
19+
margin-right: auto;
20+
}
21+
22+
.container .item {
23+
flex: 1;
24+
}
25+
26+
.container ul {
27+
padding: 0;
28+
list-style-type: none;
29+
}
30+
31+
li {
32+
margin-bottom: 0.5em;
33+
text-align: center;
34+
}
35+
36+
.item h3 {
37+
text-align: center;
1138
}
1239
</style>
1340
</head>
1441
<body>
42+
<h1 class="title">Relative date formats</h1>
43+
1544
<div class="container">
16-
<div>
17-
<h1>Relative date formats</h1>
18-
</div>
45+
<div class="item">
46+
<h3>Short</h3>
47+
<div class="dates-list-short"></div>
48+
</div>
1949

20-
<br />
50+
<div class="item">
51+
<h3>Medium</h3>
52+
<div class="dates-list-medium"></div>
53+
</div>
2154

22-
<div class="dates-list-normal">Normal:</div>
23-
<div class="dates-list-compact">Compact:</div>
55+
<div class="item">
56+
<h3>Long</h3>
57+
<div class="dates-list-long"></div>
58+
</div>
2459
</div>
2560

2661
<script src="quartzite.js"></script>
2762

2863
<script>
29-
let date = new Date();
64+
const date = new Date();
3065

31-
let dates = [
66+
const dates = [
3267
quartzite.dateByAdding('seconds', date, -2),
3368
quartzite.dateByAdding('seconds', date, -25),
3469
quartzite.dateByAdding('minutes', date, -30),
@@ -44,23 +79,30 @@ <h1>Relative date formats</h1>
4479
quartzite.dateByAdding('days', date, 400)
4580
];
4681

47-
let normalUl = document.createElement('ul');
48-
let compactUl = document.createElement('ul');
82+
const shortUl = document.createElement('ul');
83+
const mediumUl = document.createElement('ul');
84+
const longUl = document.createElement('ul');
4985

5086
for (value of dates) {
51-
let normalLi = document.createElement('li');
52-
let dateString = quartzite.formatDate(value);
53-
normalLi.appendChild(document.createTextNode(dateString));
54-
normalUl.appendChild(normalLi);
55-
56-
let compactLi = document.createElement('li');
57-
dateString = quartzite.formatDate(value, 'short');
58-
compactLi.appendChild(document.createTextNode(dateString));
59-
compactUl.appendChild(compactLi);
87+
const shortLi = document.createElement('li');
88+
let dateString = quartzite.dateString(value, 'short');
89+
shortLi.appendChild(document.createTextNode(dateString));
90+
shortUl.appendChild(shortLi);
91+
92+
const mediumLi = document.createElement('li');
93+
dateString = quartzite.dateString(value, 'medium');
94+
mediumLi.appendChild(document.createTextNode(dateString));
95+
mediumUl.appendChild(mediumLi);
96+
97+
const longLi = document.createElement('li');
98+
dateString = quartzite.dateString(value, 'long');
99+
longLi.appendChild(document.createTextNode(dateString));
100+
longUl.appendChild(longLi);
60101
}
61102

62-
document.querySelector('.dates-list-normal').appendChild(normalUl);
63-
document.querySelector('.dates-list-compact').appendChild(compactUl);
103+
document.querySelector('.dates-list-short').appendChild(shortUl);
104+
document.querySelector('.dates-list-medium').appendChild(mediumUl);
105+
document.querySelector('.dates-list-long').appendChild(longUl);
64106
</script>
65107
</body>
66108
</html>

‎package.json‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "quartzite",
3-
"version": "1.0.2",
3+
"version": "2.0.0",
44
"description": "Lightweight relative date/time formatter without external dependencies.",
55
"author": "Robert Dimitrov <robert_dimitrov@me.com>",
66
"license": "MIT",
@@ -22,7 +22,6 @@
2222
],
2323
"scripts": {
2424
"build": "webpack --progress --mode=production",
25-
"dev": "webpack --progress --mode=development",
2625
"start": "webpack-dev-server --mode=development",
2726
"lint": "eslint src test",
2827
"test": "mocha test/**/*.js"
@@ -32,14 +31,15 @@
3231
"url": "https://github.com/robbdimitrov/quartzite.git"
3332
},
3433
"devDependencies": {
35-
"@babel/core": "^7.1.6",
36-
"@babel/preset-env": "^7.1.6",
37-
"babel-loader": "^8.0.4",
38-
"eslint": "^5.9.0",
39-
"eslint-loader": "^2.1.1",
34+
"@babel/core": "^7.7.2",
35+
"@babel/preset-env": "^7.7.1",
36+
"babel-loader": "^8.0.6",
37+
"eslint": "^5.16.0",
38+
"eslint-loader": "^2.2.1",
4039
"mocha": "^5.2.0",
41-
"webpack": "^4.26.0",
42-
"webpack-cli": "^3.1.2",
43-
"webpack-dev-server": "^3.1.10"
40+
"sinon": "^7.5.0",
41+
"webpack": "^4.41.2",
42+
"webpack-cli": "^3.3.10",
43+
"webpack-dev-server": "^3.9.0"
4444
}
4545
}

‎src/constants.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
'use strict';
2+
3+
export const months = [
4+
'January', 'February', 'March', 'April', 'May', 'June', 'July',
5+
'August', 'September', 'October', 'November', 'December'
6+
];
7+
8+
export const monthsShort = [
9+
'Jan', 'Feb', 'Mar', 'Apr', 'May', 'June',
10+
'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'
11+
];
12+
13+
export const weekDays = [
14+
'Sunday', 'Monday', 'Tuesday', 'Wednesday',
15+
'Thursday', 'Friday', 'Saturday'
16+
];

‎src/formatter.js‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
'use strict';
2+
3+
import { numberFormat } from './utils';
4+
import { difference } from './utils';
5+
6+
/**
7+
* Returns time string with format hh:mm {AM/PM}
8+
* @param {Date} date - The date to format
9+
* @param {string} format - The time format.
10+
* Can be '12h' or '24h'. '24h' is the default
11+
* @returns {string}
12+
*/
13+
export function timeString(date, format = '24h') {
14+
let hours = date.getHours();
15+
const minutes = date.getMinutes();
16+
let suffix = '';
17+
18+
if (format === '12h') {
19+
suffix = ' ' + (hours < 12 ? 'AM' : 'PM');
20+
hours = hours % 12 || 12;
21+
}
22+
23+
return `${numberFormat(hours)}:${numberFormat(minutes)}${suffix}`;
24+
}
25+
26+
/**
27+
* Formats a date by comparing with the current date
28+
* @param {Date} date - The date to format
29+
* @param {object} style - The style of the formatter
30+
* @returns {string}
31+
*/
32+
export function dateString(date, style) {
33+
const now = new Date();
34+
const { days } = difference(now, date);
35+
36+
if (days < 1) {
37+
return style.timeDateFormat(now, date);
38+
} else if (days < 7) {
39+
return style.dayDateFormat(now, date);
40+
} else if (now.getFullYear() === date.getFullYear()) {
41+
return style.monthDateFormat(date);
42+
}
43+
44+
return style.yearDateFormat(date);
45+
}

0 commit comments

Comments
 (0)