firefox上的角度js输入日期

Question

我有这些输入和这个模型：

<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"
}

我需要将日期和时间作为字符串，并且该格式适用于我必须做的事情。问题是input date和input time仅适用于Chrome。如果我使用Firefox，这些输入将变为两个简单的input text。 我该怎么办？

Answer 1

如W3Schools中所述，Firefox不支持HTML5 input date。因此，Firefox和IE中的所有input date都将变为简单input text。

<小时/> 因此，如果您只使用IE和Firefox，则可以使用jQuery datepicker。使用this作为您的时间戳。

---

另外，另一种方法，但不是很好，使用<select>标签。

下面我使用JS（没有jQuery）和HTML来创建datepicker和timepicker。此外，我还创建了一个“验证”按钮来验证日期的值，这意味着“2012年2月31日”和“2014年2月29日”将被视为无效。

的 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> &nbsp; [24 hrs clock]</td></tr>
</table><br><br>
<input type="button" id="validate" value="Validate"> &nbsp; <a style="color: Red;" id="error"></a>

<强> 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。希望有所帮助。

Answer 2

AFAIK，'date' input type is supported only by chrome at the moment。可能this answer可以帮助满足您的需求。