modalmddatepicker - npm Package Compare versions

Comparing version 1.0.4 to 1.0.5

bower.json

 {
   "name": "ModalMDDatePicker",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "homepage": "https://github.com/diegoguevara/ModalMDDatePicker",
@@ -5,0 +5,0 @@ "authors": [

package.json

 {
   "name": "modalmddatepicker",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Angular Material Datepicker Component",
@@ -5,0 +5,0 @@ "main": "modal-md-datepicker.min.js",

README.md

 # ModalMDDatePicker
 Angular Material Design DatePicker Component
 
+[live demo](https://jsfiddle.net/diegoguevara/7fatr9go/)
+
 ## Installing
@@ -26,3 +28,2 @@
 var app_ = angular.module('app',[
-    'ngAnimate',
     'ngMaterial',
@@ -44,1 +45,15 @@ ...
 [live demo](https://jsfiddle.net/diegoguevara/7fatr9go/)
+
+## options
+
+**date-format:** `string` format date string Ej. 'dd MMMM yyyy'
+
+**min-date:** `Date` Min Date 
+
+**max-date:** `Date` Max Date 
+
+Example: [test/index.html](test/index.html)
+
+```html
+<modal-md-datepicker flex ng-model="user.end_date" date-format="dd MMMM yyyy" min-date="{{user.start_date}}" max-date="{{user.max_date}}" ></modal-md-datepicker>
+```

src/modal-md-datepicker.js

@@ -5,4 +5,4 @@ /*!
 * Created 2016.04
-* Updated 2016.04
-* version 1.0.4
+* Updated 2016.05
+* version 1.0.5
 */
@@ -92,8 +92,8 @@
       placeholder: '@',
-      orientation: '@'
+      orientation: '@',
+      dateFormat: '@',
+      minDate: '@',
+      maxDate: '@'
     },
-    template: '<md-input-container class="md-block"  md-no-float>\
-    <label ng-attr-for="modal-md-dp-directive-{{serial}}">{{placeholder}}</label>\
-    <input type="text" ng-attr-id="modal-md-dp-directive-{{serial}}" ng-model="SelectedDateText" ng-click="showModalDatePicker($event, SelectedDate)" />\
-    </md-input-container>',
+    template: '<input type="text" ng-attr-id="modal-md-dp-directive-{{serial}}" ng-model="SelectedDateText" ng-click="showModalDatePicker($event, SelectedDate)" />',
     link: function ($scope, $element, $attr, $ctrl) {
@@ -172,2 +172,5 @@ function formatter(value) {
         }\
+        .modal-md-dp-daybtn.disabled {\
+          color: #eee !important;\
+        }\
         .modal-md-dp-daybtn {\
@@ -229,3 +232,7 @@ float: left ;\
         if (newValue != null) {
-          $scope.SelectedDateText = $filter('date')(newValue, 'M/d/yyyy');
+          //$scope.SelectedDateText = $filter('date')(newValue, 'M/d/yyyy');
+          if( !$attr.dateFormat ){
+            $attr.dateFormat = 'M/d/yyyy';
+          }
+          $scope.SelectedDateText = $filter('date')(newValue, $attr.dateFormat);
         } else {
@@ -245,17 +252,5 @@ $scope.SelectedDateText = null;
           $scope.serial = serial;
-          $scope.currentOrientation = 'portrait';
-          $scope.originalOrientation = 'portrait';
-          $scope.orientation = 'portrait';
-
-          $scope.$watch(function () {
-            return $mdMedia('(max-width: 655px)');
-          }, function (isSmall) {
-            if (isSmall) {
-              // In small profile, will be portrait no matter what was originally specified
-              $scope.currentOrientation = 'portrait';
-            } else {
-              $scope.currentOrientation = $scope.originalOrientation;
-            }
-          });
-
+          $scope.minDate = $attr.minDate;
+          $scope.maxDate = $attr.maxDate;
+          
           $scope.NowClick = function ($event) {
@@ -285,3 +280,3 @@ $event.preventDefault();
       <div class="popupDialogContent" style="overflow:hidden">\
-      <modal-md-datepicker-calendar ng-model="DialogSelectedDate" submitclick="SaveClick" cancelclick="CancelClick"></modal-md-datepicker-calendar>\
+      <modal-md-datepicker-calendar ng-model="DialogSelectedDate" submitclick="SaveClick" cancelclick="CancelClick" min-date="{{minDate}}" max-date="{{maxDate}}"></modal-md-datepicker-calendar>\
       </div>\
@@ -318,3 +313,5 @@ </md-dialog>',
       submitclick: '&',
-      cancelclick: '&'
+      cancelclick: '&',
+      minDate : '@',
+      maxDate : '@'
     },
@@ -328,3 +325,11 @@ link: function ($scope, $element, $attr, $ctrl) {
         var ldaynum = new Date($scope.selYear, $scope.selMonth + 1, 0).getDate();
-
+        //console.log( tempday.getTime()  ) ;
+        
+        // $attr.minDate = $attr.minDate.replace(/['"]+/g, '')
+        // console.log( $attr.minDate );
+        // var ttaa = Date.parse($attr.minDate);
+        // console.log( ttaa )
+        // console.log('aa')
+        // console.log($attr.minDate)
+        
         $scope.selFirstDayOfMonth = fday;
@@ -338,2 +343,4 @@ $scope.selLastDateOfMonth = ldaynum;
         btn.addClass('selected');
+        btn.addClass('disabled');
+        
 
@@ -369,3 +376,3 @@ if ($scope.selButton != null && $scope.selButton[0] != btn[0]) {
 
-      if ($scope.orientation == null) $scope.orientation = 'portrait';
+      //if ($scope.orientation == null) $scope.orientation = 'portrait';
 
@@ -401,2 +408,27 @@ $scope.Months = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'];
       };
+      
+      $scope.dayIsDisabled = function( day ){
+        
+        var sdate = new Date($scope.selYear, $scope.selMonth, day);
+        
+        
+        if( $attr.minDate ){
+          $attr.minDate = $attr.minDate.replace(/['"]+/g, '')
+          var min_date = new Date($attr.minDate);          
+          if( sdate < min_date ){
+            return true;
+          }
+        }
+        
+        
+        if( $attr.maxDate ){
+          $attr.maxDate = $attr.maxDate.replace(/['"]+/g, '')
+          var max_date = new Date($attr.maxDate);
+          if( sdate > max_date ){
+            return true;
+          }
+        }
+        
+        return false
+      }
 
@@ -445,5 +477,5 @@ $scope.NowClick = function ($event) {
 
-      $scope.currentOrientation = ($mdMedia('(max-width: 655px)') ? 'portrait' : $scope.orientation);
-      $scope.firstLead = ($scope.currentOrientation == 'landscape' ? 2.9 : 2.75);
-      $scope.firstEdge = ($scope.currentOrientation == 'landscape' ? 0.45 : 0.1);
+      // $scope.currentOrientation = ($mdMedia('(max-width: 655px)') ? 'portrait' : $scope.orientation);
+      // $scope.firstLead = ($scope.currentOrientation == 'landscape' ? 2.9 : 2.75);
+      // $scope.firstEdge = ($scope.currentOrientation == 'landscape' ? 0.45 : 0.1);
 
@@ -453,8 +485,7 @@ $scope.$watch(function () {
       }, function (isSmall) {
-        if (isSmall) {
-          // In small profile, will be portrait no matter what was originally specified
-          $scope.currentOrientation = 'portrait';
-        } else {
-          $scope.currentOrientation = $scope.orientation;
-        }
+        // if (isSmall) {
+        //   $scope.currentOrientation = 'portrait';
+        // } else {
+        //   $scope.currentOrientation = $scope.orientation;
+        // }
         $scope.firstLead = ($scope.currentOrientation == 'landscape' ? 2.9 : 2.75);
@@ -466,2 +497,3 @@ $scope.firstEdge = ($scope.currentOrientation == 'landscape' ? 0.45 : 0.1);
         $event.preventDefault();
+        
 
@@ -475,3 +507,14 @@ var newm = $scope.selMonth - 1;
         }
-
+        
+        if( $attr.minDate ){
+          $attr.minDate = $attr.minDate.replace(/['"]+/g, '')
+          var min_date = new Date($attr.minDate);
+          
+          min_date = new Date(min_date.getFullYear(), min_date.getMonth(), 1)
+          var nuewd = new Date( newy, newm );
+          if( nuewd < min_date ){
+            return false;
+          }
+        }
+        
         $scope.selMonth = newm;
@@ -493,3 +536,13 @@ $scope.selYear = newy;
         }
-
+        if( $attr.maxDate ){
+          $attr.maxDate = $attr.maxDate.replace(/['"]+/g, '')
+          var max_date = new Date($attr.maxDate);
+          
+          max_date = new Date(max_date.getFullYear(), max_date.getMonth(), 1)
+          var nuewd = new Date( newy, newm );
+          if( nuewd > max_date ){
+            return false;
+          }
+        }
+        
         $scope.selMonth = newm;
@@ -540,33 +593,33 @@ $scope.selYear = newy;
         <div class="monthpanel">\
-        <md-button class="modal-md-dp-daybtn firstday" ng-click="DayClick($event,1)" ng-style="{\'margin-left\': (selFirstDayOfMonth * firstLead + firstEdge) + \'rem\'}" Day="1">1</md-button>\
-        <md-button class="modal-md-dp-daybtn" ng-click="DayClick($event,2)" Day="2">2</md-button>\
-        <md-button class="modal-md-dp-daybtn" ng-click="DayClick($event,3)" Day="3">3</md-button>\
-        <md-button class="modal-md-dp-daybtn" ng-click="DayClick($event,4)" Day="4">4</md-button>\
-        <md-button class="modal-md-dp-daybtn" ng-click="DayClick($event,5)" Day="5">5</md-button>\
-        <md-button class="modal-md-dp-daybtn" ng-click="DayClick($event,6)" Day="6">6</md-button>\
-        <md-button class="modal-md-dp-daybtn" ng-click="DayClick($event,7)" Day="7">7</md-button>\
-        <md-button class="modal-md-dp-daybtn" ng-click="DayClick($event,8)" Day="8">8</md-button>\
-        <md-button class="modal-md-dp-daybtn" ng-click="DayClick($event,9)" Day="9">9</md-button>\
-        <md-button class="modal-md-dp-daybtn" ng-click="DayClick($event,10)" Day="10">10</md-button>\
-        <md-button class="modal-md-dp-daybtn" ng-click="DayClick($event,11)" Day="11">11</md-button>\
-        <md-button class="modal-md-dp-daybtn" ng-click="DayClick($event,12)" Day="12">12</md-button>\
-        <md-button class="modal-md-dp-daybtn" ng-click="DayClick($event,13)" Day="13">13</md-button>\
-        <md-button class="modal-md-dp-daybtn" ng-click="DayClick($event,14)" Day="14">14</md-button>\
-        <md-button class="modal-md-dp-daybtn" ng-click="DayClick($event,15)" Day="15">15</md-button>\
-        <md-button class="modal-md-dp-daybtn" ng-click="DayClick($event,16)" Day="16">16</md-button>\
-        <md-button class="modal-md-dp-daybtn" ng-click="DayClick($event,17)" Day="17">17</md-button>\
-        <md-button class="modal-md-dp-daybtn" ng-click="DayClick($event,18)" Day="18">18</md-button>\
-        <md-button class="modal-md-dp-daybtn" ng-click="DayClick($event,19)" Day="19">19</md-button>\
-        <md-button class="modal-md-dp-daybtn" ng-click="DayClick($event,20)" Day="20">20</md-button>\
-        <md-button class="modal-md-dp-daybtn" ng-click="DayClick($event,21)" Day="21">21</md-button>\
-        <md-button class="modal-md-dp-daybtn" ng-click="DayClick($event,22)" Day="22">22</md-button>\
-        <md-button class="modal-md-dp-daybtn" ng-click="DayClick($event,23)" Day="23">23</md-button>\
-        <md-button class="modal-md-dp-daybtn" ng-click="DayClick($event,24)" Day="24">24</md-button>\
-        <md-button class="modal-md-dp-daybtn" ng-click="DayClick($event,25)" Day="25">25</md-button>\
-        <md-button class="modal-md-dp-daybtn" ng-click="DayClick($event,26)" Day="26">26</md-button>\
-        <md-button class="modal-md-dp-daybtn" ng-click="DayClick($event,27)" Day="27">27</md-button>\
-        <md-button class="modal-md-dp-daybtn" ng-click="DayClick($event,28)" Day="28">28</md-button>\
-        <md-button class="modal-md-dp-daybtn" ng-click="DayClick($event,29)" ng-show="selLastDateOfMonth >= 29" Day="29">29</md-button>\
-        <md-button class="modal-md-dp-daybtn" ng-click="DayClick($event,30)" ng-show="selLastDateOfMonth >= 30" Day="30">30</md-button>\
-        <md-button class="modal-md-dp-daybtn" ng-click="DayClick($event,31)" ng-show="selLastDateOfMonth >= 31" Day="31">31</md-button>\
+        <md-button class="modal-md-dp-daybtn firstday" ng-click="DayClick($event,1)" ng-style="{\'margin-left\': (selFirstDayOfMonth * firstLead + firstEdge) + \'rem\'}" Day="1" ng-disabled="dayIsDisabled(1)">1</md-button>\
+        <md-button class="modal-md-dp-daybtn" ng-click="DayClick($event,2)" Day="2" ng-disabled="dayIsDisabled(2)">2</md-button>\
+        <md-button class="modal-md-dp-daybtn" ng-click="DayClick($event,3)" Day="3" ng-disabled="dayIsDisabled(3)">3</md-button>\
+        <md-button class="modal-md-dp-daybtn" ng-click="DayClick($event,4)" Day="4" ng-disabled="dayIsDisabled(4)">4</md-button>\
+        <md-button class="modal-md-dp-daybtn" ng-click="DayClick($event,5)" Day="5" ng-disabled="dayIsDisabled(5)">5</md-button>\
+        <md-button class="modal-md-dp-daybtn" ng-click="DayClick($event,6)" Day="6" ng-disabled="dayIsDisabled(6)">6</md-button>\
+        <md-button class="modal-md-dp-daybtn" ng-click="DayClick($event,7)" Day="7" ng-disabled="dayIsDisabled(7)">7</md-button>\
+        <md-button class="modal-md-dp-daybtn" ng-click="DayClick($event,8)" Day="8" ng-disabled="dayIsDisabled(8)">8</md-button>\
+        <md-button class="modal-md-dp-daybtn" ng-click="DayClick($event,9)" Day="9" ng-disabled="dayIsDisabled(9)">9</md-button>\
+        <md-button class="modal-md-dp-daybtn" ng-click="DayClick($event,10)" Day="10" ng-disabled="dayIsDisabled(10)">10</md-button>\
+        <md-button class="modal-md-dp-daybtn" ng-click="DayClick($event,11)" Day="11" ng-disabled="dayIsDisabled(11)">11</md-button>\
+        <md-button class="modal-md-dp-daybtn" ng-click="DayClick($event,12)" Day="12" ng-disabled="dayIsDisabled(12)">12</md-button>\
+        <md-button class="modal-md-dp-daybtn" ng-click="DayClick($event,13)" Day="13" ng-disabled="dayIsDisabled(13)">13</md-button>\
+        <md-button class="modal-md-dp-daybtn" ng-click="DayClick($event,14)" Day="14" ng-disabled="dayIsDisabled(14)">14</md-button>\
+        <md-button class="modal-md-dp-daybtn" ng-click="DayClick($event,15)" Day="15" ng-disabled="dayIsDisabled(15)">15</md-button>\
+        <md-button class="modal-md-dp-daybtn" ng-click="DayClick($event,16)" Day="16" ng-disabled="dayIsDisabled(16)">16</md-button>\
+        <md-button class="modal-md-dp-daybtn" ng-click="DayClick($event,17)" Day="17" ng-disabled="dayIsDisabled(17)">17</md-button>\
+        <md-button class="modal-md-dp-daybtn" ng-click="DayClick($event,18)" Day="18" ng-disabled="dayIsDisabled(18)">18</md-button>\
+        <md-button class="modal-md-dp-daybtn" ng-click="DayClick($event,19)" Day="19" ng-disabled="dayIsDisabled(19)">19</md-button>\
+        <md-button class="modal-md-dp-daybtn" ng-click="DayClick($event,20)" Day="20" ng-disabled="dayIsDisabled(20)">20</md-button>\
+        <md-button class="modal-md-dp-daybtn" ng-click="DayClick($event,21)" Day="21" ng-disabled="dayIsDisabled(21)">21</md-button>\
+        <md-button class="modal-md-dp-daybtn" ng-click="DayClick($event,22)" Day="22" ng-disabled="dayIsDisabled(22)">22</md-button>\
+        <md-button class="modal-md-dp-daybtn" ng-click="DayClick($event,23)" Day="23" ng-disabled="dayIsDisabled(23)">23</md-button>\
+        <md-button class="modal-md-dp-daybtn" ng-click="DayClick($event,24)" Day="24" ng-disabled="dayIsDisabled(24)">24</md-button>\
+        <md-button class="modal-md-dp-daybtn" ng-click="DayClick($event,25)" Day="25" ng-disabled="dayIsDisabled(25)">25</md-button>\
+        <md-button class="modal-md-dp-daybtn" ng-click="DayClick($event,26)" Day="26" ng-disabled="dayIsDisabled(26)">26</md-button>\
+        <md-button class="modal-md-dp-daybtn" ng-click="DayClick($event,27)" Day="27" ng-disabled="dayIsDisabled(27)">27</md-button>\
+        <md-button class="modal-md-dp-daybtn" ng-click="DayClick($event,28)" Day="28" ng-disabled="dayIsDisabled(28)">28</md-button>\
+        <md-button class="modal-md-dp-daybtn" ng-click="DayClick($event,29)" ng-show="selLastDateOfMonth >= 29" Day="29" ng-disabled="dayIsDisabled(29)">29</md-button>\
+        <md-button class="modal-md-dp-daybtn" ng-click="DayClick($event,30)" ng-show="selLastDateOfMonth >= 30" Day="30" ng-disabled="dayIsDisabled(30)">30</md-button>\
+        <md-button class="modal-md-dp-daybtn" ng-click="DayClick($event,31)" ng-show="selLastDateOfMonth >= 31" Day="31" ng-disabled="dayIsDisabled(31)">31</md-button>\
         </div>\
@@ -573,0 +626,0 @@ </div>\

No alert changes

Improved metrics

Total package byte prevSize

48442

increased by7.73%

Lines of code

582

increased by7.58%

Number of lines in readme file

58

increased by34.88%

No dependency changes