#33 add example and readme

Author: hexadecy

README.md

@@ -206,13 +206,16 @@ The `mdcDateTimeDialog.show` accepts almost the same options as the directive.
        pmText: {string} ='PM',
        disableDates: {date[]} =[],
        weekDays: {boolean} =false,
-       disableParentScroll: {boolean} = false,
+       disableParentScroll: {boolean} =false,
        autoOk: {boolean} =false,
        editInput: {boolean} =false,
        clickOutsideToClose: {boolean} =false,
        minuteSteps: {int} =5,
        howIcon: {boolean} =false,
        templateUrl: {string} =''
+       targetEvent: {DOMClickEvent}=null,
+       openFrom: {string|Element|object}=null,
+       closeTo: {string|Element|object}=null
      }
 ```
 

index.html

@@ -245,7 +245,7 @@ <h2>Datetime Pickers</h2>
       <div layout-gt-md="row" layout="column" layout-align-gt-md="center center">
         <div flex-gt-md="30">
           <p>mdcDateTimeDialog Service</p>
-          <md-button class="md-raised md-primary" ng-click="displayDialog()">
+          <md-button id="pickerbutton" class="md-raised md-primary" ng-click="displayDialog($event)">
             Display Picker
           </md-button>
           <p ng-if="selectedDateTime">Date: {{selectedDateTime|date:'medium'}}</p>

js/angular-material-datetimepicker.js

@@ -263,6 +263,7 @@
                 controllerAs: 'picker',
                 locals: {options: options},
                 openFrom: element,
+                closeTo: element,
                 parent: angular.element(document.body),
                 bindToController: true,
                 clickOutsideToClose: options.clickOutsideToClose || false,

js/demo.js

@@ -90,13 +90,16 @@
 
       $scope.langs = [{'value': 'en', 'label': 'English'},{'value': 'fr', 'label': 'Français'}];
 
-      $scope.displayDialog = function () {
+      $scope.displayDialog = function(event) {
         mdcDateTimeDialog.show({
           currentDate: moment().startOf('day'),
           maxDate: $scope.maxDate,
           showTodaysDate: '',
           time: true,
-          clickOutsideToClose: true
+          clickOutsideToClose: true,
+          targetEvent: event,
+          openFrom: angular.element(document.querySelector('#pickerbutton')),
+          closeTo: angular.element(document.querySelector('#pickerbutton'))
         })
           .then(function (date) {
             $scope.selectedDateTime = date;