如何将输入类型时间的值传递给 Date 对象? [英] How do I pass the value of an input type time to a Date object?

问题描述

此函数将时间转换为 12 小时格式，感谢 Stack Overflow 上为此函数的贡献者:

This function converts time to 12hr format, credits to a contributor on Stack Overflow for this function:

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> 

我的问题是如何获取以 12 小时格式显示在 span 标签上的时间输入字段的值.这段代码是半工作的.

My question is how do I get the value of the time input field to be displayed on the span tag in 12hr format. This code is semi-working.

它以 12 小时格式显示时间，但只显示当前时间.流程图类似于，用户在时间输入中选择时间 -> 一些 JS 转换为 12 小时格式 -> 在 span 标签中显示为 12 小时格式.有什么意见或建议吗?

It displays the time in 12hr format but only displays the current time. The flow chart would be something like, user selects time in time input -> some JS to convert to 12hr format -> display as 12hr format in span tag. Any advice or suggestions?

推荐答案

没有必要使用 Date 和它的方法输入是一个 String 所以你最好使用 .split(":") 方法，您将直接获得 hours 和 minutes 值.

There's no need to use Date and its methods the input is a String so you better use .split(":") method and you will get the hours and minutes values directly.

然后测试它们的值是否低于 10 添加前导 0 并且 hours 是否高于 12 使用 pm 后缀，否则使用 am.

Then just test if their values are lower than 10 add a leading 0 and if the hours is higher than 12 use pm suffix or use am otherwise.

这是一个使用时间输入的 onchange 事件及其值作为参数的实时演示 onchange="ampm(this.value) :

This is a live DEMO using onchange event of the time input with its value as parameter 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>

这篇关于如何将输入类型时间的值传递给 Date 对象?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！