Skip to content

Commit 6070d2d

Browse files
mominsamirmominsamir
committed
partial work commited
1 parent 9a26809 commit 6070d2d

22 files changed

+1764
-131
lines changed

‎app/picker/calender-date.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<div class="date-picker">
22
<div ng-show="vm.view==='YEAR_MONTH'" ng-class="{'year-container' : vm.view==='YEAR_MONTH'}">
33
<md-virtual-repeat-container id="year-container" class="year-md-repeat" md-top-index="vm.yearTopIndex">
4-
<div md-virtual-repeat="yr in vm.yearItems" md-on-demand class="repeated-item" flex>
4+
<div md-virtual-repeat="yr in vm.yearItems" md-on-demand class="repeated-item">
55
<md-button class="md-button" aria-label="year" ng-click="vm.changeYear(yr)" ng-class="{'md-accent': yr === vm.currentDate.year(),
66
'selected-year md-primary':vm.initialDate.year()===yr}">
77
{{yr}}
@@ -11,10 +11,10 @@
1111
</div>
1212
<div ng-show="vm.view==='DATE'" ng-class="{'date-container' : vm.view==='DATE'}">
1313
<div layout="row" class="navigation" layout-align="space-between center">
14-
<md-button ng-disabled="vm.stopScrollPrevious" class="md-icon-button scroll-button" aria-label="privious" ng-click="vm.changePeriod('p')">
14+
<md-button ng-disabled="vm.stopScrollPrevious" class="md-icon-button scroll-button" aria-label="previous" ng-click="vm.changePeriod('p')">
1515
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path d="M15 8.25H5.87l4.19-4.19L9 3 3 9l6 6 1.06-1.06-4.19-4.19H15v-1.5z"/></svg>
1616
</md-button>
17-
<md-button class="md-button" ng-class="vm.moveCalenderAnimation" ng-click="vm.changeView('YEAR_MONTH')">
17+
<md-button aria-label="Change Year" class="md-button" ng-class="vm.moveCalenderAnimation" ng-click="vm.changeView('YEAR_MONTH')">
1818
{{vm.monthList[vm.initialDate.month()]}}{{' '}}{{vm.initialDate.year()}}
1919
</md-button>
2020
<md-button ng-disabled="vm.stopScrollNext" class="md-icon-button scroll-button" aria-label="next" ng-click="vm.changePeriod('n')">

‎app/picker/date-picker-service.html

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,41 @@
11
<md-dialog class="picker-container md-whiteframe-15dp" aria-label="picker">
22
<md-content layout-xs="column" layout="row" class="container" >
33
<md-toolbar class="md-height" ng-class="{'portrait': !vm.$mdMedia('gt-xs'),'landscape': vm.$mdMedia('gt-xs')}" >
4-
<span class="year-header" layout="row" layout-xs="row">{{vm.currentDate.format('YYYY')}}</span>
5-
<span class="date-time-header" layout="row" layout-xs="row">{{vm.currentDate.format(vm.headerDispalyFormat)}}</span>
4+
<span class="year-header" layout="row" layout-xs="row">{{vm.viewDate.format('YYYY')}}</span>
5+
<span class="date-time-header" layout="row" layout-xs="row">{{vm.viewDate.format(vm.headerDispalyFormat)}}</span>
66
</md-toolbar>
77
<div layout="column" class="picker-container" >
88
<div ng-show="vm.view==='DATE'" >
99
<sm-calender
1010
ng-model="vm.selectedDate"
11+
initial-date="{{vm.selectedDate}}"
1112
id="{{vm.fname}}Picker"
1213
data-mode="{{vm.mode}}"
1314
data-min-date="vm.minDate"
1415
data-max-date="vm.maxDate"
1516
close-on-select="{{vm.closeOnSelect}}"
1617
data-format="{{vm.format}}"
17-
data-week-start-day="{{vm.weekStartDay}}">
18+
data-week-start-day="{{vm.weekStartDay}}"
19+
date-select-call="vm.dateSelected(date)">
1820
</sm-calender>
1921
</div>
2022
<div ng-show="vm.view==='HOUR'">
2123
<sm-time
2224
ng-model="vm.selectedTime"
23-
data-format="HH:mm">
25+
data-format="HH:mm"
26+
time-select-call="vm.timeSelected(time)">
2427
</sm-time>
2528
</div>
2629
<div layout="row" ng-hide="vm.closeOnSelect && (vm.mode!=='date-time' || vm.mode!=='time')">
27-
<div ng-show="vm.mode==='date-time'">
30+
<!-- <div ng-show="vm.mode==='date-time'">
2831
<md-button class="md-icon-button" ng-show="vm.view==='DATE'" ng-click="vm.view='HOUR'">
2932
<md-icon md-font-icon="material-icons md-primary">access_time</md-icon>
3033
</md-button>
3134
<md-button class="md-icon-button" ng-show="vm.view==='HOUR'" ng-click="vm.view='DATE'">
3235
<md-icon md-font-icon="material-icons md-primary">date_range</md-icon>
3336
</md-button>
3437
</div>
35-
<span flex></span>
38+
--> <span flex></span>
3639
<md-button class="md-button md-primary" ng-click="vm.closeDateTime()">{{vm.cancelLabel}}</md-button>
3740
<md-button class="md-button md-primary" ng-click="vm.selectedDateTime()">{{vm.okLabel}}</md-button>
3841
</div>

‎app/picker/date-picker.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
<div ng-show="view==='DATE'" >
1010
<sm-calender
1111
ng-model="selectedDate"
12+
initial-date="{{selectedDate}}"
1213
id="{{fname}}Picker"
1314
data-mode="{{mode}}"
1415
data-min-date="minDate"

‎app/picker/js/calender-date.js

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@ function Calender($timeout,picker){
99
replace:true,
1010
require: ['^ngModel', 'smCalender'],
1111
scope :{
12-
initialDate : "@",
1312
minDate:"=",
1413
maxDate:"=",
14+
initialDate : "@",
1515
format:"@",
1616
mode:"@",
1717
startView:"@",
@@ -26,10 +26,6 @@ function Calender($timeout,picker){
2626
var ngModelCtrl = ctrls[0];
2727
var calCtrl = ctrls[1];
2828
calCtrl.configureNgModel(ngModelCtrl);
29-
30-
scope.$on('$destroy',function(){
31-
element.remove();
32-
});
3329
}
3430
}
3531
}
@@ -41,10 +37,8 @@ var CalenderCtrl = function($scope,$timeout,picker,$mdMedia){
4137
self.$timeout = $timeout;
4238
self.picker = picker;
4339
self.dayHeader = self.picker.dayHeader;
44-
//if calender to be initiated with specific date
4540
self.initialDate = $scope.initialDate;
4641
self.viewModeSmall = $mdMedia('xs');
47-
//if calender to be start on specific day default is sunday
4842
self.startDay = angular.isUndefined($scope.weekStartDay) || $scope.weekStartDay==='' ? 'Sunday' : $scope.weekStartDay ;
4943
self.minDate = $scope.minDate; //Minimum date
5044
self.maxDate = $scope.maxDate; //Maximum date
@@ -59,9 +53,12 @@ var CalenderCtrl = function($scope,$timeout,picker,$mdMedia){
5953
self.dateCells = [];
6054
self.monthList = picker.monthNames;
6155
self.moveCalenderAnimation='';
56+
6257
self.format = angular.isUndefined(self.format) ? 'MM-DD-YYYY': self.format;
63-
self.initialDate = angular.isUndefined(self.initialDate)? moment() : moment(self.initialDate,self.format);
58+
self.initialDate = angular.isUndefined(self.initialDate) ? moment() : moment(self.initialDate,self.format);
59+
6460
self.currentDate = self.initialDate.clone();
61+
6562
if(self.restrictToMinDate)
6663
self.minDate = moment(self.minDate, self.format);
6764
if(self.restrictToMaxDate)
@@ -84,11 +81,14 @@ var CalenderCtrl = function($scope,$timeout,picker,$mdMedia){
8481

8582

8683
CalenderCtrl.prototype.configureNgModel = function(ngModelCtrl) {
87-
this.ngModelCtrl = ngModelCtrl;
8884
var self = this;
85+
86+
self.ngModelCtrl = ngModelCtrl;
87+
8988
ngModelCtrl.$render = function() {
9089
self.ngModelCtrl.$viewValue= self.currentDate;
9190
};
91+
9292
};
9393

9494

‎app/picker/js/date-picker-service.js

Lines changed: 45 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,25 @@ var app = angular.module('smDateTimeRangePicker');
77

88
function DatePickerServiceCtrl($scope, $mdDialog, $mdMedia, $timeout,$mdUtil,picker){
99
var self = this;
10+
11+
if(!angular.isUndefined(self.options) && (angular.isObject(self.options))){
12+
self.mode = isExist(self.options.mode,self.mode);
13+
self.format = isExist(self.options.format,'MM-DD-YYYY');
14+
self.minDate = isExist(self.options.minDate,undefined);
15+
self.maxDate = isExist(self.options.maxDate,undefined);
16+
self.weekStartDay = isExist(self.options.weekStartDay,'Sunday');
17+
self.closeOnSelect =isExist(self.options.closeOnSelect,false);
18+
}
19+
20+
console.log(self.format);
21+
if(!angular.isObject(self.initialDate)){
22+
self.initialDate = moment(self.initialDate,self.format);
23+
self.selectedDate = self.initialDate;
24+
}
25+
1026
self.currentDate = self.initialDate;
27+
self.viewDate = self.currentDate;
28+
1129
self.view = 'DATE';
1230
self.$mdMedia = $mdMedia;
1331
self.$mdUtil = $mdUtil;
@@ -16,14 +34,6 @@ function DatePickerServiceCtrl($scope, $mdDialog, $mdMedia, $timeout,$mdUtil,pic
1634
self.cancelLabel = picker.cancelLabel;
1735

1836

19-
if(!angular.isUndefined(self.options) && (angular.isObject(self.options))){
20-
self.mode = isExist(self.options.mode,self.mode);
21-
self.format = isExist(self.options.format,self.format);
22-
self.minDate = isExist(self.options.minDate,undefined);
23-
self.maxDate = isExist(self.options.maxDate,undefined);
24-
self.weekStartDay = isExist(self.options.weekStartDay,'Sunday');
25-
self.closeOnSelect =isExist(self.options.closeOnSelect,false);
26-
}
2737

2838
setViewMode(self.mode);
2939

@@ -48,15 +58,30 @@ function DatePickerServiceCtrl($scope, $mdDialog, $mdMedia, $timeout,$mdUtil,pic
4858
}
4959
}
5060

51-
$scope.$on('calender:date-selected',function(){
52-
if(self.closeOnSelect && (self.mode!=='date-time' || self.mode!=='time')){
61+
self.autoClosePicker = function(){
62+
if(self.closeOnSelect){
5363
if(angular.isUndefined(self.selectedDate)){
54-
self.selectedDate= self.currentDate;
64+
self.selectedDate = self.initialDate;
5565
}
56-
removeMask();
66+
//removeMask();
5767
$mdDialog.hide(self.selectedDate.format(self.format));
5868
}
59-
});
69+
}
70+
71+
self.dateSelected = function(date){
72+
self.selectedDate = date;
73+
self.viewDate = date;
74+
if(self.mode==='date-time')
75+
self.view = 'HOUR';
76+
else
77+
self.autoClosePicker();
78+
}
79+
80+
self.timeSelected = function(time){
81+
self.selectedDate.hour(time.hour()).minute(time.minute());
82+
self.viewDate = self.selectedDate;
83+
self.autoClosePicker();
84+
}
6085

6186
self.closeDateTime = function(){
6287
$mdDialog.cancel();
@@ -71,7 +96,10 @@ function DatePickerServiceCtrl($scope, $mdDialog, $mdMedia, $timeout,$mdUtil,pic
7196
}
7297

7398
function removeMask(){
74-
99+
var ele = document.getElementsByClassName("md-scroll-mask");
100+
if(ele.length!==0){
101+
angular.element(ele).remove();
102+
}
75103
}
76104

77105
}
@@ -84,7 +112,9 @@ app.provider("smDateTimePicker", function() {
84112
var datePicker = function(initialDate, options) {
85113

86114

87-
if (!angular.isUndefined(initialDate)) initialDate = moment();
115+
if (angular.isUndefined(initialDate)) initialDate = moment();
116+
117+
88118
if (!angular.isObject(options)) options = {};
89119

90120
return $mdDialog.show({
@@ -110,10 +140,6 @@ app.provider("smDateTimePicker", function() {
110140
})();
111141

112142

113-
;
114-
115-
116-
117143

118144

119145

‎app/picker/js/date-time-picker.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,6 @@ function DateTimePicker($mdUtil,$mdMedia,$document,picker){
8181

8282
cElement.removeClass('hide');
8383
if($mdMedia('sm') || $mdMedia('xs')){
84-
console.log(bodyRect.width);
8584
calenderPane.style.left = (bodyRect.width-320)/2+'px';
8685
calenderPane.style.top = (bodyRect.height-450)/2+ 'px';
8786
}else{

‎app/scripts/controllers/main.js

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@
88
console.log(vm.minDate);
99
vm.hours = [1,2,3,4,5,6,7,8,9,10,11,12];
1010

11-
vm.currentDate = moment();
11+
vm.currentDate = '01-15-2015';
1212
var options = {
13-
mode : 'date-time',
13+
mode : 'date',
1414
view : 'DATE',
1515
format : 'MM-DD-YYYY',
1616
minDate : '03-10-2016',
@@ -22,21 +22,18 @@
2222
vm.currentDate1 = moment();
2323
var options1 = {
2424
mode : 'date-time',
25-
view : 'DATE',
26-
format : 'MM-DD-YYYY',
25+
format : 'MM-DD-YYYY HH:mm',
2726
minDate : '03-10-2016',
2827
maxDate : null,
2928
weekStartDay :'Sunday'
3029
}
3130

3231
vm.showCalander = function(ev){
3332
options.targetEvent = ev;
34-
smDateTimePicker(vm.currentDate,options).then(function(selectedDate) {
33+
smDateTimePicker(vm.currentDate,options)
34+
.then(function(selectedDate) {
35+
3536
vm.currentDate = selectedDate;
36-
var ele = document.getElementsByClassName("md-scroll-mask");
37-
if(ele.length!==0){
38-
angular.element(ele).remove();
39-
}
4037
});
4138
}
4239

‎app/styles/date_picker.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,7 @@ $aniimation-duration: 1s;
110110

111111
.date-picker{
112112
width: 300px;
113+
height: 270px;
113114
.year-container{
114115
width:300px;
115116
animation: slideInDown 1s cubic-bezier(.06,.61,.04,1.03);

‎app/views/date-time-picker-demo.html

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
<form name="empForm" >
1+
<form name="empForm" ng-init="vm.selectedDate='10-10-2015'">
22
<md-content layout-padding class="md-whiteframe-z2" >
3-
<div layout="row">
3+
<div layout="row">
44
DateTime picker, week start date is Monday
55
</div>
66
<div layout="row">
@@ -132,7 +132,7 @@
132132
<div layout="column" class="picker-container" style="width:315px;">
133133
<div class="container md-whiteframe-z2" style="background: #84ffff;">
134134
<sm-calender
135-
ng-model="selectedDate"
135+
ng-model="vm.selectedDate"
136136
data-mode="{{mode}}"
137137
data-min-date="minDate"
138138
data-max-date="maxDate"
@@ -146,13 +146,3 @@
146146

147147
</md-content>
148148
</form>
149-
150-
<calender-dt
151-
ng-model="selectedDate"
152-
data-mode="{{mode}}"
153-
data-min-date="minDate"
154-
data-max-date="maxDate"
155-
close-on-select="{{closeOnSelect}}"
156-
data-format="{{format}}"
157-
data-week-start-day="{{weekStartDay}}">
158-
</calender-dt>

‎app/views/home.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
<div layout="column" >
44
<h2 flex class="md-headline">Welcome to Date Time Picker</h2>
5-
<h5 flex class="md-title">Support by <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg> repo</h5>
5+
<h5 flex class="md-title">Support by <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>cm repo</h5>
66
</div>
77
<div layout="column" >
88
<p style="font-size:16px;">

‎app/views/range-picker-demo.html

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,6 @@ <h2 class="md-title">Date-Time Range Picker</h2>
6060
show-custom="'true'">
6161
</sm-range-picker-input>
6262
</div>
63-
6463
</div>
6564

6665
<md-grid-list md-cols="1" md-row-height="2:1">

‎dist/picker/calender-date.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<div class="date-picker">
22
<div ng-show="vm.view==='YEAR_MONTH'" ng-class="{'year-container' : vm.view==='YEAR_MONTH'}">
33
<md-virtual-repeat-container id="year-container" class="year-md-repeat" md-top-index="vm.yearTopIndex">
4-
<div md-virtual-repeat="yr in vm.yearItems" md-on-demand class="repeated-item" flex>
4+
<div md-virtual-repeat="yr in vm.yearItems" md-on-demand class="repeated-item">
55
<md-button class="md-button" aria-label="year" ng-click="vm.changeYear(yr)" ng-class="{'md-accent': yr === vm.currentDate.year(),
66
'selected-year md-primary':vm.initialDate.year()===yr}">
77
{{yr}}
@@ -11,10 +11,10 @@
1111
</div>
1212
<div ng-show="vm.view==='DATE'" ng-class="{'date-container' : vm.view==='DATE'}">
1313
<div layout="row" class="navigation" layout-align="space-between center">
14-
<md-button ng-disabled="vm.stopScrollPrevious" class="md-icon-button scroll-button" aria-label="privious" ng-click="vm.changePeriod('p')">
14+
<md-button ng-disabled="vm.stopScrollPrevious" class="md-icon-button scroll-button" aria-label="previous" ng-click="vm.changePeriod('p')">
1515
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path d="M15 8.25H5.87l4.19-4.19L9 3 3 9l6 6 1.06-1.06-4.19-4.19H15v-1.5z"/></svg>
1616
</md-button>
17-
<md-button class="md-button" ng-class="vm.moveCalenderAnimation" ng-click="vm.changeView('YEAR_MONTH')">
17+
<md-button aria-label="Change Year" class="md-button" ng-class="vm.moveCalenderAnimation" ng-click="vm.changeView('YEAR_MONTH')">
1818
{{vm.monthList[vm.initialDate.month()]}}{{' '}}{{vm.initialDate.year()}}
1919
</md-button>
2020
<md-button ng-disabled="vm.stopScrollNext" class="md-icon-button scroll-button" aria-label="next" ng-click="vm.changePeriod('n')">

0 commit comments

Comments
 (0)