Skip to content

Commit

Permalink
Draw out template
Browse files Browse the repository at this point in the history 
adamalbrecht#60 original repo
  • Loading branch information
@KillerCodeMonkey
KillerCodeMonkey committed Sep 5, 2014
1 parent 60e69a7 commit 2d4d6fe
Showing 1 changed file with 50 additions and 44 deletions.
94 changes: 50 additions & 44 deletions src/ng-quick-date.coffee
View file
Original file line number Diff line number Diff line change
Expand Up @@ -175,13 +175,13 @@ app.directive "quickDatepicker", ['ngQuickDateDefaults', '$filter', '$sce', (ngQ
# before passing it to the model.
ngModelCtrl.$parsers.push((viewVal) ->
if scope.required && !viewVal?
ngModelCtrl.$setValidity('required', false);
ngModelCtrl.$setValidity('required', false)
null
else if angular.isDate(viewVal)
ngModelCtrl.$setValidity('required', true);
ngModelCtrl.$setValidity('required', true)
viewVal
else if angular.isString(viewVal)
ngModelCtrl.$setValidity('required', true);
ngModelCtrl.$setValidity('required', true)
scope.parseDateFunction(viewVal)
else
null
Expand Down Expand Up @@ -215,8 +215,8 @@ app.directive "quickDatepicker", ['ngQuickDateDefaults', '$filter', '$sce', (ngQ
if compareTimes
(d1 - d2) == 0
else
d1 = stringToDate(d1);
d2 = stringToDate(d2);
d1 = stringToDate(d1)
d2 = stringToDate(d2)
d1 && d2 && (d1.getYear() == d2.getYear()) && (d1.getMonth() == d2.getMonth()) && (d1.getDate() == d2.getDate())

datesAreEqualToMinute = (d1, d2) ->
Expand All @@ -228,7 +228,6 @@ app.directive "quickDatepicker", ['ngQuickDateDefaults', '$filter', '$sce', (ngQ

# DATA WATCHES
# ==================================

# Called when the model is updated from outside the datepicker
ngModelCtrl.$render = ->
setCalendarDate(ngModelCtrl.$viewValue)
Expand Down Expand Up @@ -326,44 +325,7 @@ app.directive "quickDatepicker", ['ngQuickDateDefaults', '$filter', '$sce', (ngQ

# TEMPLATE
# ================================================================
template: """
<div class='quickdate'>
<a href='' ng-click='toggleCalendar()' class='quickdate-button' title='{{hoverText}}'><div ng-hide='iconClass' ng-bind-html='buttonIconHtml'></div>{{mainButtonStr}}</a>
<div class='quickdate-popup' ng-class='{open: calendarShown}'>
<a href='' tabindex='-1' class='quickdate-close' ng-click='toggleCalendar()'><div ng-bind-html='closeButtonHtml'></div></a>
<div class='quickdate-text-inputs'>
<div class='quickdate-input-wrapper'>
<label><span ng-bind-html='dateLabelHtml'></span></label>
<input class='quickdate-date-input' ng-class="{'ng-invalid': inputDateErr}" name='inputDate' type='text' ng-model='inputDate' placeholder='1/1/2013' ng-enter="selectDateFromInput(true)" ng-blur="selectDateFromInput(false)" on-tab='onDateInputTab()' />
</div>
<div class='quickdate-input-wrapper' ng-hide='disableTimepicker'>
<label><span ng-bind-html='timeLabelHtml'></span></label>
<input class='quickdate-time-input' ng-class="{'ng-invalid': inputTimeErr}" name='inputTime' type='text' ng-model='inputTime' placeholder='12:00 PM' ng-enter="selectDateFromInput(true)" ng-blur="selectDateFromInput(false)" on-tab='onTimeInputTab()'>
</div>
</div>
<div class='quickdate-calendar-header'>
<a href='' class='quickdate-prev-month quickdate-action-link' tabindex='-1' ng-click='prevMonth()'><div ng-bind-html='prevLinkHtml'></div></a>
<span class='quickdate-month'>{{calendarDate | date:'MMMM yyyy'}}</span>
<a href='' class='quickdate-next-month quickdate-action-link' ng-click='nextMonth()' tabindex='-1' ><div ng-bind-html='nextLinkHtml'></div></a>
</div>
<table class='quickdate-calendar'>
<thead>
<tr>
<th ng-repeat='day in dayAbbreviations track by $index'>{{day}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat='week in weeks'>
<td ng-mousedown='selectDate(day.date, true, true)' ng-click='$event.preventDefault()' ng-class='{"other-month": day.other, "disabled-date": day.disabled, "selected": day.selected, "is-today": day.today}' ng-repeat='day in week'>{{day.date | date:'d'}}</td>
</tr>
</tbody>
</table>
<div class='quickdate-popup-footer'>
<a href='' class='quickdate-clear' tabindex='-1' ng-hide='disableClearButton' ng-click='clear()'><span ng-bind-html='clearButtonHtml'></span></a>
</div>
</div>
</div>
"""
templateUrl: 'ngQuickDate/template.html'
]

app.directive 'ngEnter', ->
Expand All @@ -379,3 +341,47 @@ app.directive 'onTab', ->
element.bind 'keydown keypress', (e) ->
if (e.which == 9) && !e.shiftKey
scope.$apply(attr.onTab)

app.run ['$templateCache', ($templateCache) ->
$templateCache.put(
'ngQuickDate/template.html'
"""
<div class='quickdate'>
<a href='' ng-focus='toggleCalendar()' ng-click='toggleCalendar()' class='quickdate-button' title='{{hoverText}}'><div ng-hide='iconClass' ng-bind-html='buttonIconHtml'></div>{{mainButtonStr}}</a>
<div class='quickdate-popup' ng-class='{open: calendarShown}'>
<a href='' tabindex='-1' class='quickdate-close' ng-click='toggleCalendar()'><div ng-bind-html='closeButtonHtml'></div></a>
<div class='quickdate-text-inputs'>
<div class='quickdate-input-wrapper'>
<label>Date</label>
<input class='quickdate-date-input' ng-class="{'ng-invalid': inputDateErr}" name='inputDate' type='text' ng-model='inputDate' placeholder='1/1/2013' ng-enter="selectDateFromInput(true)" ng-blur="selectDateFromInput(false)" on-tab='onDateInputTab()' />
</div>
<div class='quickdate-input-wrapper' ng-hide='disableTimepicker'>
<label>Time</label>
<input class='quickdate-time-input' ng-class="{'ng-invalid': inputTimeErr}" name='inputTime' type='text' ng-model='inputTime' placeholder='12:00 PM' ng-enter="selectDateFromInput(true)" ng-blur="selectDateFromInput(false)" on-tab='onTimeInputTab()'>
</div>
</div>
<div class='quickdate-calendar-header'>
<a href='' class='quickdate-prev-month quickdate-action-link' tabindex='-1' ng-click='prevMonth()'><div ng-bind-html='prevLinkHtml'></div></a>
<span class='quickdate-month'>{{calendarDate | date:'MMMM yyyy'}}</span>
<a href='' class='quickdate-next-month quickdate-action-link' ng-click='nextMonth()' tabindex='-1' ><div ng-bind-html='nextLinkHtml'></div></a>
</div>
<table class='quickdate-calendar'>
<thead>
<tr>
<th ng-repeat='day in dayAbbreviations'>{{day}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat='week in weeks'>
<td ng-mousedown='selectDate(day.date, true, true)' ng-click='$event.preventDefault()' ng-class='{"other-month": day.other, "disabled-date": day.disabled, "selected": day.selected, "is-today": day.today}' ng-repeat='day in week'>{{day.date | date:'d'}}</td>
</tr>
</tbody>
</table>
<div class='quickdate-popup-footer'>
<a href='' class='quickdate-clear' tabindex='-1' ng-hide='disableClearButton' ng-click='clear()'>Clear</a>
</div>
</div>
</div>
"""
)
]

0 comments on commit 2d4d6fe

Please sign in to comment.