Timestamp

Démo

Source

<style>
    #demo {
        background: #eee;
        padding: .5rem;
        border-radius: 0.25rem;
        text-align: center;
    }

    input[type=text] {
        padding: .2rem;
        border: 1px solid #a5a4a4;
        border-radius: 0.25rem;
        height: 1.5rem;
        width: 150px;
    }

    #day {
        width: 250px;
    }

    input[type=button], input[type=submit], input[type=reset] {
        border: none;
        color: #FFF;
        background: #963c7b;
        margin: .5rem 0;
        padding: .5rem;
        cursor: pointer;
        text-decoration: none;
        color: #FFF;
        border-radius: 0.25rem;
    }

    label {
        width: 150px;
        display: inline-block;
    }
</style>
<div id="demo">
    <label>Jour</label>
    <label>Mois</label>
    <label>Année</label>
    <br/>
    <input type="text" size="5" id="d" onkeydown="if (event.keyCode == 13)getTs();" />
    <input type="text" size="5" id="m" onkeydown="if (event.keyCode == 13)getTs();" />
    <input type="text" size="5" id="y" onkeydown="if (event.keyCode == 13)getTs();" />
    <br/>
    <label>Heure</label>
    <label>Minute</label>
    <label>Seconde</label>
    <br/>
    <input type="text" size="5" id="h" onkeydown="if (event.keyCode == 13)getTs();" />
    <input type="text" size="5" id="mi" onkeydown="if (event.keyCode == 13)getTs();" />
    <input type="text" size="5" id="s" onkeydown="if (event.keyCode == 13)getTs();" />
    <br/>
    <input type="button" onclick="getTs()" value="Date > Timestamp" />
    <br/>
    <input id="ts" type="text" onkeydown="if (event.keyCode == 13)getDay();" />
    <br/>
    <input type="button" onclick="getDay()" value="Timestamp > Date" />
    <br/>
    <input id="day" type="text" />
</div>
<script>
    function getTs() {
        var h = parseInt(document.getElementById("h").value);
        var mi = parseInt(document.getElementById("mi").value);
        var s = parseInt(document.getElementById("s").value);
        var d = parseInt(document.getElementById("d").value);
        var m = parseInt(document.getElementById("m").value);
        var y = parseInt(document.getElementById("y").value);
        var da = new Date(y,m - 1,d,h,mi,s,0);
        document.getElementById("ts").value = Math.round(da.getTime()/1000);
        document.getElementById("ts").focus();
        document.getElementById("ts").select();
    }
    function getDay(){
        var t = parseInt(document.getElementById("ts").value);
        var d = new Date(t*1000);
        document.getElementById("day").value = addZ(d.getDate()) + "/" + addZ(d.getMonth() + 1) + "/" + d.getFullYear() + " " + addZ(d.getHours()) + ":" + addZ(d.getMinutes()) + ":" + addZ(d.getSeconds());
        document.getElementById("day").focus();
        document.getElementById("day").select();
    }
    function addZ(n) {
        return (n<=9)?"0"+n:n;
    }
</script>