feat(template): Add ability for developers to override the template

Template is no longer included in directive. There is a seperate file and also a javascript class to
load the template into .  Also did a rather significant refactoring of the code.

BREAKING CHANGE: must include datetimepicker.template.js in the page to load the template.

Author: dalelotts

.jscsrc

@@ -2,6 +2,7 @@
   "disallowDanglingUnderscores": { "allExcept": ["_$compile_", "_$rootScope_"] },
   "disallowMultipleVarDecl": "strict",
   "preset": "crockford",
+  "requireFunctionDeclarations": true,
   "requireMultipleVarDecl": null,
   "requireVarDeclFirst": null,
   "validateIndentation": 2

.jshintrc

@@ -13,7 +13,7 @@
   "forin"         : true,     // true: Require filtering for..in loops with obj.hasOwnProperty()
   "immed"         : true,    // true: Require immediate invocations to be wrapped in parens e.g. `(function () { } ());`
   "indent"        : 2,        // {int} Number of spaces to use for indentation
-  "latedef"       : true,    // true: Require variables/functions to be defined before being used
+  "latedef"       : "nofunc",    // true: Require variables/functions to be defined before being used
   "newcap"        : true,    // true: Require capitalization of all constructor functions e.g. `new F()`
   "noarg"         : true,     // true: Prohibit use of `arguments.caller` and `arguments.callee`
   "noempty"       : true,     // true: Prohibit use of empty blocks

.travis.yml

@@ -1,19 +1,23 @@
-language: node_js
 sudo: false
+language: node_js
+cache:
+  directories:
+    - node_modules
+notifications:
+  email: false
 node_js:
-- '4.1'
+  - '5'
+before_install:
+  - export DISPLAY=:99.0
+  - sh -e /etc/init.d/xvfb start
+  - npm i -g npm@^3.0.0
+before_script:
+  - npm prune
+script:
+  - npm run test
+after_success:
+  - npm run semantic-release
 branches:
   except:
-  - gh-pages
-before_install:
-- export DISPLAY=:99.0
-- sh -e /etc/init.d/xvfb start
-deploy:
-  provider: npm
-  email: [email protected]
-  api_key:
-    secure: uS3oRid+vZK5nKVqd5YNhAJGyNbJAdw0/3gHZB67ynG9HWEr1Y026uzf0Ext6XT9LHjCgGPEaN1Lyjr+LJRYt+LV7HYDVm09RrEIqJm+2+2qwQIpVtxRyr6xCr1b2EFFrYqwZPe33/Y0WradbaqQ0EKLBSygCNL8tzC7b1yxD6U=
-  on:
-    tags: true
-    repo: dalelotts/angular-bootstrap-datetimepicker
-    branch: master
+    - "/^v\\d+\\.\\d+\\.\\d+$/"
+    - gh-pages

README.md

@@ -15,16 +15,33 @@ Native AngularJS datetime picker directive styled by Twitter Bootstrap 3
 
 [Home / demo page](http://dalelotts.github.io/angular-bootstrap-datetimepicker/)
 
+## Upgrading from 0.4.0 or earlier
 
-#Dependencies
+The template used by this directive has been separated from the directive to allow the developer to override
+ the template (i.e. use font-awesome styles in the template rather than glyphicons). As a result, you now 
+  need to include another javascript file in the page
+  
+```html
+<script type="text/javascript" src="node_modules/angular-bootstrap-datetimepicker/src/js/datetimepicker.templates.js"></script>
+```
+
+If you wan to override the template used by this directive, simply populate the ```$templateCache``` with your own template.
+
+# Formatting the date in an input box
+
+Use the [angular-date-time-input](https://github.com/dalelotts/angular-date-time-input) directive to format the 
+display of a date in an input box or allow users to enter a valid date with the keyboard.
+
+# Dependencies
 
 Requires:
  * AngularJS 1.4.x or higher (1.0.x will not work)
  * moment.js 2.8.3 or higher for date parsing and formatting
  * bootstrap's glyphicons for arrows (Can be overridden in css)
 
 optional:
- * bootstrap's dropdown component (`dropdowns.less`)
+ * bootstrap's dropdown component (`dropdowns.less` or `bootstrap.css` )
+ * bootstrap's javascript (`bootstrap.js` )
 
 #Testing
 This directive was written using TDD and all enhancements and changes have related tests.
@@ -58,9 +75,9 @@ Add the css:
 Load the script files in your application:
 ```html
 <script type="text/javascript" src="node_modules/moment/moment.js"></script>
-<script type="text/javascript" src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
 <script type="text/javascript" src="node_modules/angular/angular.js"></script>
 <script type="text/javascript" src="node_modules/angular-bootstrap-datetimepicker/src/js/datetimepicker.js"></script>
+<script type="text/javascript" src="node_modules/angular-bootstrap-datetimepicker/src/js/datetimepicker.templates.js"></script>
 ```
 
 Add the date module as a dependency to your application module:
@@ -77,7 +94,6 @@ Apply the directive to your form elements:
 
 ## Callback functions
 
-
 ### before-render
 Attribute on datetimepicker element
 
@@ -338,6 +354,8 @@ $scope.beforeRenderEndDate = function($view, $dates, $leftDate, $upDate, $rightD
 ```
 Then in the controller two functions must be added. Each one is related to the concerned date. They update the selectable status of each displayed date based on the range values. The time is also taken into account.
 
+## Screen reader support
+
 ## I18N / l10n support
 
 All internationalization is handled by Moment.js, see Moment's documentation for details.

contributing.md

@@ -6,12 +6,12 @@ If you are submitting a bug, please create a [jsfiddle](http://jsfiddle.net/) de
 Contributing code
 =================
 
-To contribute, fork the library and install grunt and dependencies. You need [node](http://nodejs.org/); use [nvm](https://github.com/creationix/nvm) or [nenv](https://github.com/ryuone/nenv) to install it.
+To contribute, fork the library and install gulp and dependencies. You need [node](http://nodejs.org/); use [nvm](https://github.com/creationix/nvm) or [nenv](https://github.com/ryuone/nenv) to install it.
 
 ```bash
 git clone https://github.com/dalelotts/angular-bootstrap-datetimepicker.git
 cd angular-bootstrap-datetimepicker
-npm install -g grunt-cli
+npm install -g gulp
 npm install
 git checkout develop  # all patches against develop branch, please!
 gulp                  # this runs jscs, jshint, complexity checks, and unit tests.

demo/demo-app.js

@@ -2,7 +2,8 @@
 angular.module('demo',
   [
     'demo.demoController',
-    'ui.bootstrap.datetimepicker'
+    'ui.bootstrap.datetimepicker',
+    'ui.dateTimeInput'
   ])
   .config([
     function () {

demo/demo-controller.js

@@ -16,7 +16,7 @@
     $scope.controllerName = 'demoController';
 
     /* Bindable functions
-    -----------------------------------------------*/
+     -----------------------------------------------*/
     $scope.beforeRender = beforeRender;
     $scope.changeConfig = changeConfig;
     $scope.checkboxOnTimeSet = checkboxOnTimeSet;
@@ -38,14 +38,14 @@
 
     $scope.data = {
       guardians: [
-      {
-        name: 'Peter Quill',
-        dob: null
-      },
-      {
-        name: 'Groot',
-        dob: null
-      }
+        {
+          name: 'Peter Quill',
+          dob: null
+        },
+        {
+          name: 'Groot',
+          dob: null
+        }
       ]
     };
 
@@ -88,13 +88,13 @@
       $log.info(newDate);
       $log.info(oldDate);
       angular.element('#guardian' + $index).dropdown('toggle');
-    };
+    }
 
     function beforeRender($dates) {
       var index = Math.ceil($dates.length / 2);
       $log.info(index);
       $dates[index].selectable = false;
-    };
+    }
 
     function configFunction() {
       return {startView: 'month'};

demo/index.html

@@ -13,20 +13,6 @@
     <title>Angular Bootstrap - Date Time Picker Demo</title>
     <base href="..">
 
-    <link rel="apple-touch-icon" sizes="57x57" href="/demo/favicons/apple-touch-icon-57x57.png">
-    <link rel="apple-touch-icon" sizes="60x60" href="/demo/favicons/apple-touch-icon-60x60.png">
-    <link rel="apple-touch-icon" sizes="72x72" href="/demo/favicons/apple-touch-icon-72x72.png">
-    <link rel="apple-touch-icon" sizes="76x76" href="/demo/favicons/apple-touch-icon-76x76.png">
-    <link rel="apple-touch-icon" sizes="114x114" href="/demo/favicons/apple-touch-icon-114x114.png">
-    <link rel="apple-touch-icon" sizes="120x120" href="/demo/favicons/apple-touch-icon-120x120.png">
-    <link rel="apple-touch-icon" sizes="144x144" href="/demo/favicons/apple-touch-icon-144x144.png">
-    <link rel="apple-touch-icon" sizes="152x152" href="/demo/favicons/apple-touch-icon-152x152.png">
-    <link rel="apple-touch-icon" sizes="180x180" href="/demo/favicons/apple-touch-icon-180x180.png">
-    <link rel="icon" type="image/png" href="/demo/favicons/favicon-32x32.png" sizes="32x32">
-    <link rel="icon" type="image/png" href="/demo/favicons/android-chrome-192x192.png" sizes="192x192">
-    <link rel="icon" type="image/png" href="/demo/favicons/favicon-96x96.png" sizes="96x96">
-    <link rel="icon" type="image/png" href="/demo/favicons/favicon-16x16.png" sizes="16x16">
-    <link rel="manifest" href="/demo/favicons/manifest.json">
     <meta name="msapplication-TileColor" content="#da532c">
     <meta name="msapplication-TileImage" content="/mstile-144x144.png">
     <meta name="theme-color" content="#ffffff">
@@ -42,6 +28,8 @@
     <script type="text/javascript" src="demo/demo-app.js"></script>
     <script type="text/javascript" src="demo/demo-controller.js"></script>
     <script type="text/javascript" src="src/js/datetimepicker.js"></script>
+    <script type="text/javascript" src="src/js/datetimepicker.templates.js"></script>
+    <script type="text/javascript" src="https://cdn.rawgit.com/dalelotts/angular-date-time-input/v1.0.0/src/dateTimeInput.js"></script>
     <style>
         .datetimepicker {
             width: 400px;
@@ -89,7 +77,7 @@ <h4>No formatting</h4>
         </div>
         <div class="col-sm-6">
             <h3>Drop-down Datetime with input box</h3>
-            <h4>Localized formatting <code>Not implemented yet</code></h4>
+            <h4>Localized formatting using <a href="https://github.com/dalelotts/angular-date-time-input"><code>angular-date-time-input</code></a> directive</h4>
 
             <p>Notice that you CAN enter a date with the keyboard.</p>
 
@@ -102,7 +90,7 @@ <h4>Localized formatting <code>Not implemented yet</code></h4>
                     <a class="dropdown-toggle" id="dropdown2" role="button" data-toggle="dropdown" data-target="#"
                        href="#">
                         <div class="input-group">
-                            <input type="text" class="form-control" data-ng-model="data.dateDropDownInput">
+                            <input type="text" class="form-control" data-ng-model="data.dateDropDownInput" data-date-time-input="YYYY-MM-DD HH:mm a">
                             <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                         </div>
                     </a>

gulpfile.js

@@ -11,10 +11,11 @@ var lodash = require('lodash');
 var paths = require('./paths');
 var plato = require('plato');
 var Server = require('karma').Server;
+var path = require('path');
 
 gulp.task('build-css', ['scss'], function () {
   var Comb = require('csscomb');
-  var config = require('./config/csscomb.json');
+  var config = require('./.csscomb.json');
   var comb = new Comb(config);
   comb.processPath('./src/css/');
 });
@@ -93,6 +94,21 @@ var testConfig = function (options) {
   return lodash.assign(options, travisOptions);
 };
 
+gulp.task('templatecache', function () {
+  var templateCache = require('gulp-angular-templatecache');
+  var htmlMin = require('gulp-htmlmin');
+
+  return gulp
+    .src('src/templates/**/*.html')
+    .pipe(htmlMin({removeComments: true}))
+    .pipe(templateCache('datetimepicker.templates.js', {
+      base: path.join(__dirname, 'src'),
+      module: 'ui.bootstrap.datetimepicker'
+    }))
+    .pipe(gulp.dest('src/js'));
+});
+
+
 gulp.task('tdd', function (done) {
   gulp.watch(paths.all.concat(paths.scss), ['jscs', 'lint', 'build-css']);
 
@@ -110,7 +126,7 @@ gulp.task('tdd', function (done) {
 });
 
 
-gulp.task('test', function (done) {
+gulp.task('test', ['jscs', 'lint', 'csslint'], function (done) {
 
   var config = testConfig(
     {
@@ -125,4 +141,4 @@ gulp.task('test', function (done) {
 });
 
 
-gulp.task('default', ['jscs', 'lint', 'complexity', 'csslint', 'test']);
+gulp.task('default', ['complexity', 'test']);

karma.conf.js

@@ -90,7 +90,7 @@ module.exports = function (config) {
     // - Safari (only Mac)
     // - PhantomJS
     // - IE (only Windows)
-    browsers: ['Chrome'],
+    browsers: ['PhantomJS'],
 
 
     // If browser does not capture in given timeout [ms], kill it

package.json

@@ -3,7 +3,7 @@
   "version": "0.4.0",
   "description": "This directive allows you to add a datetime-picker to your form elements.",
   "keywords": [
-    "anguar",
+    "angular",
     "calendar",
     "date picker",
     "date",
@@ -20,48 +20,49 @@
   "homepage": "http://dalelotts.github.io/angular-bootstrap-datetimepicker",
   "main": "src/js/datetimepicker.js",
   "dependencies": {
-    "angular": "^1.4.7",
-    "moment": "^2.10.6"
+    "angular": "^1.4.9",
+    "moment": "^2.11.1"
   },
   "devDependencies": {
-    "angular-mocks": "^1.4.7",
-    "autoprefixer": "^6.1.0",
-    "bootstrap": "^3.3.5",
-    "bower": "latest",
-    "commitizen": "^2.4.6",
+    "angular-mocks": "^1.4.9",
+    "autoprefixer": "^6.3.1",
+    "bootstrap": "^3.3.6",
+    "commitizen": "^2.5.0",
     "csscomb": "^3.1.8",
     "csslint": "^0.10.0",
-    "cz-conventional-changelog": "^1.1.4",
-    "del": "^2.1.0",
+    "cz-conventional-changelog": "^1.1.5",
+    "del": "^2.2.0",
     "grunt": "^0.4.4",
-    "grunt-bump": "^0.6.0",
+    "grunt-bump": "^0.7.0",
     "gulp": "^3.8.11",
+    "gulp-angular-templatecache": "^1.8.0",
     "gulp-csslint": "^0.2.0",
+    "gulp-htmlmin": "^1.3.0",
     "gulp-jscs": "^3.0.0",
-    "gulp-jshint": "^1.12.0",
+    "gulp-jshint": "^2.0.0",
     "gulp-postcss": "^6.0.1",
-    "gulp-sass": "^2.1.0",
-    "gulp-scss-lint": "^0.3.8",
+    "gulp-sass": "^2.1.1",
+    "gulp-scss-lint": "^0.3.9",
     "gulp-scss-lint-stylish": "^1.0.0",
     "gulp-sourcemaps": "^1.6.0",
-    "jasmine-core": "^2.3.4",
-    "jquery": "^2.1.4",
-    "jshint": "^2.8.0",
+    "jasmine-core": "^2.4.1",
+    "jquery": "^2.2.0",
+    "jshint": "^2.9.1",
     "jshint-stylish": "^2.1.0",
-    "karma": "^0.13.15",
-    "karma-chrome-launcher": "^0.2.0",
+    "karma": "^0.13.19",
+    "karma-chrome-launcher": "^0.2.2",
     "karma-coverage": "^0.5.0",
     "karma-firefox-launcher": "^0.1.7",
     "karma-jasmine": "^0.3.6",
     "karma-phantomjs-launcher": "^0.2.1",
     "karma-threshold-reporter": "^0.1.12",
-    "lodash": "^3.10.1",
+    "lodash": "^4.1.0",
     "matchdep": "^1.0.0",
     "phantomjs": "^1.9.18",
     "plato": "^1.5.0",
     "run-browser": "^2.0.2",
-    "semantic-release": "^4.3.5",
-    "tape": "^4.2.0"
+    "semantic-release": "^6.2.0",
+    "tape": "^4.4.0"
   },
   "scripts": {
     "test": "npm run test-browserify && gulp",