modalmddatepicker - npm Package Compare versions

Comparing version 1.0.6 to 1.0.7

bower.json

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

modal-md-datepicker.min.js

@@ -6,4 +6,4 @@ /*!
 * Updated 2016.05
-* version 1.0.5
+* version 1.0.7
 */
-var mdThemeColors=angular.module("mdThemeColors",["ngMaterial"]).config(["$provide","$mdThemingProvider",function($provide,$mdThemingProvider){var colorStore={};Object.keys($mdThemingProvider._PALETTES).forEach(function(palleteName){var pallete=$mdThemingProvider._PALETTES[palleteName],colors=[];colorStore[palleteName]=colors,Object.keys(pallete).forEach(function(colorName){/#[0-9A-Fa-f]{6}|0-9A-Fa-f]{8}\b/.exec(pallete[colorName])&&(colors[colorName]=pallete[colorName])})}),$provide.factory("mdThemeColors",[function(){var service={},getColorFactory=function(intent){return function(){var colors=$mdThemingProvider._THEMES["default"].colors[intent],name=colors.name;return colorStore[name]["default"]=colorStore[name][colors.hues["default"]],colorStore[name].hue1=colorStore[name][colors.hues["hue-1"]],colorStore[name].hue2=colorStore[name][colors.hues["hue-2"]],colorStore[name].hue3=colorStore[name][colors.hues["hue-3"]],colorStore[name]}};return Object.defineProperty(service,"primary",{get:getColorFactory("primary")}),Object.defineProperty(service,"accent",{get:getColorFactory("accent")}),Object.defineProperty(service,"warn",{get:getColorFactory("warn")}),Object.defineProperty(service,"background",{get:getColorFactory("background")}),service}])}]),ModalDatePicker=angular.module("ModalDatePicker",["ngMaterial","mdThemeColors"]);ModalDatePicker.factory("ModalDatePickerCount",function(){var instanceCount=0,_Increment=function(){instanceCount++},_GetCount=function(){return instanceCount};return{GetCount:_GetCount,Increment:_Increment}}),ModalDatePicker.directive("modalMdDatepicker",["$timeout","$filter","$mdDialog","$compile","mdThemeColors","$mdMedia","ModalDatePickerCount",function($timeout,$filter,$mdDialog,$compile,mdThemeColors,$mdMedia,ModalDatePickerCount){return{restrict:"E",replace:!1,require:"ngModel",scope:{ngModel:"=",ngDisabled:"=",placeholder:"@",orientation:"@",dateFormat:"@",minDate:"@",maxDate:"@"},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){function formatter(value){return value?value:void 0}function parser(value){return value&&angular.isDate(value)?value:void 0}if(0===ModalDatePickerCount.GetCount()){var head=angular.element(document.querySelector("HEAD")),style=angular.element("<style></style>"),styleText=".modal-md-dp-input{          border : 0 !important;          width: 4.3rem !important;          font-weight: 700 !important;          font-size: 14px !important;        }        .modal-md-dp-select-month{          position: relative !important;          cursor: pointer !important;          font-weight: 700 !important;          font-size: 14px !important;        }        .modal-md-dp-select-month select {          position: absolute !important;          top: 0px !important;          left: 0px !important;          bottom: 0px !important;          right: 0px !important;          opacity: 0 !important;          width: 100% !important;        }        .modal-md-dp-month-year-separator{          margin-left : 5px !important;        }        div.weekdayheader {          font-weight: 500 !important;          text-align: left !important;          height: 1.6rem !important;          box-sizing: border-box !important;        }        div.weekdaylabel {          height: 1.6rem !important;          float: left !important;          padding: 0 0 !important;          border-radius: 3rem !important;          font-size: 11px !important;          box-sizing: border-box !important;          text-align: center !important;          color: #a0a0a0 ;          width: 2.77rem !important;        }        .modal-md-dp-daybtn        .md-button.modal-md-dp-daybtn:hover {          background-color : {{mdThemeColors.primary['400']}} !important;          color: #fff !important;        }        .md-button.modal-md-dp-daybtn.selected {          background-color : {{mdThemeColors.primary['500']}} !important;          color: #fff !important;        }        .modal-md-dp-daybtn.today {          color: {{mdThemeColors.primary['500']}} ;        }        .modal-md-dp-daybtn.disabled {          color: #eee !important;        }        .modal-md-dp-daybtn {          float: left ;          line-height: 2rem ;          min-width: 0 ;          border-radius: 2rem ;          font-weight: 700 ;          min-height: inherit ;          overflow: visible ;          width: 2.5rem ;          height: 2.5rem ;          margin: 0 0.15rem 0 0.1rem ;          font-size: 0.75rem ;        }        .modal-md-dp-daybtn.firstday {          margin-left: 16.6rem ;        }        .modal-md-dp-modal{          max-width:320px !important;        }        div.masterdatepicker {          height: 392px;        }        div.monthpanel {          position: relative;          font-size: 1rem;          margin-top: -0.1rem;          box-sizing: border-box;          top: 7px;	        height: 16.2rem;        }        ";style.text(styleText),head.append(style),$compile(head.contents())($scope)}ModalDatePickerCount.Increment(),$ctrl.$formatters.push(formatter),$ctrl.$parsers.push(parser),$scope.SelectedDate=$scope.ngModel,$scope.serial=Math.floor(1e16*Math.random()),$scope.mdThemeColors=mdThemeColors,$scope.$watch("ngModel",function(newValue){$scope.SelectedDate=$scope.ngModel},!0),$scope.$watch("SelectedDate",function(newValue){null!=newValue?($attr.dateFormat||($attr.dateFormat="M/d/yyyy"),$scope.SelectedDateText=$filter("date")(newValue,$attr.dateFormat)):$scope.SelectedDateText=null},!0),$scope.showModalDatePicker=function($event,startval){if($event.preventDefault(),!$scope.ngDisabled){var dlgCtrl=function($scope,$mdDialog,dlgOrientation,serial){null==startval&&(startval=new Date),$scope.DialogSelectedDate=startval,$scope.originalOrientation=dlgOrientation,$scope.serial=serial,$scope.minDate=$attr.minDate,$scope.maxDate=$attr.maxDate,$scope.NowClick=function($event){$event.preventDefault(),$timeout(function(){$scope.DialogSelectedDate=new Date})},$scope.CancelClick=function($event){$event.preventDefault(),$mdDialog.cancel()},$scope.SaveClick=function($event){$event.preventDefault(),$mdDialog.hide($scope.DialogSelectedDate)}},dlgOpts={template:'<md-dialog class="modal-md-dp-modal" ng-attr-id="mddpdlg-{{serial}}">      <div class="popupDialogContent" style="overflow:hidden">      <modal-md-datepicker-calendar ng-model="DialogSelectedDate" submitclick="SaveClick" cancelclick="CancelClick" min-date="{{minDate}}" max-date="{{maxDate}}"></modal-md-datepicker-calendar>      </div>      </md-dialog>',controller:dlgCtrl,targetEvent:$event,locals:{dlgOrientation:$scope.orientation,serial:$scope.serial},onComplete:function(){document.getElementById("mddpdlg-"+$scope.serial).focus()}};$mdDialog.show(dlgOpts).then(function(answer){$scope.ngModel=answer})}}}}}]),ModalDatePicker.directive("modalMdDatepickerCalendar",["$timeout","$compile","mdThemeColors","$mdMedia",function($timeout,$compile,mdThemeColors,$mdMedia){return{restrict:"E",replace:!1,require:"ngModel",transclude:!0,scope:{ngModel:"=",orientation:"@",submitclick:"&",cancelclick:"&",minDate:"@",maxDate:"@"},link:function($scope,$element,$attr,$ctrl){$scope.serial=Math.floor(1e16*Math.random()),$scope.CalculateMonth=function(){var tempday=new Date($scope.selYear,$scope.selMonth,1),fday=tempday.getDay(),ldaynum=new Date($scope.selYear,$scope.selMonth+1,0).getDate();$scope.selFirstDayOfMonth=fday,$scope.selLastDateOfMonth=ldaynum;var selbtn=document.querySelector(".jmddp-"+$scope.serial+' [Day="'+$scope.selDay+'"]'),btn=angular.element(selbtn);btn.hasClass("md-button")||(btn=btn.parent()),btn.addClass("selected"),btn.addClass("disabled"),null!=$scope.selButton&&$scope.selButton[0]!=btn[0]&&$scope.selButton.removeClass("selected"),$scope.selButton=btn;var todaybtn=angular.element(document.querySelector(".jmddp-"+$scope.serial+' [Day="'+$scope.todaysDate+'"]'));$scope.todaysMonth==$scope.selMonth&&$scope.todaysYear==$scope.selYear?todaybtn.addClass("today"):todaybtn.removeClass("today")},$scope.mdThemeColors=mdThemeColors,$scope.Today=new Date,$scope.todaysDate=$scope.Today.getDate(),$scope.todaysMonth=$scope.Today.getMonth(),$scope.todaysYear=$scope.Today.getFullYear(),null==$scope.ngModel&&($scope.ngModel=$scope.Today),$scope.selDate=$scope.ngModel,$scope.selMonth=$scope.selDate.getMonth(),$scope.selDay=$scope.selDate.getDate(),$scope.selYear=$scope.selDate.getFullYear(),$scope.selButton=null,$scope.CalculateMonth(),$scope.Months=["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"],$scope.ShortMonths=["Ene","Feb","Mar","Abr","May","Jun","Jul","Ago","Sep","Oct","Nov","Dic"],$scope.DayClick=function($event,day){$event.preventDefault();var btn=angular.element($event.srcElement);btn.hasClass("md-button")||(btn=btn.parent()),btn.addClass("selected"),null!=$scope.selButton&&$scope.selButton.removeClass("selected"),$scope.selButton=btn,$scope.selDate=new Date($scope.selYear,$scope.selMonth,day),$scope.selYear=$scope.selDate.getFullYear(),$scope.selMonth=$scope.selDate.getMonth(),$scope.selDay=$scope.selDate.getDate(),$scope.ngModel=$scope.selDate,$timeout(function(){$scope.submitclick()($event,$scope.selDate)})},$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(min_date>sdate)return!0}if($attr.maxDate){$attr.maxDate=$attr.maxDate.replace(/['"]+/g,"");var max_date=new Date($attr.maxDate);if(sdate>max_date)return!0}return!1},$scope.NowClick=function($event){$event.preventDefault(),$scope.selDate=new Date,$scope.selYear=$scope.selDate.getFullYear(),$scope.selMonth=$scope.selDate.getMonth(),$scope.selDay=$scope.selDate.getDate(),$scope.CalculateMonth($scope.selMonth)},$scope.OKClick=function($event){$scope.submitclick()($event,$scope.selDate)},$scope.CancelClick=function($event){$scope.cancelclick()($event)},$scope.$watch("ngModel",function(newValue){null!=newValue&&($scope.selDate=newValue,$scope.selYear=$scope.selDate.getFullYear(),$scope.selMonth=$scope.selDate.getMonth(),$scope.selDay=$scope.selDate.getDate(),$timeout(function(){$scope.CalculateMonth($scope.selMonth)}))}),$scope.$watch("selMonth",function(newValue){$scope.selDate=new Date($scope.selYear,$scope.selMonth,$scope.selDay),$scope.CalculateMonth($scope.selMonth)}),$scope.$watch("selYear",function(newValue){$scope.selDate=new Date($scope.selYear,$scope.selMonth,$scope.selDay),$scope.CalculateMonth($scope.selMonth)}),$scope.$watch(function(){return $mdMedia("(max-width: 655px)")},function(isSmall){$scope.firstLead="landscape"==$scope.currentOrientation?2.9:2.75,$scope.firstEdge="landscape"==$scope.currentOrientation?.45:.1}),$scope.BackMonth=function($event){$event.preventDefault();var newm=$scope.selMonth-1,newy=$scope.selYear;if(0>newm&&(newm+=12,newy--),$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(min_date>nuewd)return!1}$scope.selMonth=newm,$scope.selYear=newy,$scope.CalculateMonth($scope.selMonth)},$scope.ForwardMonth=function($event){$event.preventDefault();var newm=$scope.selMonth+1,newy=$scope.selYear;if(newm>=12&&(newm%=12,newy++),$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!1}$scope.selMonth=newm,$scope.selYear=newy,$scope.CalculateMonth($scope.selMonth)};var _BuildCalendar=function(){var caltext='        <div layout="column" class="masterdatepicker jmddp-'+$scope.serial+'" >        <md-toolbar>        <div class="md-toolbar-tools1 md-padding" layout="column" >        <div class="md-subhead">{{selYear}}</div>        <div class="md-headline">{{selDate | date:\'EEE, MMM d\'}}</div>        </div>        </md-toolbar>        <div layout="row" layout-align="center center">        <md-button class="md-icon-button" ng-click="BackMonth($event)" aria-label="Back 1 Month"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg></md-button>        <div flex layout="row" layout-align="center center">        <div class="modal-md-dp-month-year-separator" flex="45" layout="row" layout-align="end center">        <span class="modal-md-dp-select-month">{{Months[selMonth]}}        <select ng-model="selMonth" ng-options="(idx*1) as month for (idx, month) in Months"></select>        </span>        </div>        <div flex="5"></div>        <div flex="45">        <input type="number" ng-model="selYear" class=" modal-md-dp-input" />        </div>        </div>        <md-button class="md-icon-button right" ng-click="ForwardMonth($event)" aria-label="Forward 1 Month"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg></md-button>        </div>                <div>        <div class="weekdayheader">        <div class="weekdaylabel">D</div>        <div class="weekdaylabel">L</div>        <div class="weekdaylabel">M</div>        <div class="weekdaylabel">M</div>        <div class="weekdaylabel">J</div>        <div class="weekdaylabel">V</div>        <div class="weekdaylabel">S</div>        </div>        </div>                <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" 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>        </div>        ',newbody=angular.element(caltext);$compile(newbody)($scope),$element.empty().append(newbody)};_BuildCalendar()}}}]);
+var mdThemeColors=angular.module("mdThemeColors",["ngMaterial"]).config(["$provide","$mdThemingProvider",function($provide,$mdThemingProvider){var colorStore={};Object.keys($mdThemingProvider._PALETTES).forEach(function(palleteName){var pallete=$mdThemingProvider._PALETTES[palleteName],colors=[];colorStore[palleteName]=colors,Object.keys(pallete).forEach(function(colorName){/#[0-9A-Fa-f]{6}|0-9A-Fa-f]{8}\b/.exec(pallete[colorName])&&(colors[colorName]=pallete[colorName])})}),$provide.factory("mdThemeColors",[function(){var service={},getColorFactory=function(intent){return function(){var colors=$mdThemingProvider._THEMES["default"].colors[intent],name=colors.name;return colorStore[name]["default"]=colorStore[name][colors.hues["default"]],colorStore[name].hue1=colorStore[name][colors.hues["hue-1"]],colorStore[name].hue2=colorStore[name][colors.hues["hue-2"]],colorStore[name].hue3=colorStore[name][colors.hues["hue-3"]],colorStore[name]}};return Object.defineProperty(service,"primary",{get:getColorFactory("primary")}),Object.defineProperty(service,"accent",{get:getColorFactory("accent")}),Object.defineProperty(service,"warn",{get:getColorFactory("warn")}),Object.defineProperty(service,"background",{get:getColorFactory("background")}),service}])}]),ModalDatePicker=angular.module("ModalDatePicker",["ngMaterial","mdThemeColors"]);ModalDatePicker.factory("ModalDatePickerCount",function(){var instanceCount=0,_Increment=function(){instanceCount++},_GetCount=function(){return instanceCount};return{GetCount:_GetCount,Increment:_Increment}}),ModalDatePicker.directive("modalMdDatepicker",["$timeout","$filter","$mdDialog","$compile","mdThemeColors","$mdMedia","ModalDatePickerCount",function($timeout,$filter,$mdDialog,$compile,mdThemeColors,$mdMedia,ModalDatePickerCount){return{restrict:"E",replace:!1,require:"ngModel",scope:{ngModel:"=",ngDisabled:"=",placeholder:"@",orientation:"@",dateFormat:"@",minDate:"@",maxDate:"@"},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){function formatter(value){return value?value:void 0}function parser(value){return value&&angular.isDate(value)?value:void 0}if(0===ModalDatePickerCount.GetCount()){var head=angular.element(document.querySelector("HEAD")),style=angular.element("<style></style>"),styleText=".modal-md-dp-input{          border : 0 !important;          width: 4.3rem !important;          font-weight: 700 !important;          font-size: 14px !important;        }        .modal-md-dp-select-month{          position: relative !important;          cursor: pointer !important;          font-weight: 700 !important;          font-size: 14px !important;        }        .modal-md-dp-select-month select {          position: absolute !important;          top: 0px !important;          left: 0px !important;          bottom: 0px !important;          right: 0px !important;          opacity: 0 !important;          width: 100% !important;        }        .modal-md-dp-month-year-separator{          margin-left : 5px !important;        }        div.weekdayheader {          font-weight: 500 !important;          text-align: left !important;          height: 1.6rem !important;          box-sizing: border-box !important;        }        div.weekdaylabel {          height: 1.6rem !important;          float: left !important;          padding: 0 0 !important;          border-radius: 3rem !important;          font-size: 11px !important;          box-sizing: border-box !important;          text-align: center !important;          color: #a0a0a0 ;          width: 2.77rem !important;        }        .modal-md-dp-daybtn        .md-button.modal-md-dp-daybtn:hover {          background-color : {{mdThemeColors.primary['400']}} !important;          color: #fff !important;        }        .md-button.modal-md-dp-daybtn.selected {          background-color : {{mdThemeColors.primary['500']}} !important;          color: #fff !important;        }        .modal-md-dp-daybtn.today {          color: {{mdThemeColors.primary['500']}} ;        }        .modal-md-dp-daybtn.disabled {          color: #eee !important;        }        .modal-md-dp-daybtn {          float: left ;          line-height: 2rem ;          min-width: 0 ;          border-radius: 2rem ;          font-weight: 700 ;          min-height: inherit ;          overflow: visible ;          width: 2.5rem ;          height: 2.5rem ;          margin: 0 0.15rem 0 0.1rem ;          font-size: 0.75rem ;        }        .modal-md-dp-daybtn.firstday {          margin-left: 16.6rem ;        }        .modal-md-dp-modal{          max-width:320px !important;        }        div.masterdatepicker {          height: 392px;        }        div.monthpanel {          position: relative;          font-size: 1rem;          margin-top: -0.1rem;          box-sizing: border-box;          top: 7px;          height: 16.2rem;        }        ";style.text(styleText),head.append(style),$compile(head.contents())($scope)}ModalDatePickerCount.Increment(),$ctrl.$formatters.push(formatter),$ctrl.$parsers.push(parser),$scope.SelectedDate=$scope.ngModel,$scope.serial=Math.floor(1e16*Math.random()),$scope.mdThemeColors=mdThemeColors,$scope.$watch("ngModel",function(newValue){$scope.SelectedDate=$scope.ngModel},!0),$scope.$watch("SelectedDate",function(newValue){null!=newValue?($attr.dateFormat||($attr.dateFormat="M/d/yyyy"),$scope.SelectedDateText=$filter("date")(newValue,$attr.dateFormat)):$scope.SelectedDateText=null},!0),$scope.showModalDatePicker=function($event,startval){if($event.preventDefault(),!$scope.ngDisabled){var dlgCtrl=function($scope,$mdDialog,dlgOrientation,serial){null==startval&&(startval=new Date),$scope.DialogSelectedDate=startval,$scope.originalOrientation=dlgOrientation,$scope.serial=serial,$scope.minDate=$attr.minDate,$scope.maxDate=$attr.maxDate,$scope.NowClick=function($event){$event.preventDefault(),$timeout(function(){$scope.DialogSelectedDate=new Date})},$scope.CancelClick=function($event){$event.preventDefault(),$mdDialog.cancel()},$scope.SaveClick=function($event){$event.preventDefault(),$mdDialog.hide($scope.DialogSelectedDate)}},dlgOpts={template:'<md-dialog class="modal-md-dp-modal" ng-attr-id="mddpdlg-{{serial}}">      <div class="popupDialogContent" style="overflow:hidden">      <modal-md-datepicker-calendar ng-model="DialogSelectedDate" submitclick="SaveClick" cancelclick="CancelClick" min-date="{{minDate}}" max-date="{{maxDate}}"></modal-md-datepicker-calendar>      </div>      </md-dialog>',controller:dlgCtrl,targetEvent:$event,locals:{dlgOrientation:$scope.orientation,serial:$scope.serial},onComplete:function(){document.getElementById("mddpdlg-"+$scope.serial).focus()}};$mdDialog.show(dlgOpts).then(function(answer){$scope.ngModel=answer})}}}}}]),ModalDatePicker.directive("modalMdDatepickerCalendar",["$timeout","$compile","mdThemeColors","$mdMedia",function($timeout,$compile,mdThemeColors,$mdMedia){return{restrict:"E",replace:!1,require:"ngModel",transclude:!0,scope:{ngModel:"=",orientation:"@",submitclick:"&",cancelclick:"&",minDate:"@",maxDate:"@"},link:function($scope,$element,$attr,$ctrl){$scope.serial=Math.floor(1e16*Math.random()),$scope.CalculateMonth=function(){var tempday=new Date($scope.selYear,$scope.selMonth,1),fday=tempday.getDay(),ldaynum=new Date($scope.selYear,$scope.selMonth+1,0).getDate();$scope.selFirstDayOfMonth=fday,$scope.selLastDateOfMonth=ldaynum;var selbtn=document.querySelector(".jmddp-"+$scope.serial+' [Day="'+$scope.selDay+'"]'),btn=angular.element(selbtn);btn.hasClass("md-button")||(btn=btn.parent()),btn.addClass("selected"),btn.addClass("disabled"),null!=$scope.selButton&&$scope.selButton[0]!=btn[0]&&$scope.selButton.removeClass("selected"),$scope.selButton=btn;var todaybtn=angular.element(document.querySelector(".jmddp-"+$scope.serial+' [Day="'+$scope.todaysDate+'"]'));$scope.todaysMonth==$scope.selMonth&&$scope.todaysYear==$scope.selYear?todaybtn.addClass("today"):todaybtn.removeClass("today")},$scope.mdThemeColors=mdThemeColors,$scope.Today=new Date,$scope.todaysDate=$scope.Today.getDate(),$scope.todaysMonth=$scope.Today.getMonth(),$scope.todaysYear=$scope.Today.getFullYear(),null==$scope.ngModel&&($scope.ngModel=$scope.Today),$scope.selDate=new Date($scope.ngModel),$scope.selMonth=$scope.selDate.getMonth(),$scope.selDay=$scope.selDate.getDate(),$scope.selYear=$scope.selDate.getFullYear(),$scope.selButton=null,$scope.CalculateMonth(),$scope.Months=["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"],$scope.ShortMonths=["Ene","Feb","Mar","Abr","May","Jun","Jul","Ago","Sep","Oct","Nov","Dic"],$scope.DayClick=function($event,day){$event.preventDefault();var btn=angular.element($event.srcElement);btn.hasClass("md-button")||(btn=btn.parent()),btn.addClass("selected"),null!=$scope.selButton&&$scope.selButton.removeClass("selected"),$scope.selButton=btn,$scope.selDate=new Date($scope.selYear,$scope.selMonth,day),$scope.selYear=$scope.selDate.getFullYear(),$scope.selMonth=$scope.selDate.getMonth(),$scope.selDay=$scope.selDate.getDate(),$scope.ngModel=$scope.selDate,$timeout(function(){$scope.submitclick()($event,$scope.selDate)})},$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(min_date>sdate)return!0}if($attr.maxDate){$attr.maxDate=$attr.maxDate.replace(/['"]+/g,"");var max_date=new Date($attr.maxDate);if(sdate>max_date)return!0}return!1},$scope.NowClick=function($event){$event.preventDefault(),$scope.selDate=new Date,$scope.selYear=$scope.selDate.getFullYear(),$scope.selMonth=$scope.selDate.getMonth(),$scope.selDay=$scope.selDate.getDate(),$scope.CalculateMonth($scope.selMonth)},$scope.OKClick=function($event){$scope.submitclick()($event,$scope.selDate)},$scope.CancelClick=function($event){$scope.cancelclick()($event)},$scope.$watch("ngModel",function(newValue){null!=newValue&&($scope.selDate=new Date(newValue),$scope.selYear=$scope.selDate.getFullYear(),$scope.selMonth=$scope.selDate.getMonth(),$scope.selDay=$scope.selDate.getDate(),$timeout(function(){$scope.CalculateMonth($scope.selMonth)}))}),$scope.$watch("selMonth",function(newValue){$scope.selDate=new Date($scope.selYear,$scope.selMonth,$scope.selDay),$scope.CalculateMonth($scope.selMonth)}),$scope.$watch("selYear",function(newValue){$scope.selDate=new Date($scope.selYear,$scope.selMonth,$scope.selDay),$scope.CalculateMonth($scope.selMonth)}),$scope.$watch(function(){return $mdMedia("(max-width: 655px)")},function(isSmall){$scope.firstLead="landscape"==$scope.currentOrientation?2.9:2.75,$scope.firstEdge="landscape"==$scope.currentOrientation?.45:.1}),$scope.BackMonth=function($event){$event.preventDefault();var newm=$scope.selMonth-1,newy=$scope.selYear;if(0>newm&&(newm+=12,newy--),$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(min_date>nuewd)return!1}$scope.selMonth=newm,$scope.selYear=newy,$scope.CalculateMonth($scope.selMonth)},$scope.ForwardMonth=function($event){$event.preventDefault();var newm=$scope.selMonth+1,newy=$scope.selYear;if(newm>=12&&(newm%=12,newy++),$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!1}$scope.selMonth=newm,$scope.selYear=newy,$scope.CalculateMonth($scope.selMonth)};var _BuildCalendar=function(){var caltext='        <div layout="column" class="masterdatepicker jmddp-'+$scope.serial+'" >        <md-toolbar>        <div class="md-toolbar-tools1 md-padding" layout="column" >        <div class="md-subhead">{{selYear}}</div>        <div class="md-headline">{{selDate | date:\'EEE, MMM d\'}}</div>        </div>        </md-toolbar>        <div layout="row" layout-align="center center">        <md-button class="md-icon-button" ng-click="BackMonth($event)" aria-label="Back 1 Month"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg></md-button>        <div flex layout="row" layout-align="center center">        <div class="modal-md-dp-month-year-separator" flex="45" layout="row" layout-align="end center">        <span class="modal-md-dp-select-month">{{Months[selMonth]}}        <select ng-model="selMonth" ng-options="(idx*1) as month for (idx, month) in Months"></select>        </span>        </div>        <div flex="5"></div>        <div flex="45">        <input type="number" ng-model="selYear" class=" modal-md-dp-input" />        </div>        </div>        <md-button class="md-icon-button right" ng-click="ForwardMonth($event)" aria-label="Forward 1 Month"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg></md-button>        </div>                <div>        <div class="weekdayheader">        <div class="weekdaylabel">D</div>        <div class="weekdaylabel">L</div>        <div class="weekdaylabel">M</div>        <div class="weekdaylabel">M</div>        <div class="weekdaylabel">J</div>        <div class="weekdaylabel">V</div>        <div class="weekdaylabel">S</div>        </div>        </div>                <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" 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>        </div>        ',newbody=angular.element(caltext);$compile(newbody)($scope),$element.empty().append(newbody)};_BuildCalendar()}}}]);

package.json

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

src/modal-md-datepicker.js

@@ -6,3 +6,3 @@ /*!
 * Updated 2016.05
-* version 1.0.6
+* version 1.0.7
 */
@@ -202,3 +202,3 @@
           top: 7px;\
-	        height: 16.2rem;\
+          height: 16.2rem;\
         }\
@@ -320,11 +320,3 @@ ';
         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;
@@ -345,4 +337,3 @@ $scope.selLastDateOfMonth = ldaynum;
         $scope.selButton = btn;
-
-        // If the currently selected month and year match today's month and year, ensure that the matching day button has the 'today' class; otherwise, remove it.
+        
         var todaybtn = angular.element(document.querySelector('.jmddp-' + $scope.serial + ' [Day="' + $scope.todaysDate + '"]'));
@@ -363,3 +354,3 @@ if ($scope.todaysMonth == $scope.selMonth && $scope.todaysYear == $scope.selYear) {
       if ($scope.ngModel == null) $scope.ngModel = $scope.Today;
-      $scope.selDate = $scope.ngModel;
+      $scope.selDate = new Date($scope.ngModel);
       $scope.selMonth = $scope.selDate.getMonth();
@@ -371,9 +362,6 @@ $scope.selDay = $scope.selDate.getDate();
       $scope.CalculateMonth();
-
-      //if ($scope.orientation == null) $scope.orientation = 'portrait';
-
+      
       $scope.Months = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'];
       $scope.ShortMonths = ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'];
-
-
+      
       $scope.DayClick = function ($event, day) {
@@ -451,3 +439,3 @@ $event.preventDefault();
         if (newValue == null) return;
-        $scope.selDate = newValue;
+        $scope.selDate = new Date(newValue);
         $scope.selYear = $scope.selDate.getFullYear();
@@ -473,14 +461,7 @@ $scope.selMonth = $scope.selDate.getMonth();
 
-      // $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.$watch(function () {
         return $mdMedia('(max-width: 655px)');
       }, function (isSmall) {
-        // if (isSmall) {
-        //   $scope.currentOrientation = 'portrait';
-        // } else {
-        //   $scope.currentOrientation = $scope.orientation;
-        // }
+      
         $scope.firstLead = ($scope.currentOrientation == 'landscape' ? 2.9 : 2.75);
@@ -487,0 +468,0 @@ $scope.firstEdge = ($scope.currentOrientation == 'landscape' ? 0.45 : 0.1);

No alert changes

Worsened metrics

Total package byte prevSize

48838

decreased by-1.84%

Lines of code

565

decreased by-2.92%

No dependency changes