jquery datepicker fallback

Question

Я пытаюсь создать резервную копию jquery для всех тех пользователей с браузерами, которые не поддерживают тип ввода html5 = дата. У меня есть тип ввода как «текст» по умолчанию, и я меняю его на type='date' через js, когда вы фокусируетесь, поэтому я могу сохранить местозаполнитель, когда поле ввода не сфокусировано. Теперь у меня возникает проблема при использовании IE, поэтому IE выдает ошибку в первой строке команды (установка типа ввода на «дата»), и я боюсь, что он не прочитает следующий код.

Я хочу: A) Если тип ввода может быть установлен на «дата», а затем не включать 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 = today для прибытия и mindate=tomorrow для ухода. Пожалуйста, проигнорируйте это, поскольку было проще просто вставить весь код.

EDIT: я понял, что код не ясно .. Может быть, я должен начать говорить, что я попробовал раньше:

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 datepicker в поддержку браузеров. Есть ли какие-либо идеи о том, как запустить jquery через несколько миллисекунд после того, как фокус произошел, поэтому браузеры, которые уже изменили тип ввода на «дату», не запускать jquery?

Я заранее прошу прощения за мой английский. Я хотел попросить вежливо донести до мельчайших подробностей, так как я не уверен вообще в javascript .. Еще раз спасибо!

Answer 1

Я хочу: A) Если тип входного сигнала может быть установлен в «дата», то не позволяет Jquery DatePicker, и вместо того, чтобы использовать DatePicker родного браузера. B) Если это невозможно, включите jQuery datepicker.

Может быть, я должен начать говорить то, что я пытался до ..

Вы на правильном пути. Просто проверьте, typeinput - text, только затем прикрепите устройство даты. В противном случае это означает, что браузер поддерживает тип даты HTML5 и автоматически становится резервным.

Вот быстрый и грязный пример (пояснения в комментариях к коду):

var dtType, $inputs = $('input'); 

$inputs.each(function() { 
    /* 
    We check the type of each element. 
    If the browser supports html5 date type, then it will return "date". 
    If browser doesn't support, it will default to "text" type. 
    */ 
    dtType = this.type; 
    if (dtType == "text") { 
     $(this).datepicker(); // Attach datepicker only if type is "text" 
    }  
}); 

Fiddle: http://jsfiddle.net/abhitalks/tmxxembf/2/