ngDatepicker.js 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  1. angular.module('jkuri.datepicker', [])
  2. .directive('ngDatepicker', ['$document', function($document) {
  3. 'use strict';
  4. var setScopeValues = function (scope, attrs) {
  5. scope.format = attrs.format || 'YYYY-MM-DD';
  6. scope.viewFormat = attrs.viewFormat || 'Do MMMM YYYY';
  7. scope.locale = attrs.locale || 'en';
  8. scope.firstWeekDaySunday = scope.$eval(attrs.firstWeekDaySunday) || false;
  9. scope.placeholder = attrs.placeholder || '';
  10. };
  11. return {
  12. restrict: 'EA',
  13. require: '?ngModel',
  14. scope: {},
  15. link: function (scope, element, attrs, ngModel) {
  16. setScopeValues(scope, attrs);
  17. scope.calendarOpened = false;
  18. scope.days = [];
  19. scope.dayNames = [];
  20. scope.viewValue = null;
  21. scope.dateValue = null;
  22. moment.locale(scope.locale);
  23. var date = moment();
  24. var generateCalendar = function (date) {
  25. var lastDayOfMonth = date.endOf('month').date(),
  26. month = date.month(),
  27. year = date.year(),
  28. n = 1;
  29. var firstWeekDay = scope.firstWeekDaySunday === true ? date.set('date', 2).day() : date.set('date', 1).day();
  30. if (firstWeekDay !== 1) {
  31. n -= firstWeekDay - 1;
  32. }
  33. //Code to fix date issue
  34. if(n==2)
  35. n = -5;
  36. scope.dateValue = date.format('MMMM YYYY');
  37. scope.days = [];
  38. for (var i = n; i <= lastDayOfMonth; i += 1) {
  39. if (i > 0) {
  40. scope.days.push({day: i, month: month + 1, year: year, enabled: true});
  41. } else {
  42. scope.days.push({day: null, month: null, year: null, enabled: false});
  43. }
  44. }
  45. };
  46. var generateDayNames = function () {
  47. var date = scope.firstWeekDaySunday === true ? moment('2015-06-07') : moment('2015-06-01');
  48. for (var i = 0; i < 7; i += 1) {
  49. scope.dayNames.push(date.format('ddd'));
  50. date.add('1', 'd');
  51. }
  52. };
  53. generateDayNames();
  54. scope.showCalendar = function () {
  55. scope.calendarOpened = true;
  56. generateCalendar(date);
  57. };
  58. scope.closeCalendar = function () {
  59. scope.calendarOpened = false;
  60. };
  61. scope.prevYear = function () {
  62. date.subtract(1, 'Y');
  63. generateCalendar(date);
  64. };
  65. scope.prevMonth = function () {
  66. date.subtract(1, 'M');
  67. generateCalendar(date);
  68. };
  69. scope.nextMonth = function () {
  70. date.add(1, 'M');
  71. generateCalendar(date);
  72. };
  73. scope.nextYear = function () {
  74. date.add(1, 'Y');
  75. generateCalendar(date);
  76. };
  77. scope.selectDate = function (event, date) {
  78. event.preventDefault();
  79. var selectedDate = moment(date.day + '.' + date.month + '.' + date.year, 'DD.MM.YYYY');
  80. ngModel.$setViewValue(selectedDate.format(scope.format));
  81. scope.viewValue = selectedDate.format(scope.viewFormat);
  82. scope.closeCalendar();
  83. };
  84. // if clicked outside of calendar
  85. var classList = ['ng-datepicker', 'ng-datepicker-input'];
  86. if (attrs.id !== undefined) classList.push(attrs.id);
  87. $document.on('click', function (e) {
  88. if (!scope.calendarOpened) return;
  89. var i = 0,
  90. element;
  91. if (!e.target) return;
  92. for (element = e.target; element; element = element.parentNode) {
  93. var id = element.id;
  94. var classNames = element.className;
  95. if (id !== undefined) {
  96. for (i = 0; i < classList.length; i += 1) {
  97. if (id.indexOf(classList[i]) > -1 || classNames.indexOf(classList[i]) > -1) {
  98. return;
  99. }
  100. }
  101. }
  102. }
  103. scope.closeCalendar();
  104. scope.$apply();
  105. });
  106. ngModel.$render = function () {
  107. var newValue = ngModel.$viewValue;
  108. if (newValue !== undefined) {
  109. scope.viewValue = moment(newValue).format(attrs.viewFormat);
  110. scope.dateValue = newValue;
  111. }
  112. };
  113. },
  114. template:
  115. '<div><input type="text" ng-focus="showCalendar()" ng-value="viewValue" class="ng-datepicker-input" placeholder="{{ placeholder }}"></div>' +
  116. '<div class="ng-datepicker" ng-show="calendarOpened">' +
  117. ' <div class="controls">' +
  118. ' <div class="left">' +
  119. ' <i class="fa fa-backward prev-year-btn" ng-click="prevYear()"></i>' +
  120. ' <i class="fa fa-angle-left prev-month-btn" ng-click="prevMonth()"></i>' +
  121. ' </div>' +
  122. ' <span class="date" ng-bind="dateValue"></span>' +
  123. ' <div class="right">' +
  124. ' <i class="fa fa-angle-right next-month-btn" ng-click="nextMonth()"></i>' +
  125. ' <i class="fa fa-forward next-year-btn" ng-click="nextYear()"></i>' +
  126. ' </div>' +
  127. ' </div>' +
  128. ' <div class="day-names">' +
  129. ' <span ng-repeat="dn in dayNames">' +
  130. ' <span>{{ dn }}</span>' +
  131. ' </span>' +
  132. ' </div>' +
  133. ' <div class="calendar">' +
  134. ' <span ng-repeat="d in days">' +
  135. ' <span class="day" ng-click="selectDate($event, d)" ng-class="{disabled: !d.enabled}">{{ d.day }}</span>' +
  136. ' </span>' +
  137. ' </div>' +
  138. '</div>'
  139. };
  140. }]);