Question

我想使用Angular UI的Bootstrap DatePicker，但对于支持日期输入类型的设备（例如iOS），我想使用本机日期选择器。

我该怎么做？

Answer 1

我只是plunked a directive通过将ng-transclude与ng-if打包在一起来实现此目的。

<强> HTML

<div my-if-browser-feature="inputtypes.date">
  <input type="date">
</div>
<div my-if-browser-feature="!inputtypes.date">
  <div class="alert alert-danger">
    Your browser sucks
  </div>
</div>

<强>脚本

myApp.directive('myIfBrowserFeature', function() {

  return {
    template: '<div ng-if="hasFeatures"><div ng-transclude></div></div>', 
    transclude: true,
    scope: true,
    link: function($scope, $element, $attrs) {

      $scope.hasFeatures = true;

      var features = ($attrs.myIfBrowserFeature || "").split(' ');

      var fl = features.length;

      while(fl && $scope.hasFeatures) {
        var f = features[--fl];

        if(f.length === 0) { continue; }

        var cmp = f.charAt(0) === '!' ? false : true;

        if(cmp === false) { f = f.substr(1); }

        var p = Modernizr;
        var q = f.split('.');

        while(q.length && p !== undefined) {
          p = p[q.shift()];
        }

        $scope.hasFeatures = (!p) == (!cmp);
      }
    }
  };
});

Answer 2

您可以使用Modernizr之类的内容检测浏览器是否支持日期输入。此页面有一个示例http://diveintohtml5.info/detect.html

使用此条件，您可以显示不同的html组件

仅当浏览器本身不支持日期输入时，如何使用Angular UI Bootstrap DatePicker？

2 个答案: