Skip to content

Commit

Permalink
Merge pull request #59 from chrillewoodz/master
Browse files Browse the repository at this point in the history 
Added ngDisabled, label and selected day support
  • Loading branch information
@mobinni
mobinni committed Jan 7, 2016
2 parents f10d8ac + 3c4acfe commit 29dfb1a
Show file tree
Hide file tree
Showing 2 changed files with 24 additions and 8 deletions.
20 changes: 15 additions & 5 deletions app/scripts/mbdatepicker.coffee
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,11 +35,15 @@ app.directive('mbDatepicker', ['$filter', ($filter)->
placeholder: '@'
arrows: '=?'
calendarHeader: '=?',
utcMode: '=' # UTC mode can be used for fixed dates that should never be converted to local timezones (e.g., birth dates)
utcMode: '=' # UTC mode can be used for fixed dates that should never be converted to local timezones (e.g., birth dates),
ngDisabled: '=',
label: '@',
customInputClass: '@'
}
template: '
<div id="dateSelectors" class="date-selectors" outside-click="hidePicker()">
<input name="{{ inputName }}" type="text" class="mb-input-field" ng-click="showPicker()" class="form-control" ng-model="date" placeholder="{{ placeholder }}">
<label ng-bind="label" class="mb-input-label" for="{{inputName}}"></label>
<input name="{{ inputName }}" type="text" ng-disabled="{{ngDisabled}}" ng-class="{disabled: ngDisabled}" class="mb-input-field {{customInputClass}}" ng-click="showPicker()" class="form-control" id="{{inputName}}" ng-model="date" placeholder="{{ placeholder }}">
<div class="mb-datepicker" ng-show="isVisible">
<table>
<caption>
Expand All @@ -66,7 +70,9 @@ app.directive('mbDatepicker', ['$filter', ($filter)->
</tr>
<tr class="days" ng-repeat="week in weeks">
<td ng-click="selectDate(day)" class="noselect" ng-class="::day.class" ng-repeat="day in week">
{{ ::day.value }}
<div style="display: block;" ng-class="{selected: selectedDate === day.selected}">
{{ ::day.value }}
</div>
</td>
</tr>
</tbody>
Expand Down Expand Up @@ -235,8 +241,12 @@ app.directive('mbDatepicker', ['$filter', ($filter)->
scope.selectDate = (day) ->
if day.isEnabled
scope.date = day.date.format(scope.dateFormat)
scope.isVisible = false;


if day.selected == scope.date
scope.selectedDate = day.selected

scope.isVisible = false;


scope.isVisible = false
scope.showPicker = ->
Expand Down
12 changes: 9 additions & 3 deletions build/mbdatepicker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,9 +51,12 @@
placeholder: '@',
arrows: '=?',
calendarHeader: '=?',
utcMode: '='
utcMode: '=',
ngDisabled: '=',
label: '@',
customInputClass: '@'
},
template: '<div id="dateSelectors" class="date-selectors" outside-click="hidePicker()"> <input name="{{ inputName }}" type="text" class="mb-input-field" ng-click="showPicker()" class="form-control" ng-model="date" placeholder="{{ placeholder }}"> <div class="mb-datepicker" ng-show="isVisible"> <table> <caption> <div class="header-year-wrapper"> <span style="display: inline-block; float: left; padding-left:20px; cursor: pointer" class="noselect" ng-click="previousYear(currentDate)"><img style="height: 10px;" ng-src="{{ arrows.year.left }}"/></span> <span class="header-year noselect" ng-class="noselect">{{ year }}</span> <span style="display: inline-block; float: right; padding-right:20px; cursor: pointer" class="noselect" ng-click="nextYear(currentDate)"><img style="height: 10px;" ng-src="{{ arrows.year.right }}"/></span> </div> <div class="header-nav-wrapper"> <span class="header-item noselect" style="float: left; cursor:pointer" ng-click="previousMonth(currentDate)"><img style="height: 10px;" ng-src="{{ arrows.month.left }}"/></span> <span class="header-month noselect">{{ month }}</span> <span class="header-item header-right noselect" style="float: right; cursor:pointer" ng-click="nextMonth(currentDate)"> <img style="height: 10px;" ng-src="{{ arrows.month.right }}"/></span> </div> </caption> <tbody> <tr> <td class="day-head">{{ ::calendarHeader.monday }}</td> <td class="day-head">{{ ::calendarHeader.tuesday }}</td> <td class="day-head">{{ ::calendarHeader.wednesday }}</td> <td class="day-head">{{ ::calendarHeader.thursday }}</td> <td class="day-head">{{ ::calendarHeader.friday }}</td> <td class="day-head">{{ ::calendarHeader.saturday }}</td> <td class="day-head">{{ ::calendarHeader.sunday }}</td> </tr> <tr class="days" ng-repeat="week in weeks"> <td ng-click="selectDate(day)" class="noselect" ng-class="::day.class" ng-repeat="day in week"> {{ ::day.value }} </td> </tr> </tbody> </table> </div> </div>',
template: '<div id="dateSelectors" class="date-selectors" outside-click="hidePicker()"> <label ng-bind="label" class="mb-input-label" for="{{inputName}}"></label> <input name="{{ inputName }}" type="text" ng-disabled="{{ngDisabled}}" ng-class="{disabled: ngDisabled}" class="mb-input-field {{customInputClass}}" ng-click="showPicker()" class="form-control" id="{{inputName}}" ng-model="date" placeholder="{{ placeholder }}"> <div class="mb-datepicker" ng-show="isVisible"> <table> <caption> <div class="header-year-wrapper"> <span style="display: inline-block; float: left; padding-left:20px; cursor: pointer" class="noselect" ng-click="previousYear(currentDate)"><img style="height: 10px;" ng-src="{{ arrows.year.left }}"/></span> <span class="header-year noselect" ng-class="noselect">{{ year }}</span> <span style="display: inline-block; float: right; padding-right:20px; cursor: pointer" class="noselect" ng-click="nextYear(currentDate)"><img style="height: 10px;" ng-src="{{ arrows.year.right }}"/></span> </div> <div class="header-nav-wrapper"> <span class="header-item noselect" style="float: left; cursor:pointer" ng-click="previousMonth(currentDate)"><img style="height: 10px;" ng-src="{{ arrows.month.left }}"/></span> <span class="header-month noselect">{{ month }}</span> <span class="header-item header-right noselect" style="float: right; cursor:pointer" ng-click="nextMonth(currentDate)"> <img style="height: 10px;" ng-src="{{ arrows.month.right }}"/></span> </div> </caption> <tbody> <tr> <td class="day-head">{{ ::calendarHeader.monday }}</td> <td class="day-head">{{ ::calendarHeader.tuesday }}</td> <td class="day-head">{{ ::calendarHeader.wednesday }}</td> <td class="day-head">{{ ::calendarHeader.thursday }}</td> <td class="day-head">{{ ::calendarHeader.friday }}</td> <td class="day-head">{{ ::calendarHeader.saturday }}</td> <td class="day-head">{{ ::calendarHeader.sunday }}</td> </tr> <tr class="days" ng-repeat="week in weeks"> <td ng-click="selectDate(day)" class="noselect" ng-class="::day.class" ng-repeat="day in week"> <div style="display: block;" ng-class="{selected: selectedDate === day.selected}"> {{ ::day.value }} </div> </td> </tr> </tbody> </table> </div> </div>',
restrict: 'E',
transclude: true,
link: function(scope, element, attrs) {
Expand Down Expand Up @@ -222,8 +225,11 @@
scope.selectDate = function(day) {
if (day.isEnabled) {
scope.date = day.date.format(scope.dateFormat);
return scope.isVisible = false;
if (day.selected === scope.date) {
scope.selectedDate = day.selected;
}
}
return scope.isVisible = false;
};
scope.isVisible = false;
scope.showPicker = function() {
Expand Down

0 comments on commit 29dfb1a

Please sign in to comment.