jQuery DatePicker，在 iOS 上隐藏数据类型日期

Question

我在我的 Web 应用程序中使用 jQuery DatePicker，但我想在 iOS 上使用本机 type="date"，因此它在 iOS Safari 中使用本机日期选择器。

主要的一点是我不希望用户放弃功能，不管他们的设备是什么，但是我对 iOS 上的 jQuery DatePicker 不满意，因为它使用起来很笨拙，并且偶尔会弄乱应用程序的设计。

如果我使用type="date"，那么按照目前的编写方式，我会同时显示 jQuery DatePicker，以及用于日期的原生 iOS 函数。

基本上需要对type="date" 的支持进行某种检测，但是这似乎相当缺乏，因为某些浏览器会声称支持日期类型，但这并不一定意味着它们提供 UI日期。

P.S Android/Windows 手机是否有 type="date" 的原生函数？

---

代码示例

<div class="col-xs-5 col-sm-4">
  <input type="date" class="form-control date-picker" id="formatD" name="formatD" placeholder="Enter date of format approval" value="<?php echo $app->getCurrentDate() ?>">
</div>

<script>
  $(function() {

    $( ".date-picker" ).datepicker({
      format: "dd/mm/yyyy"
    });

  });
</script>

---

更新

使用 Modernizr 找到了一个很好的解决方案，请参阅下面的答案。

Answer 1

你必须检测浏览器是否支持原生输入日期，如果不支持，则调用日期时间选择器js库。如何检测输入日期支持？

这里in this question

Answer 2

解决方案的主要方面是检测浏览器的功能，我发现最简单的方法是使用 Modernizr，我使用了一个自定义构建，只选择了输入类型，因为这就是我所需要的.

此解决方案意味着对日期没有足够支持的浏览器，更具体地说，那些不提供回退到 jQuery DatePicker 的 UI 的浏览器，那些支持输入类型日期 UI 的浏览器，使用本机功能。

/*! modernizr 3.2.0 (Custom Build) | MIT *
 * http://modernizr.com/download/?-inputtypes !*/
!function(e,t,n){function a(e,t){return typeof e===t}function s(){var e,t,n,s,i,o,c;for(var u in r)if(r.hasOwnProperty(u)){if(e=[],t=r[u],t.name&&(e.push(t.name.toLowerCase()),t.options&&t.options.aliases&&t.options.aliases.length))for(n=0;n<t.options.aliases.length;n++)e.push(t.options.aliases[n].toLowerCase());for(s=a(t.fn,"function")?t.fn():t.fn,i=0;i<e.length;i++)o=e[i],c=o.split("."),1===c.length?Modernizr[c[0]]=s:(!Modernizr[c[0]]||Modernizr[c[0]]instanceof Boolean||(Modernizr[c[0]]=new Boolean(Modernizr[c[0]])),Modernizr[c[0]][c[1]]=s),l.push((s?"":"no-")+c.join("-"))}}function i(e){var t=u.className,n=Modernizr._config.classPrefix||"";if(f&&(t=t.baseVal),Modernizr._config.enableJSClass){var a=new RegExp("(^|\\s)"+n+"no-js(\\s|$)");t=t.replace(a,"$1"+n+"js$2")}Modernizr._config.enableClasses&&(t+=" "+n+e.join(" "+n),f?u.className.baseVal=t:u.className=t)}function o(){return"function"!=typeof t.createElement?t.createElement(arguments[0]):f?t.createElementNS.call(t,"http://www.w3.org/2000/svg",arguments[0]):t.createElement.apply(t,arguments)}var l=[],r=[],c={_version:"3.2.0",_config:{classPrefix:"",enableClasses:!0,enableJSClass:!0,usePrefixes:!0},_q:[],on:function(e,t){var n=this;setTimeout(function(){t(n[e])},0)},addTest:function(e,t,n){r.push({name:e,fn:t,options:n})},addAsyncTest:function(e){r.push({name:null,fn:e})}},Modernizr=function(){};Modernizr.prototype=c,Modernizr=new Modernizr;var u=t.documentElement,f="svg"===u.nodeName.toLowerCase(),p=o("input"),d="search tel url email datetime date month week time datetime-local number range color".split(" "),m={};Modernizr.inputtypes=function(e){for(var a,s,i,o=e.length,l=":)",r=0;o>r;r++)p.setAttribute("type",a=e[r]),i="text"!==p.type&&"style"in p,i&&(p.value=l,p.style.cssText="position:absolute;visibility:hidden;",/^range$/.test(a)&&p.style.WebkitAppearance!==n?(u.appendChild(p),s=t.defaultView,i=s.getComputedStyle&&"textfield"!==s.getComputedStyle(p,null).WebkitAppearance&&0!==p.offsetHeight,u.removeChild(p)):/^(search|tel)$/.test(a)||(i=/^(url|email|number)$/.test(a)?p.checkValidity&&p.checkValidity()===!1:p.value!=l)),m[e[r]]=!!i;return m}(d),s(),i(l),delete c.addTest,delete c.addAsyncTest;for(var h=0;h<Modernizr._q.length;h++)Modernizr._q[h]();e.Modernizr=Modernizr}(window,document);

<input type="date">

<script>

  // Get new Date object and break down
  var today = new Date();
  var dd = today.getDate();
  var mm = today.getMonth()+1; //January is 0!
  var yyyy = today.getFullYear();

  // Ensure there is a prefixed 0 on dates less than 10
  if(dd<10){
    dd='0'+dd
  }

  // Ensure there is a prexifed 0 on months less than 10
  if(mm<10){
    mm='0'+mm
  }

  // Modernizr checks if Input Type Date is supported
  if (Modernizr.inputtypes.date) {

    // Create formatted date output
    var today = yyyy+'-'+mm+'-'+dd;

    // Set value of all Inputs of type Date
    $('input[type=date]').val(today);

  } else {

    // Initiate jQuery DatePicker to all Input Type of Date
    $('input[type=date]').datepicker({
        format: "dd/mm/yyyy"
    });

    // Create formatted date output
    var today = dd+'/'+mm+'/'+yyyy;

    // Set value of all Inputs of type Date
    $('input[type=date]').val(today);

  }

</script>

---

更新（2015 年 11 月 13 日）

上面的代码已经过编辑，一些浏览器的原生日期功能需要将日期值格式化为国际格式（yyyy-MM-dd），尽管它会根据浏览器的语言环境采用这个值和格式，但必须设置它在值字段中采用国际格式。

然而，当浏览器不提供日期输入的本机功能时，这会带来一个问题，因为日期不会根据浏览器的区域设置进行格式化，因此它会以国际格式显示。

我编写的脚本为此提供了部分解决方案，因为就我的目的而言，我正在编写的 Web 应用程序只会在英国使用，因此如果浏览器提供本地日期输入功能，则该值将设置为国际格式，但是如果它不支持本地日期输入，则该值将被格式化为英国格式 (dd-mm-yyyy)。我相信扩展此解决方案以允许根据不同的语言环境进行国际格式化会非常简单。