Làm cách nào để chuyển giá trị của thời gian nhập kiểu cho đối tượng Ngày?

Question

Chức năng này chuyển đổi thời gian để 12hr định dạng, tín dụng cho cộng tác viên trên Stack Overflow cho chức năng này:

JS

function ampm(date) { 
    var hours = date.getHours(); 
    var minutes = date.getMinutes(); 
    var ampm = hours >= 12 ? 'pm' : 'am'; 
    hours = hours % 12; 
    hours = hours ? hours : 12; // 0 should be 12 
    minutes = minutes < 10 ? '0'+minutes : minutes; // if minutes less than 10, add a 0 in front of it ie: 6:6 -> 6:06 
    var strTime = hours + ':' + minutes + ' ' + ampm; 
    document.getElementById('time').value = strTime; 
    return strTime; 
} 

////This is how the value of the time input is supposed to be displayed in 12 hr format 
_("display_time").innerHTML = ampm(new Date()); 

HTML

<!--This is the input field where a user selects a time--> 
<input id="time" placeholder="Time" type="time" name="time" /> 




<!--This is where the value of the time input is supposed to be displayed in 12 hr format-->> 
<span id="display_time"></span> 

Câu hỏi của tôi là làm thế nào để Tôi nhận được giá trị của trường nhập thời gian được hiển thị trên thẻ span ở định dạng 12hr. Mã này đang hoạt động.

Nó hiển thị thời gian ở định dạng 12hr nhưng chỉ hiển thị thời gian hiện tại. Biểu đồ lưu lượng sẽ giống như, người dùng chọn thời gian đầu vào -> một số JS để chuyển đổi thành định dạng 12hr -> hiển thị dưới dạng định dạng 12hr trong thẻ span. Lời khuyên hay gợi ý nào?

Answer 1

Không có nhu cầu sử dụng Date và phương pháp của nó đầu vào là một String để bạn sử dụng tốt hơn .split(":") phương pháp và bạn sẽ nhận được các giá trị hours và minutes trực tiếp.

Sau đó chỉ cần kiểm tra xem giá trị của chúng thấp hơn 10 thêm một hàng đầu 0 và nếu hours cao hơn 12 sử dụng pm hậu tố hoặc sử dụng am khác.

Đây là một DEMO sống sử dụng onchange trường hợp thời gian đầu vào với giá trị của nó như là tham số onchange="ampm(this.value):

function ampm(time) { 
 

 
    console.log(time); 
 
    if (time.value !== "") { 
 
    var hours = time.split(":")[0]; 
 
    var minutes = time.split(":")[1]; 
 
    var suffix = hours >= 12 ? "pm" : "am"; 
 
    hours = hours % 12 || 12; 
 
    hours = hours < 10 ? "0" + hours : hours; 
 

 
    var displayTime = hours + ":" + minutes + " " + suffix; 
 
    document.getElementById("display_time").innerHTML = displayTime; 
 
    } 
 
}

<!--This is the input field where a user selects a time--> 
 
<input id="time" placeholder="Time" type="time" name="time" onchange="ampm(this.value)" /> 
 
<span id="display_time"></span>

Answer 2

giá trị đầu vào của bạn sẽ là một chuỗi, không phải là một ngày. Tôi đã thiết lập một số jsfiddle nơi tôi đã sửa đổi javascript của bạn để hoạt động trên một chuỗi.

$('#time').on('change', function() { 
    var date = $('#time').val().split(':'); 

    var hours = date[0]; 
    var minutes = date[1]; 

    $('#display_time').text(ampm(hours, minutes)); 
}); 

function ampm(hours, minutes) { 
    var ampm = hours >= 12 ? 'pm' : 'am'; 
    hours = hours % 12 || 12; 
    minutes = minutes || 0; 
    minutes = minutes < 10 ? '0'+minutes : minutes; 
    return hours + ':' + minutes + ' ' + ampm; 
} 

Answer 3

Something như thế này sẽ làm điều đó

function showTime() { 
    //Grab the time and split into hrs and mins 
    var time = document.getElementById("time"); 
    if (time.value === "") { 
     document.getElementById("mySpan").innerHTML = ""; 
     return false; 
    } 
    var hrs = time.value.split(":")[0]; 
    var mins = time.value.split(":")[1]; 
    var newTime = ampm(hrs, mins); 
    document.getElementById("mySpan").innerHTML = newTime; 
} 

function ampm(hrs, mins) { 
    return (hrs % 12 || 12) + ":" + mins + ((hrs >= 12) ? "PM" : "AM"); 
} 

Here là một ví dụ. showTime() chỉ cần được chạy khi thay đổi đầu vào thời gian.