Question

首先，我知道IE10或更早版本以及Firefox不支持<input type="time">，但这仅用于测试目的，我将在其他时间进行适当的跨浏览器更改。

目前，我有一个HTML时间输入字段。我试图从中提取值，包括小时，分钟和上午/下午。我可以显示小时和分钟，但不包括AM / PM指示。

我有如下输入：

<input type="time" name="end-time" id="end-time">

我通过alert()打印出输入值，如下所示：

alert(document.getElementById('end-time').value);

输入后，我会收到如下警告：

01:34。

请注意，alert()中未包含AM / PM。

如何通过Javascript从HTML时间输入获取AM / PM值？

Answer 1

据我所知，我们无法直接以“AM / PM”的子午线格式从输入中获取值。相反，我们可以编写自己的逻辑来转换AM / PM格式的值并存储/显示它。

以下是它的实现。

var inputEle = document.getElementById('timeInput');


function onTimeChange() {
  var timeSplit = inputEle.value.split(':'),
    hours,
    minutes,
    meridian;
  hours = timeSplit[0];
  minutes = timeSplit[1];
  if (hours > 12) {
    meridian = 'PM';
    hours -= 12;
  } else if (hours < 12) {
    meridian = 'AM';
    if (hours == 0) {
      hours = 12;
    }
  } else {
    meridian = 'PM';
  }
  alert(hours + ':' + minutes + ' ' + meridian);
}

<input type="time" onchange="onTimeChange()" id="timeInput" />

Answer 2

＆＃13;

function print() {
  t = document.getElementById('time').value
  var [h,m] = t.split(":");
  console.log((h%12+12*(h%12==0))+":"+m, h >= 12 ? 'PM' : 'AM');
}

＆＃13;

<input type="time" id="time">
<button onclick="print()">Submit</button>

＆＃13;

这对你有用吗？

Answer 3

您可以尝试使用<IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*)$ index.php [L] </IfModule>，它会为您提供一个具有正确时间的新Date（）。从那里你可以使用document.getElementById('end-time').valueAsDate（0-23）和使用.getHours()（0-59）的分钟来获得时间。有关JavaScript日期的详情，请参阅this。

Answer 4

这是日期和时间的修复。

<!DOCTYPE HTML >
<html>
<head>
<title>12 hour Time and Date stamp</title>
<meta name="" content="">
<script>
///////////
///////// DATE generator    /////////
function date_time(id){
        date = new Date;
        year = date.getFullYear();
        month = date.getMonth();
        months = new Array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec');
        d = date.getDate();
        day = date.getDay();
        days = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday');
        h = date.getHours();
        if(h<10){h = "0"+h;}
      m = date.getMinutes();
        if(m<10){m = "0"+m;}
       s = date.getSeconds();
        if(s<10){s = "0"+s;}
       result = ''+days[day]+' '+months[month]+' '+d+' '+year;
        document.getElementById(id).innerHTML = result;
        setTimeout('date_time("'+id+'");','1000');
        return true;
}
///////// end DATE Generator /////////
//////////////////////////////////////
/////////// Time Generator ///////////
function tS(){ x=new Date(); x.setTime(x.getTime()); return x; } 
function lZ(x){ return (x>9)?x:'0'+x; } 
function tH(x){ if(x==0){ x=12; } return (x>12)?x-=12:x; } 
function dT(){ if(fr==0){ fr=1; document.write('<font size=3 face=Arial><b><span id="tP">'+eval(oT)+'</span></b></font>'); } document.getElementById('tP').innerHTML=eval(oT); setTimeout('dT()',1000); } 
function aP(x){ return (x>11)?'pm':'am'; } 
var fr=0,oT="' '+tH(tS().getHours())+':'+lZ(tS().getMinutes())+':'+lZ(tS().getSeconds())+' '+aP(tS().getHours())";
///////// end Time Generator /////////
/////////
</script>
</head>

<body>
<!--Date.. Easily adjustable with javascript Array-->
<p><span id="date_time"></span></p>
    <script type="text/javascript">window.onload = date_time('date_time');</script><!--this MUST be included for Date-->
<!--Time in 12 hour format-->
<p><span id="dT"><script language="JavaScript">window.onload = dT('dT');</script></span></p>
</body>
</html>

我用这个已经超过6年了。总是有效的。但有几个笔记：

1：当时，从Javascript中调整CSS 2：调整显示文本（jan，Feb，march ... mon，tues，wed等...）通过更改Date Generator Section中的值。

您可以在AutoRoXX Network看到此工作

希望这段代码片段可以帮助您完成您想要完成的任务。我讨厌人们挣扎： - ）

Answer 5

目前无法相信使用<?php $action=$_REQUEST['action']; if ($action=="") { ?> <form action="" method="POST" enctype="multipart/form-data"> <input type="hidden" name="action" value="submit"> Your name:<br> <input name="name" type="text" value="" size="30"/><br> Your email:<br> <input name="email" type="text" value="" size="30"/><br> Your message:<br> <textarea name="message" rows="7" cols="30"></textarea><br> <input type="submit" value="Send email"/> </form> <?php } else /* send the submitted data */ { $name=$_REQUEST['name']; $email=$_REQUEST['email']; $message=$_REQUEST['message']; if (($name=="")||($email=="")||($message=="")) { echo "All fields are required, please fill <a href=\"\">the form</a> again."; } else{ $from="From: $name<$email>\r\nReturn-path: $email"; $subject="Personal Plate inquiry from website"; mail("mymail@hotmail.com", $subject, $message, $from); echo "Email sent!"; } } ?>方法访问.shadowRoot个原生<input>元素。其中，铬，铬元素

DOM

在

<span 
  role="spinbutton" 
  aria-valuetext="blank" 
  aria-valuemin="1" 
  aria-valuemax="2" 
  aria-help="AM/PM" 
  pseudo="-webkit-datetime-edit-ampm-field">
--
</span>

元素事件的.innerHTML元素AM处呈现PM <input type="time">或.shadowRoot {p}。见Is it possible to access Shadow DOM elements through the parent document?。

没有找到解决方法来选择change`元素.shadowRoot中的元素，

您可以使用DOM，其值增加input.valueAsDate.getTime()，其中值小于3600000时间为43200000，否则为"AM" ;通过检查"PM"的前两位数是否大于或等于.value来格式化输出，如果为true，则将13字符串的前两位数字替换为具有属性名称范围的对象的值.value到13

var times = {}, re = /^\d+(?=:)/;

for (var i = 13, n = 1; i < 24; i++, n++) {
  times[i] = n < 10 ? "0" + n : n
}

document.getElementById("end-time")
.onchange = function() {
  var time = this
  , value = time.value
  , match = value.match(re)[0];
  this.nextElementSibling.innerHTML =
  (match && match >= 13 ? value.replace(re, times[match]) : value)
  + (time.valueAsDate.getTime() < 43200000 ? " AM" : " PM")
}

从HTML时间输入获取AM / PM

5 个答案: