angular js input date on firefox

Question

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 date and input time only work properly with Chrome. If I use Firefox these inputs become two simple input text. What can I do?

Solution

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.

---

jQuery datepicker

this

---

<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.

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. Hope that helped.

Comments

[gbos]

Yep I knew this. So what's the best way to have two inputs, for date and for time, in the browsers other than Chrome? I can't just leave an input text because the values has to be inserted and formatted in the correct ways

[chris97ong]

@GiammarcoBoscaro Edited

[gbos]

Thanks but, I should have said, I can't use jQuery in this project. Anyway a datepicker is not necessary. I think it would be enough if I had a input text with, I dunno, a "date mask" and maybe that somehow check the correct format. How'd you do that?

[chris97ong]

What is a "date mask"?

[chris97ong]

And as an alternative, you can also use the <select> and <option> tags for the datepicker. But not for the timepicker I guess.

[chris97ong]

@GiammarcoBoscaro Edited again.

[gbos]

with "date mask" I was thinking about something similar to excel's input masks. Anyway the selectbox it's a good idea! I'll check the code and try to implement it in an angular way. Thanks!

[chris97ong]

@GiammarcoBoscaro Glad to hear. Hope you accept this as answer :-)