Skip to content

Instantly share code, notes, and snippets.

@slav123

slav123/index.html

Last active September 24, 2021 09:57
Show Gist options
  • Save slav123/1eb75e25057aa0e6ac7b16ec3204778b to your computer and use it in GitHub Desktop.
Save slav123/1eb75e25057aa0e6ac7b16ec3204778b to your computer and use it in GitHub Desktop.
Download ZIP
inline date picker with HTML5
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div class="editable date" data-id="6">2021-09-23</div>
<div class="editable date" data-id="1">2011-08-11</div>
<script>
var editable = document.getElementsByClassName("editable");
var i;
for (i = 0; i < editable.length; i++) {
editable[i].style.display = "inline-block";
editable[i].style.cursor = "pointer";
editable[i].style.border = "1px dotted gray";
editable[i].addEventListener("dblclick", function (ev) {
var input = document.createElement("input");
input.type = "date";
input.value = ev.currentTarget.innerText;
// bind inner callenadr
input.addEventListener("keypress", function (ev) {
ev.currentTarget.removeEventListener("change", saveAction);
ev.currentTarget.removeEventListener("blur", saveAction);
ev.currentTarget.addEventListener("submit", function (ev) {
saveAction(ev);
});
if (ev.keyCode === 13) {
saveAction(ev);
}
});
input.addEventListener("blur", saveAction);
ev.currentTarget.replaceChild(input, ev.currentTarget.childNodes[0]);
input.focus();
});
}
function saveAction(ev) {
const element = ev.currentTarget;
console.log("saving... ", element.value);
var txt = document.createTextNode(element.value);
let id = element.parentElement.getAttribute("data-id");
console.log("id", id);
element.parentElement.replaceChild(txt, element.parentElement.childNodes[0]);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment