日期验证，在 AngularJS for Firefox 中输入 [日期] 到 Datepicker

Question

我遇到了与 Firefox 的兼容性问题。我已经有一个可用于生产的 Angular 应用程序，但日期输入仅适用于 Chrome。我忽略了这一点，现在当它在 Firefox 和 IE 中运行时，我的应用程序损坏了。

我不想通过 AngularJS-Bootstrap Datepicker 路由，因为：

1. 我已经有一个在 webkit 浏览器上运行的结构化应用程序。
2. 我的应用是独立于我的 Bootstrap-Compass 的 AngularJS（独立），位于单个应用下。
3. 我没有使用 Angular-Bootstrap，因为我不知道存在。
4. 我只有一个小难题，即输入 [日期]，它是 仅仅是 HTML5 与其他浏览器的兼容性问题。
5. 既然是小事，不想做专业 解决方法。
6. 我只有有限的时间来解决这个问题，所以我必须尽快解决它。

这是我到目前为止所做的：

1. 我尝试了 AngularJS-Bootstrap UI，但它取决于版本 1.2， 我正在运行 AngularJS 1.3
2. 让它在 Firefox 上运行的指令似乎做了太多的调整，或者至少它缺乏这样做的详细信息。
3. 我目前正在尝试使用 jQuery UI 的日期选择器，但由于某种原因，它不能在应用程序内工作（但它在应用程序外工作）。

这是我的代码：

<input type="text" id="bdate" name="bdate" ng-class="{'has-error': $submitted && signup.bdate.$invalid}" ng-model="formData.bdate" required class="form-control" placeholder="Birthday mm/dd/yyyy">

它有这样的验证：

<li ng-show="signup.bdate.$error.date"><p>Please enter a valid birth date.</p></li>

这是我的 app.js：

var spinnrApp = angular.module('spinnrApp', ['ngAnimate', 'ui.router', 'slick', 'ngMessages']);

spinnrApp.config(function ($stateProvider, $urlRouterProvider) {
  //
  // Now set up the states
  $stateProvider
    .state('registration', {
      url: "/registration",
      templateUrl: "app/components/registration/registration.php",
      controller: "FormController"
    })
    .state('registration.spinnrapp', { // nested state for the registration form
      url: "/spinnrapp", // url will be nested /registration/artist
      templateUrl: "app/components/registration/partials/registration-profile.php"
    })
    .state('registration.artist', { // nested state for the registration form
      url: "/artist", // url will be nested /registration/artist
      templateUrl: "app/components/registration/partials/registration-artist.php"
    })
    .state('registration.share', { // each nested state will have their own view
      url: "/share", // url will be nested /registration/share
      templateUrl: "app/components/registration/partials/registration-share.php"
    });
    //
    // For any unmatched url, redirect to /
    $urlRouterProvider.otherwise("/registration/spinnrapp");
});

spinnrApp.controller('FormController', ['$scope', '$http', '$state', function (scope, http, state){

  // get list of cities and store it to select
  http.get('cities.json').success(function(data){
    scope.cities = data;
  })

  // we will store all our form data in this object
  scope.formData = {};

  // function to process the form
  scope.processForm = function(isValid) {
    scope.$submitted = true;
    if(isValid && state.$current=='registration.spinnrapp') {
      state.go('registration.artist');
    } else if(isValid && state.$current=='registration.artist') {
      state.go('registration.share');
    } else if(!isValid && state.$current=='registration.artist') {
      alert('Please make sure you have selected an artist.');
    }
  };
}]);

这是我的主要问题：

1. 如果我要使用指令，我该怎么做 目前的结构？
2. 为什么 jQuery 日期选择器在 Angular 应用程序中时无法运行，但在我将其作为静态 DOM 元素取出时却运行良好？
3. 我可以在这里做一个简单的方法，这样我就不必进行大量的代码调整了吗？

最后，这是我所有的脚本，以防你想知道我是如何将它们放在一起的（index.php）：

<script src="app/angular/jquery/dist/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<script src="assets/js/bootstrap.js"></script>
<script src="assets/js/bootstrap/tab.js"></script>
<script src="app/angular/angular/angular.min.js"></script>
<script src="app/angular/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="https://code.angularjs.org/1.3.0/angular-animate.min.js"></script>
<script src="https://code.angularjs.org/1.3.0/angular-resource.min.js"></script>
<script src="app/angular/angular-messages/angular-messages.min.js"></script>
<script src="app/angular/slick-carousel/slick/slick.min.js"></script>
<script src="app/angular/angular-slick/dist/slick.min.js"></script>
<script src="app/app.js"></script>
<script>
  $(document).ready(function() {
    $("#bdate").datepicker();
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
      var target = this.href.split('#');
      $('.nav a').filter('[href="#'+target[1]+'"]').tab('show');
    });
  });
</script>

Answer 1

您的输入 id 是“bdate”更改 $("#datepicker").datepicker();到 $("#bdate").datepicker();