modalmddatepicker - npm Package Compare versions

Comparing version 1.0.12 to 1.0.13

bower.json

 {
   "name": "modalmddatepicker",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "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.12
+* version 1.0.13
 */
-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:"@",locked:"=",options:"="},template:'<input type="text" ng-attr-id="modal-md-dp-directive-{{serial}}" ng-model="SelectedDateText" ng-click="showModalDatePicker($event, SelectedDate)" ng-readonly="modal_md_readonly"/>',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}var dp_options=$scope.options;if($scope.modal_md_readonly=!1,$scope.locked&&($scope.modal_md_readonly=$scope.locked),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;        }        .repeated-item{        }        ";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.options=dp_options,$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}}" options="options"></modal-md-datepicker-calendar>      </div>      </md-dialog>',controller:dlgCtrl,targetEvent:$event,clickOutsideToClose:!0,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:"@",options:"="},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.ShortDays=["D","L","M","M","J","V","S"],$scope.options&&"en"===$scope.options.lang&&($scope.ShortDays=["S","M","T","W","T","F","S"],$scope.Months=["January","February","March","April","May","June","July","August","September","October","November","December"],$scope.ShortMonths=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]),$scope.options&&$scope.options.sort_days&&($scope.ShortDays=$scope.options.sort_days),$scope.options&&$scope.options.months&&($scope.Months=$scope.options.months),$scope.options&&$scope.options.short_months&&($scope.ShortMonths=$scope.options.short_months),$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)},$scope.year_list=[],$scope.yearTopIndex=30;for(var i=(new Date).getFullYear()+30;i>=1900;i--)$scope.year_list.push(i);$scope.selyearPanel=!1,$scope.setSelectedYear=function(itm_){console.log(itm_),$scope.selYear=itm_,$scope.selyearPanel=!1};var _BuildCalendar=function(){$scope.title_format="EEE, MMM d",$scope.options&&$scope.options.title_date_format&&($scope.title_format=$scope.options.title_date_format);var ytext='<md-virtual-repeat-container style="height: 200px; width: 100%; " md-top-index="yearTopIndex">                      <div md-virtual-repeat="item in year_list"                           class="repeated-item" flex >                        <md-button style="width:95%;" ng-click="setSelectedYear(item)">{{item}}</md-button>                      </div>                    </md-virtual-repeat-container>',caltext='        <div layout="column" class="masterdatepicker jmddp-'+$scope.serial+'" >        <md-toolbar>        <div class="md-toolbar-tools1 md-padding" layout="column" >        <div class="md-subhead" ng-click="selyearPanel = !selyearPanel">{{selYear}}</div>        <div class="md-headline">{{selDate | date:\''+$scope.title_format+'\'}}</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" ng-click="selyearPanel = !selyearPanel"/>        </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">{{ShortDays[0]}}</div>        <div class="weekdaylabel">{{ShortDays[1]}}</div>        <div class="weekdaylabel">{{ShortDays[2]}}</div>        <div class="weekdaylabel">{{ShortDays[3]}}</div>        <div class="weekdaylabel">{{ShortDays[4]}}</div>        <div class="weekdaylabel">{{ShortDays[5]}}</div>        <div class="weekdaylabel">{{ShortDays[6]}}</div>        </div>        </div>                <div class="monthpanel" ng-if="!selyearPanel">        <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 ng-if="selyearPanel">       '+ytext+"        </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:"@",locked:"=",options:"="},template:'<input type="text" ng-attr-id="modal-md-dp-directive-{{serial}}" ng-model="SelectedDateText" ng-click="showModalDatePicker($event, SelectedDate)" ng-readonly="modal_md_readonly"/>',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}var dp_options=$scope.options;if($scope.modal_md_readonly=!1,$scope.locked&&($scope.modal_md_readonly=$scope.locked),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;        }        .repeated-item{        }        ";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="dd/MM/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.options=dp_options,$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}}" options="options"></modal-md-datepicker-calendar>      </div>      </md-dialog>',controller:dlgCtrl,targetEvent:$event,clickOutsideToClose:!0,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:"@",options:"="},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.ShortDays=["D","L","M","M","J","V","S"],$scope.options&&"en"===$scope.options.lang&&($scope.ShortDays=["S","M","T","W","T","F","S"],$scope.Months=["January","February","March","April","May","June","July","August","September","October","November","December"],$scope.ShortMonths=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]),$scope.options&&$scope.options.sort_days&&($scope.ShortDays=$scope.options.sort_days),$scope.options&&$scope.options.months&&($scope.Months=$scope.options.months),$scope.options&&$scope.options.short_months&&($scope.ShortMonths=$scope.options.short_months),$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)},$scope.year_list=[],$scope.yearTopIndex=30;for(var i=(new Date).getFullYear()+30;i>=1900;i--)$scope.year_list.push(i);$scope.selyearPanel=!1,$scope.setSelectedYear=function(itm_){console.log(itm_),$scope.selYear=itm_,$scope.selyearPanel=!1};var _BuildCalendar=function(){$scope.title_format="EEE, MMM d",$scope.options&&$scope.options.title_date_format&&($scope.title_format=$scope.options.title_date_format);var ytext='<md-virtual-repeat-container style="height: 200px; width: 100%; " md-top-index="yearTopIndex">                      <div md-virtual-repeat="item in year_list"                           class="repeated-item" flex >                        <md-button style="width:95%;" ng-click="setSelectedYear(item)">{{item}}</md-button>                      </div>                    </md-virtual-repeat-container>',caltext='        <div layout="column" class="masterdatepicker jmddp-'+$scope.serial+'" >        <md-toolbar>        <div class="md-toolbar-tools1 md-padding" layout="column" >        <div class="md-subhead" ng-click="selyearPanel = !selyearPanel">{{selYear}}</div>        <div class="md-headline">{{selDate | date:\''+$scope.title_format+'\'}}</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" ng-click="selyearPanel = !selyearPanel"/>        </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">{{ShortDays[0]}}</div>        <div class="weekdaylabel">{{ShortDays[1]}}</div>        <div class="weekdaylabel">{{ShortDays[2]}}</div>        <div class="weekdaylabel">{{ShortDays[3]}}</div>        <div class="weekdaylabel">{{ShortDays[4]}}</div>        <div class="weekdaylabel">{{ShortDays[5]}}</div>        <div class="weekdaylabel">{{ShortDays[6]}}</div>        </div>        </div>                <div class="monthpanel" ng-if="!selyearPanel">        <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 ng-if="selyearPanel">       '+ytext+"        </div>        </div>        ",newbody=angular.element(caltext);$compile(newbody)($scope),$element.empty().append(newbody)};_BuildCalendar()}}}]);

package.json

 {
   "name": "modalmddatepicker",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "description": "Angular Material Datepicker Component",
@@ -25,3 +25,3 @@ "main": "modal-md-datepicker.min.js",
   "homepage": "https://github.com/diegoguevara/ModalMDDatePicker#readme",
-  "dev-dependencies": {
+  "devDependencies": {
     "gulp": "^3.9.1",
@@ -28,0 +28,0 @@ "gulp-ng-annotate": "^2.0.0",

src/modal-md-datepicker.js

@@ -6,3 +6,3 @@ /*!
 * Updated 2016.05
-* version 1.0.12
+* version 1.0.13
 */
@@ -244,3 +244,4 @@
           if( !$attr.dateFormat ){
-            $attr.dateFormat = 'M/d/yyyy';
+            //$attr.dateFormat = 'M/d/yyyy';
+            $attr.dateFormat = 'dd/MM/yyyy';
           }
@@ -247,0 +248,0 @@ $scope.SelectedDateText = $filter('date')(newValue, $attr.dateFormat);

No alert changes

Improved metrics

Total package byte prevSize

59531

increased by0.08%

Lines of code

616

increased by0.16%

Worsened metrics

Dev dependency count

4

increased byInfinity%

No dependency changes