jquery datepicker 回退

Question

我正在尝试为所有使用不支持 html5 输入类型 = 日期的浏览器的用户创建一个回退到 jquery。 我的输入类型默认设置为“文本”，当您关注时，我通过 js 将其更改为type='date'，因此当输入字段未获得关注时，我可以保留占位符。 现在，我在使用IE时遇到一个问题，恰好IE在第一行命令抛出错误（将输入类型设置为'date'），我担心它没有读取以下代码。

我想： A) 如果输入类型可以设置为“日期”，则不启用 jquery 日期选择器，而是使用本机浏览器的日期选择器。 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 表示离开。 请忽略这一点，因为简单地粘贴整个代码更容易。

编辑：我意识到代码不清楚。也许我应该开始讲述我之前尝试过的内容：

function changeInputTypeEn() {
    document.getElementById('entrada').type = 'date';
  if (document.getElementById('entrada').type =='date')
    document.getElementById('entrada').min = today;
  else ($('entrada').datepicker())
}

因为这个想法是询问浏览器是否可以将类型更改为日期，如果不能，则启动日期选择器。

在那之后不起作用，我尝试使用modernizr，（我在head部分下载并调用了它，以及这段代码：

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 方面一点也不扎实.. 再次感谢！

Answer 1

我想：A）如果输入类型可以设置为“日期”，那么不 启用 jquery datepicker，而是使用本机浏览器的 日期选择器。 B）如果这不可能，那么启用jquery 日期选择器。

也许我应该开始讲述我之前尝试过的事情......

你在正确的轨道上。只需检查input 的type 是否为text，然后才附加日期选择器。否则，表示浏览器支持 HTML5 日期类型，自动成为 fallback。

这是一个快速而肮脏的例子（代码 cmets 中的解释）：

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"
    }    
});

小提琴：http://jsfiddle.net/abhitalks/tmxxembf/2/