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 。 因此，所有input date將成為Firefox中的簡單input text ，以及IE。

---

因此，如果您只使用IE和Firefox，則可以使用jQuery日期選擇器 。 將此用於您的時間選擇器。

---

另外，另一種方法，但不是很好，是使用<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 = ""; } 

小提琴 。 希望有所幫助。

Answer 2

AFAIK， 'date'輸入類型目前僅由chrome支持 。 可能這個答案將有助於滿足您的需求。