javascript Firefox 上的 Angular js 输入日期
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22932253/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
angular js input date on firefox
提问by Giammarco Boscaro
I've got these inputs and this model:
我有这些输入和这个模型：
<input name="date" type="date" ng-model="model.date" />
<input name="time" type="time" ng-model="model.time" />
model{
date: "yyyy-mm-dd",
time: "hh24:mi"
}
I need the date and the time as a string and that format is ok for what I have to do. The problem is the input dateand input timeonly work properly with Chrome. If I use Firefox these inputs become two simple input text.
What can I do?
我需要将日期和时间作为字符串，并且该格式适合我要做的事情。问题是input date并且input time只能与 Chrome 一起正常工作。如果我使用 Firefox，这些输入就会变成两个简单的input text. 我能做什么？
回答by chris97ong
As mentioned in W3Schools, the HTML5 input dateis not supported in Firefox. Therefore, all input datewill become simple input textin Firefox, as well as IE.
正如W3Schools 中提到的，input dateFirefox 不支持HTML5 。因此，在 Firefox 以及 IE 中，一切input date都会变得简单input text。
所以如果你只使用 IE 和 Firefox，你可以使用 jQuery datepickerjQuery 日期选择器。利用this这是您的时间选择器。
另外，另一种但不太好的方法是使用
<select><select>标签。Below I used JS (no jQuery) and HTML to create the datepicker and timepicker. Also, I have also created a "Validate" button to validate the values of the date, which means that "31 Feb 2012" and "29 Feb 2014" will be considered invalid.
下面我使用 JS（无 jQuery）和 HTML 来创建日期选择器和时间选择器。此外，我还创建了一个“验证”按钮来验证日期的值，这意味着“2012 年 2 月 31 日”和“2014 年 2 月 29 日”将被视为无效。
HTML:
HTML：
<table><tr><td>Event Date: </td><td> <select id="startday"></select><select id="startmonth">
<option value="01">Jan</option>
<option value="02">Feb</option>
<option value="03">Mar</option>
<option value="04">Apr</option>
<option value="05">May</option>
<option value="06">Jun</option>
<option value="07">Jul</option>
<option value="08">Aug</option>
<option value="09">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select> <select id="startyear"></select></td></tr>
<tr><td>Event Time:</td><td> <select id="starthrs"></select><select id="startmins"></select> [24 hrs clock]</td></tr>
</table><br><br>
<input type="button" id="validate" value="Validate"> <a style="color: Red;" id="error"></a>
JS:
JS：
for(var i = 0; i < 24; i++) {
var s = i.toString();
if(s.length == 1) {
s = "0" + s;
}
document.getElementById("starthrs").innerHTML += ("<option value='" + i + "'>" + s + " </option>");
}
for(var i = 0; i < 60; i++) {
var s = i.toString();
if(s.length == 1) {
s = "0" + s;
}
document.getElementById("startmins").innerHTML += ("<option value='" + i + "'>" + s + " </option>");
}
for(var i = 1; i < 32; i++) {
var s = i.toString();
if(s.length == 1) {
s = "0" + s;
}
document.getElementById("startday").innerHTML += ("<option value='" + s + "'>" + i + " </option>");
}
for(var i = new Date().getFullYear(); i < (new Date().getFullYear() + 11); i++) {
document.getElementById("startyear").innerHTML += ("<option value='" + i + "'>" + i + " </option>");
}
function ddlValue(id) {
var e = document.getElementById(id);
var strUser = e.options[e.selectedIndex].value;
return strUser;
}
// Validate date
function isDate(ExpiryDate) { // MM/DD/YYYY format
var objDate, // date object initialized from the ExpiryDate string
mSeconds, // ExpiryDate in milliseconds
day, // day
month, // month
year; // year
// date length should be 10 characters (no more no less)
if (ExpiryDate.length !== 10) {
return false;
}
// third and sixth character should be '/'
if (ExpiryDate.substring(2, 3) !== '/' || ExpiryDate.substring(5, 6) !== '/') {
return false;
}
// extract month, day and year from the ExpiryDate (expected format is mm/dd/yyyy)
// subtraction will cast variables to integer implicitly (needed
// for !== comparing)
month = ExpiryDate.substring(0, 2) - 1; // because months in JS start from 0
day = ExpiryDate.substring(3, 5) - 0;
year = ExpiryDate.substring(6, 10) - 0;
// test year range
if (year < 1000 || year > 3000) {
return false;
}
// convert ExpiryDate to milliseconds
mSeconds = (new Date(year, month, day)).getTime();
// initialize Date() object from calculated milliseconds
objDate = new Date();
objDate.setTime(mSeconds);
// compare input date and parts from Date() object
// if difference exists then date isn't valid
if (objDate.getFullYear() !== year ||
objDate.getMonth() !== month ||
objDate.getDate() !== day) {
return false;
}
// otherwise return true
return true;
}
document.getElementById("validate").onclick = function() {
var startday = parseInt(ddlValue("startday"));
var startmonth = parseInt(ddlValue("startmonth"));
var startyear = parseInt(ddlValue("startyear"));
var starthrs = parseInt(ddlValue("starthrs"));
var startmins = parseInt(ddlValue("startmins"));
// Invalid date
if(!isDate(ddlValue("startmonth") + "/" + ddlValue("startday") + "/" + ddlValue("startyear"))) {
document.getElementById("error").innerHTML = "Invalid date";
return;
}
document.getElementById("error").innerHTML = "";
}
Fiddle. Hope that helped.
小提琴。希望有所帮助。
回答by Agnislav
AFAIK, 'date' input type is supported only by chrome at the moment. May be this answerwill help with your need.
AFAIK，目前仅 chrome 支持“日期”输入类型。可能这个答案将有助于您的需要。
