Проверка даты, ввод [даты] & Datepicker на AngularJS для Firefox

Question

У меня проблема совместимости с Firefox. У меня уже есть работающее угловое приложение для производства, но дата ввода работает только в Chrome. Я забыл об этом, и теперь у меня есть сломанное приложение, когда оно работает в Firefox и IE.

Я не хочу идти по маршруту AngularJS-Bootstrap Datepicker потому что:

1. У меня уже есть структурированное приложение, которое работает на WebKit браузерах.
2. Мое приложение представляет собой отдельный AngularJS (автономный) из моего Bootstrap-Compass под одним приложением.
3. Я не использовал Angular-Bootstrap, поскольку я не знал, что существует.
4. У меня есть только небольшая загадка, которая представляет собой вход [date], которая является простой проблемой совместимости с HTML5 с другими браузерами.
5. Так как это всего лишь небольшая проблема, я не хочу делать основной способ решения проблемы с .
6. У меня есть ограниченное время, чтобы исправить это, поэтому я должен решить его как можно скорее.

Вот что я сделал до сих пор:

1. Я попытался AngularJS-Bootstrap UI, но это зависит от версии 1.2, и я бегу AngularJS 1,3
2. директиву заставить его работать на Firefox, кажется, слишком много настроек или, по крайней мере, ему не хватает подробной информации для этого.
3. В настоящее время я пытаюсь использовать jQuery UI's datepicker, но по какой-то причине он не работает в приложении (он работает вне приложения, хотя).

Вот мой код:

<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 не удается запустить, когда он находится в приложении «Угловое», но отлично работает, когда я выхожу из него как статический элемент 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

Ваш входной идентификатор "bdate" Изменение $ ("# DatePicker «) .datepicker(); до $ ("# bdate"). datepicker();