1
我想爲不支持html5 input type = date的瀏覽器的所有用戶創建一個回退到jquery。 我有我的輸入類型設置爲默認的「文本」，並且我在焦點時通過js更改爲type='date'，所以當輸入字段未聚焦時，我可以保留佔位符。 現在，我遇到了一個問題，當使用IE瀏覽器時，它碰巧IE在第一行命令（設置輸入類型爲'date'）時會拋出一個錯誤，我擔心它不會讀取下面的代碼。jquery datepicker fallback
我想： 答：如果輸入類型可以設置爲'日期'，那麼不啓用jquery datepicker，而是使用本機瀏覽器的datepicker。 B）如果這不可能，那麼啓用jquery datepicker。
我在衝浪論壇和其他網站尋求答案，但我無法讓他們工作。
因爲我是這個新手，所以我會向您詢問所有可能的解釋和細節。
由於可能是codepen將可能是更好的不僅僅是粘貼代碼，我會提供我的代碼codepen：
http://codepen.io/Sourcerer/pen/NGbKXv
和代碼，在這裏：
var date = new Date();
var dd = date.getDate();
var year = date.getFullYear();
var mm = date.getMonth() + 1;
if (mm == 12 && dd == 31) mmt = 1, yeart = year + 1;
else if (((mm == 4 || mm == 6 || mm == 9 || mm == 11) && dd == 30) || dd == 31 || mm == 2 && year % 4 == !0 && dd == 28 || mm == 2 && dd == 29)
ddt = 1, mmt = mm + 1;
else(ddt = dd + 1, mmt = mm, yeart = year);
if (mm < 10)
month = '0' + mm;
else(month = mm)
if (dd < 10)
day = '0' + dd;
else(day = dd);
if (mmt < 10)
montht = '0' + mmt;
else(montht = mmt)
if (ddt < 10)
dayt = '0' + ddt;
else(dayt = ddt);
var today = year + "-" + month + "-" + day;
var tomorrow = yeart + "-" + montht + "-" + dayt;
function changeInputTypeEn() {
document.getElementById('entrada').type = 'date';
document.getElementById('entrada').min = today;
}
function changeInputTypeBackEn() {
if (document.getElementById('entrada').value == '')
document.getElementById('entrada').type = 'text';
else
document.getElementById('entrada').type = 'date';
var t = document.getElementById('entrada').value;
var ed = Number(+t.slice(8, 10));
var em = Number(+t.slice(5, 7));
var ey = Number(+t.slice(0, 4));
if (em == 12 && ed == 31) lm = 1, leavingYear = ey + 1;
else if (((em == 4 || em == 6 || em == 9 || em == 11) && ed == 30) || ed == 31 || em == 2 && ey % 4 == !0 && ed == 28 || em == 2 && ed == 29)
ld = 1, lm = em + 1;
else(ld = ed + 1, lm = em, leavingYear = ey);
if (ld < 10)
leavingDay = '0' + ld;
else(leavingDay = ld);
if (lm < 10)
leavingMonth = '0' + lm;
else(leavingMonth = lm);
leavingDate = leavingYear + "-" + leavingMonth + "-" + leavingDay;
}
function changeInputTypeSa() {
document.getElementById('salida').type = 'date';
if (document.getElementById('entrada').value !== '')
document.getElementById('salida').min = leavingDate;
else(document.getElementById('salida').min = tomorrow);
}
function changeInputTypeBackSa() {
if (document.getElementById('salida').value == '')
document.getElementById('salida').type = 'text';
else
document.getElementById('salida').type = 'date';
}table#form {
width: 100%;
position: absolute;
top: 0px;
}
tr {
width: 100%;
height: 75px;
}
tr#text {
height: 100px;
}
form#consultas input.input-text {
font-size: 16px;
padding: 4px 5px;
background-color: rgb(246, 247, 240);
z-index: 1;
border: solid 1px rgb(204, 204, 204);
-webkit-border-radius: 0px 5px 5px 0px;
width: 180px;
position: absolute;
left: 42px;
height: 30px;
}
label.inside {
position: absolute;
left: 5px;
width: 200px;
color: rgb(94, 94, 94);
-webkit-transition: all ease-out 400ms;
-ms-transition: all ease-out 400ms;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Roboto, Helvetica, Arial, "Lucida Grande", sans-serif;
font-size: 16px;
}
label.en {
top: 32px;
opacity: 0;
}
label.s {
top: 32px;
left: 687px;
opacity: 0;
}
input#entrada:focus + label.en {
opacity: 1;
-webkit-transform: translate3d(0px, -25px, 0px);
-ms-transform: translate3d(0px, -25px, 0px);
}
input#salida:focus + label.s {
opacity: 1;
-webkit-transform: translate3d(0px, -25px, 0px);
-ms-transform: translate3d(0px, -25px, 0px);
}<table id=form>
<tr>
<td>
<input class="input-text" name="entrada" id="entrada" type="text" placeholder="Arrive (DD/MM/AAAA)" onfocus="changeInputTypeEn();" onblur="changeInputTypeBackEn();" required="" />
<label for="entrada" class="inside en">Arriving date</label>
</td>
<td>
<input class="salida" name="salida" id="salida" type="text" placeholder="Leave (DD/MM/AAAA)" onfocus="changeInputTypeSa();" onblur="changeInputTypeBackSa();" required="" />
<label for="salida" class="inside s">Leaving date</label>
</td>
</tr>
</table>您還會發現一段關於選擇的代碼抵達，mindate=tomorrow離開。 請忽略它，因爲只需粘貼整個代碼更容易。
編輯：我意識到，代碼不清楚..也許我應該開始告訴我已經嘗試過：
function changeInputTypeEn() {
document.getElementById('entrada').type = 'date';
if (document.getElementById('entrada').type =='date')
document.getElementById('entrada').min = today;
else ($('entrada').datepicker())
}由於當時的想法是，如果能問的瀏覽器將類型更改爲日期，如果不是，請啓動datepicker。
之後沒有工作，我試圖用Modernizr的，（我下載並在頭段的要求，而這一段代碼：
function changeInputTypeEn() {
if (!Modernizr.touch || !Modernizr.inputtypes.date) {
$('input[type=text]')
.attr('type', 'text')
.datepicker({
// Consistent format with the HTML5 picker
dateFormat: 'yy-mm-dd'
});
}
document.getElementById('entrada').type = 'date';
document.getElementById('entrada').min = today;
}其中一期工程，但問題是觸發支持瀏覽器的本機和jQuery日期選擇器 關於如何在焦點發生後幾毫秒內啓動jQuery有任何想法，所以瀏覽器已經改變輸入類型爲「日期」不觸發jquery？
我很抱歉爲我的英語提前..我想禮貌地問問儘可能多的細節，因爲我並不堅實的JavaScript .. 再次感謝！
@Abhitalks還是他的英語能力根本就不是那麼大......但仍然是不清楚他的問題是什麼。 –