-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
139 lines (109 loc) · 5.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Epoch From Calendar</title>
<link rel="apple-touch-icon" sizes="180x180" href="img/fav/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/fav/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/fav/favicon-16x16.png">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/[email protected]/dayjs.min.js"></script>
<script src="https://unpkg.com/clipboard@2/dist/clipboard.min.js"></script>
<link href="//cdn.muicss.com/mui-0.10.3/css/mui.min.css" rel="stylesheet" type="text/css" />
<script src="//cdn.muicss.com/mui-0.10.3/js/mui.min.js"></script>
<script>
window.onload = function() {
new ClipboardJS('.clipboard-enabled');
adjustText();
}
function copy(button, date) {
button.dataset.clipboardText = date.unix();
document.querySelector('#date').value = date.format();
}
function adjustText() {
if (window.innerWidth < 800) {
const shorterForms = {
'Copy' : 'Cpy',
'Five minutes ago' : '-5 m',
'In five minutes' : '+5 m',
'An hour ago' : '-1 h',
'In an hour' : '+1 h',
'Yesterday' : '-1 d',
'End of today' : 'Start',
'End of today' : 'End',
'End of tomorrow' : '+1 d end',
'7 days ago' : '-7 d',
'Start of the week' : 'Week start',
'End of the week' : 'end',
'In 7 days' : '+7 d end',
'30 days ago' : '-30 d',
'Start of the month' : 'Month start',
'End of the month' : 'end',
'In 30 days' : '+30 d end',
};
for (var key in shorterForms) {
const valuator = document.evaluate( '//button[text()="' + key + '"]', document, null, XPathResult.ANY_TYPE, null );
const item = valuator.iterateNext();
console.log(item);
if (item) item.innerText = shorterForms[key];
}
}
}
function handleCustomTime() {
const picker = document.querySelector('#custom-time');
const epoch = dayjs(picker.value).unix();
document.querySelector('#custom-time-button').dataset.clipboardText = epoch;
}
</script>
<style>
#date {
min-width: 260px;
}
</style>
</head>
<body>
<div class="mui-container">
<div class="mui-panel">
<!--<img src='package-json-to-markup-table.jpg' style='max-width: 20%;' />-->
<div><strong>Epoch From Calendar by <a href='https://tomasz-smykowski.com'>Tom Smykowski</a></strong></div>
<div class="mui--text-subhead">Click a button to copy date to clipboard in <strong>epoch</strong> format</div>
<form class="mui-form--inline">
<div class="mui-textfield">
ISO preview: <input type="text" id='date'>
</div>
</form>
Input:<br/>
<input type="datetime-local" id="custom-time">
<button class="mui-btn mui-btn--primary clipboard-enabled" onmousedown="handleCustomTime()" id="custom-time-button">Copy</button>
<br/>
<button class="mui-btn mui-btn--primary clipboard-enabled" onclick="copy(this, dayjs().add(-5, 'minute'))">Five minutes ago</button>
<button class="mui-btn mui-btn--accent clipboard-enabled" onclick="copy(this, dayjs())">Now</button>
<button class="mui-btn mui-btn--primary clipboard-enabled" onclick="copy(this, dayjs().add(5, 'minute'))">In five minutes</button>
<br/>
<button class="mui-btn mui-btn--primary clipboard-enabled" onclick="copy(this, dayjs().add(-1, 'hour'))">An hour ago</button>
<button class="mui-btn mui-btn--primary clipboard-enabled" onclick="copy(this, dayjs().add(1, 'hour'))">In an hour</button>
<br/>
<button class="mui-btn mui-btn--accent clipboard-enabled" onclick="copy(this, dayjs().startOf('day'))">Today</button>
<button class="mui-btn mui-btn--primary clipboard-enabled" onclick="copy(this, dayjs().endOf('day'))">End of today</button>
<br/>
<button class="mui-btn mui-btn--primary clipboard-enabled" onclick="copy(this, dayjs().add(-1, 'day').startOf('day'))">Yesterday</button>
<button class="mui-btn mui-btn--primary clipboard-enabled" onclick="copy(this, dayjs().add(1, 'day').endOf('day'))">End of tomorrow</button>
<br/>
<button class="mui-btn mui-btn--accent clipboard-enabled" onclick="copy( this, dayjs().startOf('week').startOf('day') )">Start of the week</button>
<button class="mui-btn mui-btn--primary clipboard-enabled" onclick="copy(this, dayjs().endOf('week').endOf('day'))">End of the week</button>
<br/>
<button class="mui-btn mui-btn--primary clipboard-enabled" onclick="copy( this, dayjs().add(-7, 'day').startOf('day') )">7 days ago</button>
<button class="mui-btn mui-btn--primary clipboard-enabled" onclick="copy(this, dayjs().add(7, 'day').endOf('day') )">In 7 days</button>
<br/>
<button class="mui-btn mui-btn--accent clipboard-enabled" onclick="copy( this, dayjs().startOf('month').startOf('day') )">Start of the month</button>
<button class="mui-btn mui-btn--primary clipboard-enabled" onclick="copy(this, dayjs().endOf('month').endOf('day'))">End of the month</button>
<br/>
<button class="mui-btn mui-btn--primary clipboard-enabled" onclick="copy( this, dayjs().add(-30, 'day').startOf('day') )">30 days ago</button>
<button class="mui-btn mui-btn--primary clipboard-enabled" onclick="copy(this, dayjs().add(30, 'day').endOf('day') )">In 30 days</button>
<br/><br/>
<footer><strong>Buy me a coffee or two: <a href='https://buy.stripe.com/00g6pTcw89Um0mI8wx'>buy a $1 coffee</a>. Thanks!</strong></footer>
</div>
</div>
</body>
</html>