英文:
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('myTime');
let output = document.getElementById('output');
let getHours = new Date('time').getHours()
console.log(getHours)
getHours < 12 ? output.innerText = 'Morning'
: getHours < 18 ? output.innerText = 'Afternoon'
: getHours < 24 ? output.innerText = 'Evening'
: output.innerText = 'Error getting hour!';
}
<!-- language: lang-css -->
span{
border: 1px solid gray;
background-color: gray;
color: darkred;
width: 12rem;
height: 12rem;
}
<!-- language: lang-html -->
<label>Time In: </label><input id='myTime' type='time'/>
<br><br>
<button onclick="showTime()">Show Hour Only</button>
<br><br>
<span id='output'></span>
<!-- 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('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!';
}
<!-- language: lang-css -->
span{
border: 1px solid gray;
background-color: gray;
color: darkred;
width: 12rem;
height: 12rem;
}
<!-- language: lang-html -->
<label>Time In: </label><input id='myTime' type='time'/>
<br><br>
<button onclick="showTime()">Show Hour Only</button>
<br><br>
<span id='output'></span>
<!-- 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('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!'
}
<!-- language: lang-html -->
<label>Time In: </label><input id='myTime' type='time' />
<br><br>
<button onclick="showTime()">Show Hour Only</button>
<br><br>
<span id='output'></span>
<!-- 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('1/1/1 '+ 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('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!';
}
<!-- language: lang-css -->
span{
border: 1px solid gray;
background-color: gray;
color: darkred;
width: 12rem;
height: 12rem;
}
<!-- language: lang-html -->
<label>Time In: </label><input id='myTime' type='time'/>
<br><br>
<button onclick="showTime()">Show Hour Only</button>
<br><br>
<span id='output'></span>
<!-- 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('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';
}
}
<!-- language: lang-css -->
span {
border: 1px solid gray;
background-color: gray;
color: darkred;
width: 12rem;
height: 12rem;
}
<!-- language: lang-html -->
<label>Time In: </label><input id='myTime' type='time' />
<br><br>
<button onclick="showTime()">Show Hour Only</button>
<br><br>
<span id='output'></span>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论