如何在与Datepicker相同的输入字段中用Javascript编写可编辑的时间代码，但不使用Datetimepicker

Question

I myself wrote this particular code to get the current time:

$(function() {
    function getCurrentTime() {
        var CurrentTime = "";
        try {
            var CurrentDate = new Date();
            var CurrentHours = CurrentDate.getHours();
            var CurrentMinutes = CurrentDate.getMinutes();
            var CurrentSeconds = CurrentDate.getSeconds();

            if (CurrentMinutes < 10) { CurrentMinutes = "0" + CurrentMinutes; }
            if (CurrentSeconds < 10) { CurrentSeconds = "0" + CurrentSeconds; }
            if (CurrentHours < 10) { CurrentHours = "0" + CurrentHours; }

            CurrentTime = "" + CurrentHours + ":" + CurrentMinutes + ":" + CurrentSeconds + "";
        }
        catch (ex) {
        }
        return CurrentTime;
    }

and the only way I managed to show in the same input field as datepicker was this:

$(".class").datepicker({
    autoclose: true,
    format: "dd.mm.yyyy" + " " + getCurrentTime(),
}

This is all fine and well, but I cannot edit the content of the time, as when the datepicker closes it always returns the current time. Please help my find a way around this, WITHOUT using another plug in.

Answer 1

Not sure I understood what your goal is. Should the user input manually the time?

This change in the getCurrentTime function will check if in the datepicker current value there is a "time" part - if there is such time part, it will use that text instead of recomputing it.

Could be buggy since I've had no chance to try it, but this could be a possible solution. Not the best since using that "format" property isn't the best way to achieve this, but it should work.

$(function() {
    function getCurrentTime() {
        var CurrentTime = "";
        try {
            var currTime = undefined;
            var currVal = $('#my-datepicker').val();
            if (currVal.length > 11) {
                currTime = currVal.substring(11, 8);
            }
            if (typeof currTime !== 'undefined' && currTime.length == 8) {
                CurrentTime = currTime;
            } else {


                var CurrentDate = new Date();
                var CurrentHours = CurrentDate.getHours();
                var CurrentMinutes = CurrentDate.getMinutes();
                var CurrentSeconds = CurrentDate.getSeconds();

                if (CurrentMinutes < 10) { CurrentMinutes = "0" + CurrentMinutes; }
                if (CurrentSeconds < 10) { CurrentSeconds = "0" + CurrentSeconds; }
                if (CurrentHours < 10) { CurrentHours = "0" + CurrentHours; }

                CurrentTime = "" + CurrentHours + ":" + CurrentMinutes + ":" + CurrentSeconds + "";
            }
        }
        catch (ex) {
        }
        return CurrentTime;
    }

Answer 2

IF i understand the problem correctly, HTML5 input type "date" is one of easiest solution which work without any plugin. The <input type="date"> is used for input fields that should contain a date.

example : <input type="date" name="bday" min="2000-01-02">

One similar post with solution is there Input type DateTime - Value format?