@@ -15,7 +15,8 @@ function Calender($timeout,picker){
1515 format :"@" ,
1616 mode :"@" ,
1717 startView :"@" ,
18- weekStartDay :"@"
18+ weekStartDay :"@" ,
19+ dateSelectCall : '&'
1920 } ,
2021 controller :[ "$scope" , "$timeout" , "picker" , "$mdMedia" , CalenderCtrl ] ,
2122 controllerAs : 'vm' ,
@@ -224,6 +225,7 @@ CalenderCtrl.prototype.selectDate = function(d,isDisabled){
224225 var self = this ;
225226 if ( isDisabled ) return ;
226227 self . currentDate = d ;
228+ self . $scope . dateSelectCall ( { date :d } ) ;
227229 self . setNgModelValue ( d ) ;
228230
229231 self . $scope . $emit ( 'calender:date-selected' ) ;
@@ -302,261 +304,10 @@ CalenderCtrl.prototype.closeDateTime = function(){
302304 else
303305 self . view = 'DATE' ;
304306 self . $scope . $emit ( 'calender:close' ) ;
305-
306307}
307308
308309
309310
310- function DateTimePicker ( $mdUtil , $mdMedia , $document , picker ) {
311- return {
312- restrict : 'E' ,
313- replace :true ,
314- scope :{
315- value : '=' ,
316- startDate : '@' ,
317- weekStartDay : '@' ,
318- startView :"@" ,
319- mode : '@' ,
320- format : '@' ,
321- minDate : '@' ,
322- maxDate : '@' ,
323- fname : "@" ,
324- lable : "@" ,
325- isRequired : '@' ,
326- disable : '=' ,
327- form : '=' ,
328- closeOnSelect :"@"
329- } ,
330- template : ' <md-input-container md-no-float>'
331- + ' <label for="{{fname}}" >{{lable }}</label>'
332- + ' <input name="{{fname}}" ng-model="value" '
333- + ' type="text" placeholde="{{lable}}"'
334- + ' aria-label="{{fname}}" ng-focus="show()" data-ng-required="isRequired" ng-disabled="disable"'
335- + ' server-error class="sm-input-container">'
336- + ' <div ng-messages="form[fname].$error" ng-if="form[fname].$touched">'
337- + ' <div ng-messages-include="{{ngMassagedTempaltePath}}"></div>'
338- + ' </div>'
339- + ' <div id="picker" class="sm-calender-pane md-whiteframe-15dp">'
340- + ' <sm-date-picker '
341- + ' id="{{fname}}Picker" '
342- + ' ng-model="value" '
343- + ' initial-date="{{value}}"'
344- + ' mode="{{mode}}" '
345- + ' close-on-select="{{closeOnSelect}}"'
346- + ' start-view="{{startView}}" '
347- + ' data-min-date="minDate" '
348- + ' data-max-date="maxDate" '
349- + ' data-format="{{format}}" '
350- + ' data-week-start-day="{{weekStartDay}}" > '
351- + ' </sm-date-picker>'
352- + ' </div>'
353- + ' </md-input-container>' ,
354- link : function ( scope , $element , attr ) {
355-
356- var inputPane = $element [ 0 ] . querySelector ( '.sm-input-container' ) ;
357- var calenderPane = $element [ 0 ] . querySelector ( '.sm-calender-pane' ) ;
358- var cElement = angular . element ( calenderPane ) ;
359-
360- scope . noFloat = 'noFloat' in attr ;
361-
362- scope . ngMassagedTempaltePath = picker . massagePath ;
363- // check if Pre defined format is supplied
364- scope . format = angular . isUndefined ( scope . format ) ? 'MM-DD-YYYY' : scope . format ;
365-
366- // Hide calender pane on initialization
367- cElement . addClass ( 'hide hide-animate' ) ;
368-
369- // set start date
370- scope . startDate = angular . isUndefined ( scope . value ) ? scope . startDate : scope . value ;
371-
372- // Hide Calender on click out side
373- $document . on ( 'click' , function ( e ) {
374- if ( ( calenderPane !== e . target && inputPane !== e . target ) && ( ! calenderPane . contains ( e . target ) && ! inputPane . contains ( e . target ) ) ) {
375- hideElement ( ) ;
376- }
377- } ) ;
378-
379- // if tab out hide key board
380- angular . element ( inputPane ) . on ( 'keydown' , function ( e ) {
381- if ( e . which === 9 ) {
382- hideElement ( ) ;
383- }
384- } ) ;
385-
386- // show calender
387- scope . show = function ( ) {
388- var elementRect = inputPane . getBoundingClientRect ( ) ;
389- var bodyRect = document . body . getBoundingClientRect ( ) ;
390-
391- cElement . removeClass ( 'hide' ) ;
392- if ( $mdMedia ( 'sm' ) || $mdMedia ( 'xs' ) ) {
393- console . log ( bodyRect . width ) ;
394- calenderPane . style . left = ( bodyRect . width - 320 ) / 2 + 'px' ;
395- calenderPane . style . top = ( bodyRect . height - 450 ) / 2 + 'px' ;
396- } else {
397- var rect = getVisibleViewPort ( elementRect , bodyRect ) ;
398- calenderPane . style . left = ( rect . left ) + 'px' ;
399- calenderPane . style . top = ( rect . top ) + 'px' ;
400- }
401- document . body . appendChild ( calenderPane ) ;
402- $mdUtil . disableScrollAround ( calenderPane ) ;
403- cElement . addClass ( 'show' ) ;
404-
405- }
406-
407- // calculate visible port to display calender
408- function getVisibleViewPort ( elementRect , bodyRect ) {
409- var calenderHeight = 320 ;
410- var calenderWidth = 450 ;
411-
412- var top = elementRect . top ;
413- if ( elementRect . top + calenderHeight > bodyRect . bottom ) {
414- top = elementRect . top - ( ( elementRect . top + calenderHeight ) - ( bodyRect . bottom - 20 ) ) ;
415- }
416- var left = elementRect . left ;
417- if ( elementRect . left + calenderWidth > bodyRect . right ) {
418- left = elementRect . left - ( ( elementRect . left + calenderWidth ) - ( bodyRect . right - 10 ) ) ;
419- }
420- return { top : top , left : left } ;
421- }
422-
423- function hideElement ( ) {
424- cElement . addClass ( 'hide-animate' ) ;
425- cElement . removeClass ( 'show' ) ;
426- $mdUtil . enableScrolling ( ) ;
427-
428- }
429- //listen to emit for closing calender
430- scope . $on ( 'calender:close' , function ( ) {
431- hideElement ( ) ;
432- } ) ;
433- }
434- }
435- }
436-
437- function smTimePickerNew ( $mdUtil , $mdMedia , $document , $timeout , picker ) {
438- return {
439- restrict : 'E' ,
440- replace :true ,
441- scope :{
442- value : '=' ,
443- startDate : '@' ,
444- weekStartDay : '@' ,
445- startView :"@" ,
446- mode : '@' ,
447- format : '@' ,
448- minDate : '@' ,
449- maxDate : '@' ,
450- fname : "@" ,
451- lable : "@" ,
452- isRequired : '@' ,
453- disable : '=' ,
454- form : '=' ,
455- closeOnSelect :"@"
456- } ,
457- template : ' <md-input-container >'
458- + ' <label for="{{fname}}">{{lable }}</label>'
459- + ' <input name="{{fname}}" ng-model="value" ng-readonly="true"'
460- + ' type="text" placeholde="{{lable}}"'
461- + ' aria-label="{{fname}}" data-ng-required="isRequired"'
462- + ' ng-focus="show()" server-error class="sm-input-container">'
463- + ' <div ng-messages="form.fname.$error" ng-if="form[fname].$touched">'
464- + ' <div ng-messages-include="{{ngMassagedTempaltePath}}"></div>'
465- + ' </div>'
466- + ' <div id="picker" class="sm-calender-pane md-whiteframe-15dp">'
467- + ' <sm-time-pickern '
468- + ' id="{{fname}}Picker" '
469- + ' ng-model="value" '
470- + ' initial-date="{{value}}"'
471- + ' mode="{{mode}}" '
472- + ' close-on-select="{{closeOnSelect}}"'
473- + ' start-view="{{startView}}" '
474- + ' data-min-date="minDate" '
475- + ' data-max-date="maxDate" '
476- + ' format="{{format}}" '
477- + ' start-day="{{weekStartDay}}" > '
478- + ' </sm-time-pickern>'
479- + ' </div>'
480- + ' </md-input-container>' ,
481- link : function ( scope , $element , attr ) {
482- var inputPane = $element [ 0 ] . querySelector ( '.sm-input-container' ) ;
483- var calenderPane = $element [ 0 ] . querySelector ( '.sm-calender-pane' ) ;
484- var cElement = angular . element ( calenderPane ) ;
485- scope . ngMassagedTempaltePath = picker . massagePath ;
486- // check if Pre defined format is supplied
487- scope . format = angular . isUndefined ( scope . format ) ? 'MM-DD-YYYY' : scope . format ;
488-
489-
490- // Hide calender pane on initialization
491- cElement . addClass ( 'hide hide-animate' ) ;
492-
493- // set start date
494- scope . startDate = angular . isUndefined ( scope . value ) ? scope . startDate : scope . value ;
495-
496- // Hide Calender on click out side
497- $document . on ( 'click' , function ( e ) {
498- if ( ( calenderPane !== e . target && inputPane !== e . target ) && ( ! calenderPane . contains ( e . target ) && ! inputPane . contains ( e . target ) ) ) {
499- hideElement ( ) ;
500- }
501- } ) ;
502-
503- // if tab out hide key board
504- angular . element ( inputPane ) . on ( 'keydown' , function ( e ) {
505- if ( e . which === 9 ) {
506- hideElement ( ) ;
507- }
508- } ) ;
509-
510- // show calender
511- scope . show = function ( ) {
512- var elementRect = inputPane . getBoundingClientRect ( ) ;
513- var bodyRect = document . body . getBoundingClientRect ( ) ;
514-
515- cElement . removeClass ( 'hide' ) ;
516- if ( $mdMedia ( 'sm' ) || $mdMedia ( 'xs' ) ) {
517- calenderPane . style . left = ( bodyRect . width - 300 ) / 2 + 'px' ;
518- calenderPane . style . top = ( bodyRect . height - 450 ) / 2 + 'px' ;
519- } else {
520- var rect = getVisibleViewPort ( elementRect , bodyRect ) ;
521- calenderPane . style . left = ( rect . left ) + 'px' ;
522- calenderPane . style . top = ( rect . top ) + 'px' ;
523- }
524- document . body . appendChild ( calenderPane ) ;
525- $mdUtil . disableScrollAround ( calenderPane ) ;
526- cElement . addClass ( 'show' ) ;
527- }
528-
529- // calculate visible port to display calender
530- function getVisibleViewPort ( elementRect , bodyRect ) {
531- var calenderHeight = 460 ;
532- var calenderWidth = 296 ;
533-
534- var top = elementRect . top ;
535- if ( elementRect . top + calenderHeight > bodyRect . bottom ) {
536- top = elementRect . top - ( ( elementRect . top + calenderHeight ) - ( bodyRect . bottom - 20 ) ) ;
537- }
538- var left = elementRect . left ;
539- if ( elementRect . left + calenderWidth > bodyRect . right ) {
540- left = elementRect . left - ( ( elementRect . left + calenderWidth ) - ( bodyRect . right - 10 ) ) ;
541- }
542- return { top : top , left : left } ;
543- }
544-
545- function hideElement ( ) {
546- cElement . addClass ( 'hide-animate' ) ;
547- cElement . removeClass ( 'show' ) ;
548- //this is only for animation
549- //calenderPane.parentNode.removeChild(calenderPane);
550- $mdUtil . enableScrolling ( ) ;
551- }
552- //listen to emit for closing calender
553- scope . $on ( 'calender:close' , function ( ) {
554- hideElement ( ) ;
555- } ) ;
556- }
557- }
558- }
559-
560311
561312function picker ( ) {
562313 var massagePath = "X" ;
@@ -659,9 +410,6 @@ function picker(){
659410var app = angular . module ( 'smDateTimeRangePicker' , [ ] ) ;
660411
661412app . directive ( 'smCalender' , [ '$timeout' , 'picker' , Calender ] ) ;
662- app . directive ( 'smDateTimePicker' , [ '$mdUtil' , '$mdMedia' , '$document' , 'picker' , DateTimePicker ] ) ;
663- app . directive ( 'smTimePickerNew' , [ '$mdUtil' , '$mdMedia' , '$document' , '$timeout' , 'picker' , smTimePickerNew ] ) ;
664-
665413app . provider ( 'picker' , [ picker ] ) ;
666414
667415} ) ( ) ;
0 commit comments