在Firefox角JS输入日期 [英] angular js input date on firefox
问题描述
我已经得到了这些输入该模型:
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"
}
我需要的日期和时间为一个字符串,该格式是确定什么,我必须做的。问题是输入日期
和输入时间
只与镀铬正常工作。如果我使用Firefox这些输入成为两个简单输入文本
。
我该怎么办?
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 date
and input time
only work properly with Chrome. If I use Firefox these inputs become two simple input text
.
What can I do?
推荐答案
如 W3Schools的提及一>,HTML5的输入日期
不是在Firefox支持。因此,所有的输入日期
将成为在Firefox简单的输入文本
,以及IE浏览器。
所以,如果你只使用IE和Firefox,你可以使用 jQuery的日期选择器。使用这您timepicker。
此外,另一种方式,但不是很好,是一个使用
&LT;选择方式&gt;
标签
As mentioned in W3Schools, the HTML5 input date
is not supported in Firefox. Therefore, all input date
will become simple input text
in Firefox, as well as IE.
So if you only use IE and Firefox, you could use a jQuery datepicker. Use this for your timepicker.
Also, another way but not as nice, is using
<select>
tags.
下面我用JS(无jQuery的)和HTML创建日期选择器和timepicker。此外,我还创建了一个验证按钮来验证日期,这意味着2012 2月31日和2014年2月29日将被认为是无效的值。
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.
结果
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:
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 = "";
}
小提琴。希望帮助。
这篇关于在Firefox角JS输入日期的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!