Question

我试图为那些使用不支持html5输入类型=日期的浏览器的用户创建一个回退到jquery。我的输入类型设置为＆＃34; text＆＃34;默认情况下，我在焦点时通过js将其更改为type='date'，因此我可以在输入字段未聚焦时保留占位符。现在，我在使用IE时遇到了一个问题，它发生了IE在命令的第一行抛出错误（将输入类型设置为＆＃39; date＆＃39;）并且我害怕它不读以下代码。

我想： A）如果输入类型可以设置为＆＃39; date＆＃39;，则不启用jquery datepicker，而是使用本机浏览器的datepicker。 B）如果无法做到这一点，则启用jquery datepicker。

我正在浏览论坛和其他网站寻求答案，但我无法让他们工作。

由于我是这方面的新手，我向您提出所有可能的解释和耐心的详细信息。

由于代码集可能比仅仅粘贴代码更好，我会为代码提供代码集：

http://codepen.io/Sourcerer/pen/NGbKXv

代码，这里：

＆＃13;

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';
}

＆＃13;

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

＆＃13;

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

＆＃13;

您还会找到一段关于选择mindate = today到达和mindate=tomorrow离开的代码。请忽略它，因为只需粘贴整个代码就更容易了。

编辑：我意识到代码不清楚..也许我应该开始告诉我之前尝试过的事情：

＆＃13;

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

＆＃13;

由于想法是询问浏览器是否可以将类型更改为日期，如果不是，请启动日期选择器。

之后不工作，我尝试使用modernizr，（我在head部分中下载并调用了这个代码：

＆＃13;

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

＆＃13;

哪个有效，但问题是在支持浏览器时触发native和jquery datepicker。有没有关于如何在焦点发生后几毫秒启动jquery的想法，所以已经将输入类型更改为＆＃34; date＆＃34;不会触发jquery？

我提前为我的英语道歉..我想礼貌地询问尽可能多的细节，因为我在javascript中根本不可靠。再次感谢！

Answer 1

我想：A）如果输入类型可以设置为'date'，那么不是   启用jquery datepicker，而不是使用本机浏览器   日期选择器。 B）如果无法实现，则启用jquery   日期选择器。

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

你走在正确的轨道上。只需检查type的{{1}}是否为input，然后再附上日期选择器。否则，这意味着浏览器支持HTML5日期类型并自动成为后备。

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

text

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

jquery datepicker后备

1 个答案: