diff --git a/bower.json b/bower.json index 29db6fe..90d189e 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "ng-utc-datepicker", - "version": "1.0.2", + "version": "1.1.0", "description": "A simple Angular 1.x datepicker directive that exclusively uses UTC", "main": [ "src/js/ngUtcDatepicker.js", diff --git a/index.html b/index.html index ef4019f..057ca55 100644 --- a/index.html +++ b/index.html @@ -2,17 +2,247 @@ Angular UTC Datepicker - + + + -
- - +
+
+

Angular UTC Datepicker

+
    +
  • Works with Angular 1.x
    • +
  • Doesn't require jQuery UI, Bootstrap, etc.
    • +
  • Only does UTC
    • +
+

The calendar will display above the input if it's close to the bottom of the page, and can be closed by clicking elsewhere or pressing the ESC key.

+
+
+

Demos

+

Basic datepicker

+ + 
<input ng-utc-datepicker ng-model="vm.date"/>
+
+

Datepicker with trigger element

+ + + 
<button id="icon"><i class="fa fa-calendar"></i></button>
<input ng-utc-datepicker
+        data-trigger="btn-icon"
+        ng-model="vm.date"/>
+
+

Datepicker with trigger element and custom format

+ + + 
<input ng-utc-datepicker
+        data-trigger="btn-text"
+        data-format="MM/DD/YYYY HH:mm:ss"
+        ng-model="vm.date"/>
<button id="btn-text">Show Calendar</button>
+
- - + + ' }; @@ -80,16 +80,30 @@ var generateCalendar = function (date) { ctrl.days = []; - var momentDate = typeof date === 'string' ? moment.utc(date, ctrl.format) : moment.utc(date), + var isISOString = moment.utc(date, 'YYYY-MM-DD[T]HH:mm:ss.SSS[Z]').toISOString() === date, + momentDate = isISOString ? moment.utc(date) : moment.utc(date, ctrl.format), lastMonth = moment.utc(momentDate).subtract(1, 'M'), + nextMonth = moment.utc(momentDate).add(1, 'M'), month = moment.utc(momentDate).month() + 1, year = moment.utc(momentDate).year(), - firstWeekDay = 1 - moment.utc(momentDate).startOf('M').isoWeekday(); - - for (var i = firstWeekDay; i <= moment.utc(momentDate).endOf('M').date(); i++) { - if (i > 0) { - ctrl.days.push({ day: i, month: month, year: year, enabled: 'ng-utc_enabled', selected: moment.utc($scope.date, ctrl.format).isSame(moment.utc(year + '-' + month + '-' + i, 'YYYY-M-D'), 'day') ? 'ng-utc_selected' : 'ng-utc_unselected' }); + firstWeekDay = 1 - moment.utc(momentDate).startOf('M').isoWeekday(), + totalDays = (42 + firstWeekDay) - 1; // 7 columns X 6 rows + + for (var i = firstWeekDay; i <= totalDays; i++) { + if (i > 0 && i <= moment.utc(momentDate).endOf('M').date()) { + // current month + ctrl.days.push({ + day: i, + month: month, + year: year, + enabled: 'ng-utc_enabled', + selected: moment.utc($scope.date, ctrl.format).isSame(moment.utc(year + '-' + month + '-' + i, 'YYYY-M-D'), 'day') ? 'ng-utc_selected' : 'ng-utc_unselected' + }); + } else if (i > moment.utc(momentDate).endOf('M').date()) { + // next month + ctrl.days.push({ day: i - momentDate.endOf('M').date(), month: nextMonth.month() + 1, year: nextMonth.year(), enabled: 'ng-utc_disabled', selected: 'ng-utc_unselected' }); } else { + // last month ctrl.days.push({ day: lastMonth.endOf('M').date() - (0 - i), month: lastMonth.month() + 1, year: lastMonth.year(), enabled: 'ng-utc_disabled', selected: 'ng-utc_unselected' }); } }