snydergd/dateCopy.html

## 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>
	<!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> </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> </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()"><</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()">></button>
	<div id="calendar"></div>
	Format (moment.js format): <input type="text" id="format" value="YYYY-MM-DD">
	<div id="result"></div>
	</body>
	</html>