Skip to content

Instantly share code, notes, and snippets.

@snydergd

snydergd/dateCopy.html

Created December 13, 2016 15:02
Show Gist options
  • Save snydergd/50dd4ea38ab862492f1569d4ce473a9b to your computer and use it in GitHub Desktop.
Save snydergd/50dd4ea38ab862492f1569d4ce473a9b to your computer and use it in GitHub Desktop.
Download ZIP
Entering a lot of dates as text? This little snippet lets you quickly pick a date and have it copied to the clipboard in a custom format. Relies on moment.js
Raw
dateCopy.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Date select copy</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script type="text/javascript">
if (typeof($) == "undefined") {
$ = document.getElementById.bind(document);
}
var month = 0;
var year = 0;
function refreshCalendar() {
var output = "<table><tr><td>S</td><td>M</td><td>T</td><td>W</td><td>R</td><td>F</td><td>S</td></tr>";
month = parseInt($("month").value);
year = parseInt($("year").value);
var monthStartWeekday = new Date(year, month, 1).getDay();
var daysInMonth = new Date(year, month+1, 0).getDate();
var today = new Date();
today = new Date(today.getFullYear(), today.getMonth(), today.getDate());
for (var i = 0; i < monthStartWeekday; i++) {
if (i == 0) output += "<tr>";
output += "<td>&nbsp;</td>";
}
for (var i = 0; i < daysInMonth; i++) {
if ((monthStartWeekday + i) % 7 == 0) output += "<tr>";
output += "<td" + (new Date(year, month, i+1).getTime() == today.getTime() ? " class=\"current\"" : "") + ">" + (i+1) + "</td>";
if ((monthStartWeekday + i) % 7 == 6) output += "</tr>";
}
if ((daysInMonth+monthStartWeekday)%7) {
for (var i = (daysInMonth+monthStartWeekday)%7; i < 7; i++) {
output += "<td>&nbsp;</td>";
}
output += "</tr>";
}
output += "</table>";
$("calendar").innerHTML = output;
}
function next() {
if (month == 11) {
$("month").value = month = 0;
$("year").value = ++year;
} else $("month").value = ++month;
refreshCalendar();
}
function prev() {
if (month == 0) {
$("month").value = month = 11;
$("year").value = --year;
} else $("month").value = --month;
refreshCalendar();
}
function selectElementText(el) {
var text = $(el), range, selection;
if (document.body.createTextRange) {
range = document.body.createTextRange();
range.moveToElementText(text);
range.select();
} else if (window.getSelection) {
selection = window.getSelection();
range = document.createRange();
range.selectNodeContents(text);
selection.removeAllRanges();
selection.addRange(range);
}
}
window.addEventListener("load", function(e) {
$("year").value = new Date().getFullYear();
$("year").addEventListener("change", refreshCalendar);
$("month").value = new Date().getMonth();
$("month").addEventListener("change", refreshCalendar);
$("calendar").addEventListener("click", function(e) {
if (e.target.tagName == "TD" && e.target.innerHTML.match(/[0-9]+/)) {
console.log("Ready to copy date: " + year + "-" + (month+1) + "-" + e.target.innerHTML);
$("result").innerHTML = moment([year, month, parseInt(e.target.innerHTML)]).format($("format").value);
selectElementText("result");
document.execCommand("copy");
e.target.className = "active";
}
});
refreshCalendar();
});
</script>
<style type="text/css">
#calendar td {
text-align: center;
}
#year {
width: 4em;
}
.current {
background-color: #DFD;
}
.active {
background-color: red;
}
td {
cursor: pointer;
}
</style>
</head>
<body>
<h2>Date Copy</h2>
<p>Select a date below, then it will be coppied to the clipboard with the format you specify.</p>
<button onclick="prev()">&lt;</button>
<select id="month">
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
<option value="3">April</option>
<option value="4">May</option>
<option value="5">June</option>
<option value="6">July</option>
<option value="7">August</option>
<option value="8">September</option>
<option value="9">October</option>
<option value="10">November</option>
<option value="11">December</option>
</select>
<input type="number" id="year">
<button onclick="next()">&gt;</button>
<div id="calendar"></div>
Format (moment.js format): <input type="text" id="format" value="YYYY-MM-DD">
<div id="result"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment