how to convert seconds to date and time from user input using javascript?

Question

 $(document).on('keydown', function toDateTime(secs) { // var secs = $('input').focus(); var t = new Date(1970, 0, 1); // Epoch t.setSeconds(secs); console.log(t); $("#toDate").html(t); $('input').focus(); return t; }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="border border-dark text-center card-body"> <p>Convert Seconds</p> <input size="16" type="text" id="seconds"> </div> <hr> <div class="border border-dark text-center card-body"> <p>To Date</p> <p id="toDate"></p> </div> 

I wanted to convert seconds to date and time which user entered in input box. I've used jquery and i'm getting invalid date error while doing this. Actually i want to do it with pure javascript. Can you please help me with this.

Answer 1

I recommend you to use the event input to capture every change from a user, likewise, you should bind that event to the text-field itself. Additionally, use the context this to access the text-field element and get the current value.

This approach does not validate anything

 $("#seconds").on('input', function () { var t = new Date(1970, 0, 1); // Epoch t.setSeconds(this.value); $("#toDate").html(t); $('input').focus(); return t; }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="border border-dark text-center card-body"> <p>Convert Seconds</p> <input size="16" type="text" id="seconds"> </div> <hr> <div class="border border-dark text-center card-body"> <p>To Date</p> <p id="toDate"></p> </div> 

Answer 2

Your function parameter ( secs ) isn't the value of the input . That parameter is actually a reference to the keydown event. You need to manually set the variable to the input's value .

Now, with that out of the way, it's unclear why you want to do this work in the keydown event in the first place. It probably makes more sense to do it when the user leaves the field and only if the field's value has changed, in which case, you'd want the change event.

Also, don't use the .html() method when the string you are working with doesn't contain any HTML. It opens security holes in your code and can hurt performance. Instead, use the .text() method for non-HTML strings.

 $(document).on('change', function toDateTime() { var secs = $('input').val(); // <-- Get the value of the input var t = new Date(1970, 0, 1); // Epoch t.setSeconds(+secs); console.log(t); $("#toDate").text(t); $('input').focus(); return t; }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="border border-dark text-center card-body"> <p>Convert Seconds (press tab to leave the field after data entry)</p> <input size="16" type="text" id="seconds"> </div> <hr> <div class="border border-dark text-center card-body"> <p>To Date</p> <p id="toDate"></p> </div> 

Answer 3

Multiple differences:

1. In your code, secs returned an object so to get the value, you would've had to have done secs.key
2. After fixing your code with #1, I found out that it wasn't quantitative . It would only add the last digit not the total input . To fix that, I changed it from keydown to keyup and instead of getting the value from the function, I got the value using jQuery.

 $(document).on('keyup', function toDateTime() { var secs = $('input').val(); var t = new Date(1970, 0, 1); // Epoch t.setSeconds(secs); console.log(t); $("#toDate").html(t); $('input').focus(); return t; }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="border border-dark text-center card-body"> <p>Convert Seconds</p> <input size="16" type="text" id="seconds"> </div> <hr> <div class="border border-dark text-center card-body"> <p>To Date</p> <p id="toDate"></p> </div> 

Answer 4

change:

$(document).on('keydown', function toDateTime(secs) {
    // var secs = $('input').focus();
    var t = new Date(1970, 0, 1); // Epoch
    t.setSeconds(secs);
    console.log(t);
    $("#toDate").html(t);
    $('input').focus();
    return t;
 });

to:

$(document).on('keydown', function toDateTime(secs) {
    // var secs = $('input').focus();
    var t = new Date(1970, 0, 1); // Epoch
    t.setSeconds(this.value);
    console.log(t);
    $("#toDate").html(t);
    $('input').focus();
    return t;
 });