Input type=”time”返回NAN，仅获取小时值。

huangapple
go评论76阅读模式
英文:

Input type=" time " returning NAN if get hours value only

问题

我有一个用户可以输入时间的输入。

我想要获取小时，因为我会在一些条件中使用它。
但是使用下面的代码，我得到NAN值。
有没有一种方法可以仅使用<input type="time">获取小时？ 不包括 分钟？

*示例1：
用户输入 => 10:32 am
获取 => 10

*示例2：
用户输入 => 03:11 pm
获取 => 15 //24小时。

*需要使用 <input type="time">。

下面是我的样本代码(仅尝试)。

英文:

I have an input that user able to input the time.

I want to get the hours only because I will using it on some of my conditions.
But using the code below, I get NAN value.
Is there a way to get the hour only using <input type="time">? not included the minutes?

*Example 1:
User input => 10:32 am
get => 10

*Example 2:
User input => 03:11 pm
get => 15 //24hrs.

*Require to use <input type="time">.

Below is my sample code(attempt only).

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function showTime(){
  let time = document.getElementById(&#39;myTime&#39;);
  let output = document.getElementById(&#39;output&#39;);
  let getHours = new Date(&#39;time&#39;).getHours()
  console.log(getHours)
  getHours &lt; 12 ? output.innerText = &#39;Morning&#39;
  : getHours &lt; 18 ? output.innerText = &#39;Afternoon&#39;
  : getHours &lt; 24 ? output.innerText = &#39;Evening&#39;
  : output.innerText = &#39;Error getting hour!&#39;;

}

<!-- language: lang-css -->

span{
  border: 1px solid gray;
  background-color: gray;
  color: darkred;
  width: 12rem;
  height: 12rem;
}

<!-- language: lang-html -->

&lt;label&gt;Time In: &lt;/label&gt;&lt;input id=&#39;myTime&#39; type=&#39;time&#39;/&gt;
&lt;br&gt;&lt;br&gt;
&lt;button onclick=&quot;showTime()&quot;&gt;Show Hour Only&lt;/button&gt;
&lt;br&gt;&lt;br&gt;
&lt;span id=&#39;output&#39;&gt;&lt;/span&gt;

<!-- end snippet -->

答案1

得分: 1

new Date(time) 在你尝试使用 getHours() 时返回 null。你可以将时间 值 拆分并使用数组的 [0] 索引 来获取小时。

示例代码：

function showTime(){
  let time = document.getElementById('myTime');
  let output = document.getElementById('output');
  let getHours = time.value.split(":")[0];
  console.log(getHours);
  getHours < 12 ? output.innerText = 'Morning'
  : getHours < 18 ? output.innerText = 'Afternoon'
  : getHours < 24 ? output.innerText = 'Evening'
  : output.innerText = 'Error getting hour!';
}

span{
  border: 1px solid gray;
  background-color: gray;
  color: darkred;
  width: 12rem;
  height: 12rem;
}

<label>Time In: </label><input id='myTime' type='time'/>
<br><br>
<button onclick="showTime()">Show Hour Only</button>
<br><br>
<span id='output'></span>
英文:

new Date(time) returns null on which you are trying use getHours(). You can split the time value and get the first element of the array using the [0] index to get the hours.

Code Example:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function showTime(){
  let time = document.getElementById(&#39;myTime&#39;);
  let output = document.getElementById(&#39;output&#39;);
  let getHours = time.value.split(&quot;:&quot;)[0];
  console.log(getHours);
  getHours &lt; 12 ? output.innerText = &#39;Morning&#39;
  : getHours &lt; 18 ? output.innerText = &#39;Afternoon&#39;
  : getHours &lt; 24 ? output.innerText = &#39;Evening&#39;
  : output.innerText = &#39;Error getting hour!&#39;;
}

<!-- language: lang-css -->

span{
  border: 1px solid gray;
  background-color: gray;
  color: darkred;
  width: 12rem;
  height: 12rem;
}

<!-- language: lang-html -->

&lt;label&gt;Time In: &lt;/label&gt;&lt;input id=&#39;myTime&#39; type=&#39;time&#39;/&gt;
&lt;br&gt;&lt;br&gt;
&lt;button onclick=&quot;showTime()&quot;&gt;Show Hour Only&lt;/button&gt;
&lt;br&gt;&lt;br&gt;
&lt;span id=&#39;output&#39;&gt;&lt;/span&gt;

<!-- end snippet -->

答案2

得分: 1

以下是翻译好的部分：

"Wrong format, you need year, month and second."

function showTime() {
  let time = document.getElementById('myTime').value;
  let output = document.getElementById('output');
  let now = new Date()
  let getHours = new Date(`${now.getFullYear()}-${now.getMonth()}-${now.getDate()} ${time}:00`).getHours();
  output.innerText = getHours < 12 ? 'Morning' : getHours < 18 ? 'Afternoon' : getHours < 24 ? 'Evening' : 'Error getting hour!'
}

<label>Time In: </label><input id='myTime' type='time' />
<br><br>
<button onclick="showTime()">Show Hour Only</button>
<br><br>
<span id='output'></span>

希望这能帮助你。

英文:

Wrong format, you need year, month and second.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function showTime() {
  let time = document.getElementById(&#39;myTime&#39;).value;
  let output = document.getElementById(&#39;output&#39;);
  let now = new Date()
  let getHours = new Date(`${now.getFullYear()}-${now.getMonth()}-${now.getDate()} ${time}:00`).getHours();
  output.innerText = getHours &lt; 12 ? &#39;Morning&#39; : getHours &lt; 18 ? &#39;Afternoon&#39; : getHours &lt; 24 ? &#39;Evening&#39; : &#39;Error getting hour!&#39;
}

<!-- language: lang-html -->

&lt;label&gt;Time In: &lt;/label&gt;&lt;input id=&#39;myTime&#39; type=&#39;time&#39; /&gt;
&lt;br&gt;&lt;br&gt;
&lt;button onclick=&quot;showTime()&quot;&gt;Show Hour Only&lt;/button&gt;
&lt;br&gt;&lt;br&gt;
&lt;span id=&#39;output&#39;&gt;&lt;/span&gt;

<!-- end snippet -->

答案3

得分: 1

Here is the translation of the requested content:

将js中的第4行编辑为：

let getHours = new Date('1/1/1 ' + time.value).getHours()

这样就可以正常工作了。

以下是您提供的代码部分，不需要翻译：

<label>Time In: </label><input id='myTime' type='time'/>
<br><br>
<button onclick="showTime()">Show Hour Only</button>
<br><br>
<span id='output'></span>

span{
  border: 1px solid gray;
  background-color: gray;
  color: darkred;
  width: 12rem;
  height: 12rem;
}

function showTime(){
  let time = document.getElementById('myTime');
  let output = document.getElementById('output');
  let getHours = new Date('1/1/1 ' + time.value).getHours()
  console.log(getHours)
  getHours < 12 ? output.innerText = 'Morning'
  : getHours < 18 ? output.innerText = 'Afternoon'
  : getHours < 24 ? output.innerText = 'Evening'
  : output.innerText = 'Error getting hour!';
}
英文:

edit line 4 of js to :

let getHours = new Date(&#39;1/1/1 &#39;+ time.value).getHours()

and it will work

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function showTime(){
  let time = document.getElementById(&#39;myTime&#39;);
  let output = document.getElementById(&#39;output&#39;);
  let getHours = new Date(&#39;1/1/1 &#39;+ time.value).getHours()
  console.log(getHours)
  getHours &lt; 12 ? output.innerText = &#39;Morning&#39;
  : getHours &lt; 18 ? output.innerText = &#39;Afternoon&#39;
  : getHours &lt; 24 ? output.innerText = &#39;Evening&#39;
  : output.innerText = &#39;Error getting hour!&#39;;

}

<!-- language: lang-css -->

span{
  border: 1px solid gray;
  background-color: gray;
  color: darkred;
  width: 12rem;
  height: 12rem;
}

<!-- language: lang-html -->

&lt;label&gt;Time In: &lt;/label&gt;&lt;input id=&#39;myTime&#39; type=&#39;time&#39;/&gt;
&lt;br&gt;&lt;br&gt;
&lt;button onclick=&quot;showTime()&quot;&gt;Show Hour Only&lt;/button&gt;
&lt;br&gt;&lt;br&gt;
&lt;span id=&#39;output&#39;&gt;&lt;/span&gt;

<!-- end snippet -->

答案4

得分: 1

你应该仍然使用 `time.value`，但输入值只是时间部分而不是完整日期，所以你无法达到所需的输出。以下是你想要的工作代码。

从时间中仅提取小时部分，然后检查它是否有效，然后输出它。

```js
function showTime() {
  let time = document.getElementById('myTime');
  let output = document.getElementById('output');
  let hours = parseInt(time.value.substr(0, 2)); 
  console.log(hours);
  if (!isNaN(hours)) {
    output.innerText = hours < 12 ? 'Morning' :
      hours < 18 ? 'Afternoon' :
      hours < 24 ? 'Evening' :
      'Error getting hour!';
  } else {
    output.innerText = 'Invalid input';
  }
}

span {
  border: 1px solid gray;
  background-color: gray;
  color: darkred;
  width: 12rem;
  height: 12rem;
}

<label>Time In: </label><input id='myTime' type='time' />
<br><br>
<button onclick="showTime()">Show Hour Only</button>
<br><br>
<span id='output'></span>
英文:

You should use time.value still the input value is only time component not complete date so that you are not able to achieve the required output. Here's the working code as you wanted.

Extracting only hours part from the time and then checking is it valid then outputting it.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function showTime() {
  let time = document.getElementById(&#39;myTime&#39;);
  let output = document.getElementById(&#39;output&#39;);
  let hours = parseInt(time.value.substr(0, 2)); 
  console.log(hours);
  if (!isNaN(hours)) {
    output.innerText = hours &lt; 12 ? &#39;Morning&#39; :
      hours &lt; 18 ? &#39;Afternoon&#39; :
      hours &lt; 24 ? &#39;Evening&#39; :
      &#39;Error getting hour!&#39;;
  } else {
    output.innerText = &#39;Invalid input&#39;;
  }
}

<!-- language: lang-css -->

span {
  border: 1px solid gray;
  background-color: gray;
  color: darkred;
  width: 12rem;
  height: 12rem;
}

<!-- language: lang-html -->

&lt;label&gt;Time In: &lt;/label&gt;&lt;input id=&#39;myTime&#39; type=&#39;time&#39; /&gt;
&lt;br&gt;&lt;br&gt;
&lt;button onclick=&quot;showTime()&quot;&gt;Show Hour Only&lt;/button&gt;
&lt;br&gt;&lt;br&gt;
&lt;span id=&#39;output&#39;&gt;&lt;/span&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月10日 11:42:54
  • 转载请务必保留本文链接：https://go.coder-hub.com/76214748.html
  • html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定