added support for ng-change

.gitignore

@@ -1,4 +1,3 @@
-# Created by .ignore support plugin (hsz.mobi)
-bower_components
 node_modules
-.idea
+*.log
+

README.md

@@ -5,15 +5,14 @@ Originally designed for Bootstrap Material, this has been modified to work with
 - Double click to select date or time
 - Swipe left to go to next month or Swipe right to go to previous month.
 
-
-
 ## Updates
 
 ** I have kept this section of the document as an acknowledgement for all the work done on the original Bootstrap Material plugin **
 
 | Date				| Author			| Description											 |
-| ----------------- | ----------------- | ----------- |
-| 2015-11-12		| logbon72		    | Adapted plugin for Angular Material |
+| ----------------- | ----------------- | ------------------------------------------------------ |
+| 2017-01-30		| hexadecy			| Add support only for angular 1.5.x - 1.6.x ($onInit)	 |
+| 2015-11-12		| logbon72			| Adapted plugin for Angular Material 					 |
 | 2015-10-19		| benletchford		| Fixed not being able to tab into input				 |
 | 2015-10-19		| drblue 			| Fixed erroneous package.json-file 					 |
 | 2015-10-19		| Perdona			| Fix auto resize when month has 6 weeks				 |
@@ -27,30 +26,28 @@ Originally designed for Bootstrap Material, this has been modified to work with
 | 2015-04-10		| Peterzen			| Added bower and requirejs support						 |
 | 2015-04-08		| T00rk				| Fixed problem on locale switch						 |
 | 2015-03-04		| T00rk				| Added Time picker										 |
-(\*) File names have been changed 
-
-bootstrap-material-datepicker.js => bootstrap-material-date**time**picker.js
 
-bootstrap-material-datepicker.css => bootstrap-material-date**time**picker.css
-
 ### Dependencies
 
 Depends on the following library:
 
-- Angular Material & it's dependencies
-- Angular Touch
-- MomentJS
+- AngularJS Material
+- AngularJS Animate
+- AngularJS Aria
+- AngularJS
+- Moment
 
-## Installing via Bower
+## Installing via yarn or npm
 
 ```
-bower install angular-material-datetimepicker
+yarn add ng-material-datetimepicker
+npm i ng-material-datetimepicker
 ```
 
 
 ## Live Example
 
-Click [here](http://logbon72.github.io/angular-material-datetimepicker) to see live examples.
+Click [here](https://beenote.github.io/angular-material-datetimepicker/) to see live examples.
 
 ## Usage
 
@@ -70,9 +67,11 @@ This plugin exposes a directive which should be used as an attribute for an inpu
     <md-input-container flex-gt-md="30">
         <label>Timepicker Only</label>
         <input mdc-datetime-picker date="false" time="true" type="text" id="time" short-time="true"
+               show-todays-date
                placeholder="Time"
                min-date="minDate"
                format="hh:mm a"
+               ng-change="vm.saveChange()"
                ng-model="time">
     </md-input-container>
 ```
@@ -84,12 +83,14 @@ The directive accepts several attributes which are described below:
 
 | Name				| Type							| Description									|
 | ----------------- | ----------------------------- | --------------------------------------------- |
-| **ng-model**	    | (String\|Date\|Moment)		| Initial Date or model to assign the date to|
+| **ng-model**	    | (String\|Date\|Moment)		| Initial Date or model to assign the date to 	|
 | **format**		| String						| [MomentJS Format](momentjs.com/docs/#/parsing/string-format/),defaults to `HH:mm` for time picker only, `YYYY-MM-DD` for date picker only and `YYYY-MM-DD HH:mm` for both timepicker and date picker |
 | **short-time**	| Boolean						| true => Display 12 hours AM\|PM 				|
 | **min-date**		| (String\|Date\|Moment)		| Minimum selectable date						|
 | **max-date**		| (String\|Date\|Moment)		| Maximum selectable date						|
 | **date**			| Boolean						| true => Has Datepicker (default: true)        |
 | **time**			| Boolean						| true => Has Timepicker (default: true)		|
 | **cancel-text**	| String						| Text for the cancel button (default: Cancel)	|
-| **ok-text**		| String						| Text for the OK button (default: OK)			|
+| **today-text**	| String						| Text for the today button (default: Today)	|
+| **ok-text** 		| String						| Text for the OK button (default: OK)			|
+| **week-start**	| Number						| First day of the week (default: 0 => Sunday)	|

bower.json

@@ -28,7 +28,7 @@
     "test-infra"
   ],
   "dependencies": {
-    "momentjs": "~2.10.2",
-    "angular-material": "~1.0.6"
+    "moment": "^2.14.1",
+    "angular-material": "^1.1.0"
   }
 }

css/material-datetimepicker.css

@@ -4,6 +4,7 @@ md-dialog.dtp {
     color: #333;
     background-color: #fff;
     max-height: none;
+    min-width: 300px;
 }
 
 
@@ -95,6 +96,9 @@ md-dialog.dtp {
 .dtp div.dtp-picker {
     padding: 10px;
     text-align: center;
+
+    /* Prevent dialog resizing when switcing between date/time */
+    overflow: hidden;
 }
 
 .dtp div.dtp-picker-month, .dtp div.dtp-actual-time {
@@ -140,11 +144,16 @@ md-dialog.dtp {
 .dtp table.dtp-picker-days tr > td > span.dtp-select-day {
     color: #BDBDBD !important;
 }
-.dtp table.dtp-picker-days tr > td > .dtp-select-day {
+
+.dtp table.dtp-picker-days tr > td, .dtp table.dtp-picker-days tr > td > .dtp-select-day {
     width: 36px;
     height: 36px;
+}
+
+.dtp table.dtp-picker-days tr > td > .dtp-select-day {
     display: inline-block;
 }
+
 .dtp table.dtp-picker-days tr > td > .dtp-select-day, .dtp .dtp-picker-time > a {
     color: #212121;
     text-decoration: none;
@@ -157,6 +166,21 @@ md-dialog.dtp {
     color: #fff;
 }
 
+.dtp table.dtp-picker-days tr > td > a.selected.hilite {
+    padding: 6px;
+    font-size: 16px;
+    font-weight: 500;
+    background: #8BC34A;
+    color: #fff;
+}
+
+.dtp table.dtp-picker-days tr > td > a.hilite:not(.selected) {
+    padding: 6px;
+    font-size: 16px;
+    font-weight: 500;
+    color: #8BC34A;
+}
+
 .dtp table.dtp-picker-days tr > td > a:hover:not(.selected) {
     background: #dddddd;
 }
@@ -166,6 +190,8 @@ md-dialog.dtp {
     text-align: center;
     font-weight: 700;
     padding: 4px 3px;
+    width: 38px;
+    height: 28px;
 }
 
 .dtp .p10 > a {
@@ -282,7 +308,7 @@ md-dialog.dtp {
 }
 
 .dtp .dtp-buttons {
-    padding: 0 10px 10px 10px;
+    padding-bottom: 10px;
     text-align: right;
 }
 

gulpfile.js

@@ -0,0 +1,31 @@
+var gulp = require('gulp'),
+	pump = require('pump'),
+	uglify = require('gulp-uglify'),
+	cleanCSS = require('gulp-clean-css'),
+	sourcemaps = require('gulp-sourcemaps'),
+	rename = require('gulp-rename'),
+	runSequence = require('run-sequence');
+
+gulp.task('default', function(cb) {
+	runSequence(['js', 'css'], cb);
+});
+
+gulp.task('js', function(cb) {
+	pump([
+		gulp.src(['./js/angular-material-datetimepicker.js']),
+		sourcemaps.init(),
+		uglify(),
+		rename({extname: '.min.js'}),
+		sourcemaps.write(''),
+		gulp.dest('./dist/')
+	], cb);
+});
+
+gulp.task('css', function(cb) {
+	pump([
+		gulp.src(['./css/material-datetimepicker.css']),
+		cleanCSS(),
+		rename({extname: '.min.css'}),
+		gulp.dest('./dist/')
+	], cb);
+});

index.html

@@ -3,14 +3,10 @@
     <title>Angular-Material DateTimePicker</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />-->
-    <!--<link rel="stylesheet" href="https://rawgit.com/FezVrasta/bootstrap-material-design/master/dist/css/material.min.css" />-->
-    <link href='http://fonts.googleapis.com/css?family=Roboto:400,500' rel='stylesheet' type='text/css'>
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/styles/github.min.css" rel="stylesheet">
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.0-rc3/angular-material.min.css" rel="stylesheet" type="text/css"/>
+    <link href="http://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet" type="text/css">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/github.min.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.3/angular-material.min.css" rel="stylesheet" type="text/css"/>
     <link rel="stylesheet" href="./css/material-datetimepicker.css" type="text/css"/>
-    <!--<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>-->
-    <!--<script type="text/javascript" src="https://rawgit.com/FezVrasta/bootstrap-material-design/master/dist/js/material.min.js"></script>-->
 </head>
 <body ng-controller="DemoCtrl" layout="column">
 <md-content class="md-padding">
@@ -68,7 +64,7 @@ <h2>
                 <md-input-container flex-gt-md="30">
                     <label>Date/Time Picker</label>
                     <input mdc-datetime-picker date="true" time="true" type="text" id="datetime"
-                           placeholder="Date"
+                           placeholder="Date" show-todays-date
                            min-date="date"
                            ng-model="dateTime">
                 </md-input-container>
@@ -103,13 +99,13 @@ <h2>
     </md-card>
 </md-content>
 
-<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-animate.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-aria.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.0-rc3/angular-material.min.js"></script>
-<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment-with-locales.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-animate.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-aria.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.3/angular-material.min.js"></script>
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment-with-locales.min.js"></script>
 <script type="text/javascript"
-        src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js"></script>
+        src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
 <script type="text/javascript" src="./beautifier.js"></script>
 <script type="text/javascript" src="./js/angular-material-datetimepicker.js"></script>
 <script type="text/javascript" src="./js/demo.js"></script>