Ohm-Management - Projektarbeit B-ME
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

VDatePickerDateTable.js 4.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. // Mixins
  2. import DatePickerTable from './mixins/date-picker-table';
  3. // Utils
  4. import { pad, createNativeLocaleFormatter, monthChange } from './util';
  5. import { createRange } from '../../util/helpers';
  6. import mixins from '../../util/mixins';
  7. export default mixins(DatePickerTable
  8. /* @vue/component */
  9. ).extend({
  10. name: 'v-date-picker-date-table',
  11. props: {
  12. firstDayOfWeek: {
  13. type: [String, Number],
  14. default: 0
  15. },
  16. showWeek: Boolean,
  17. weekdayFormat: Function
  18. },
  19. computed: {
  20. formatter: function formatter() {
  21. return this.format || createNativeLocaleFormatter(this.locale, { day: 'numeric', timeZone: 'UTC' }, { start: 8, length: 2 });
  22. },
  23. weekdayFormatter: function weekdayFormatter() {
  24. return this.weekdayFormat || createNativeLocaleFormatter(this.locale, { weekday: 'narrow', timeZone: 'UTC' });
  25. },
  26. weekDays: function weekDays() {
  27. var _this = this;
  28. var first = parseInt(this.firstDayOfWeek, 10);
  29. return this.weekdayFormatter ? createRange(7).map(function (i) {
  30. return _this.weekdayFormatter('2017-01-' + (first + i + 15));
  31. }) // 2017-01-15 is Sunday
  32. : createRange(7).map(function (i) {
  33. return ['S', 'M', 'T', 'W', 'T', 'F', 'S'][(i + first) % 7];
  34. });
  35. }
  36. },
  37. methods: {
  38. calculateTableDate: function calculateTableDate(delta) {
  39. return monthChange(this.tableDate, Math.sign(delta || 1));
  40. },
  41. genTHead: function genTHead() {
  42. var _this2 = this;
  43. var days = this.weekDays.map(function (day) {
  44. return _this2.$createElement('th', day);
  45. });
  46. this.showWeek && days.unshift(this.$createElement('th'));
  47. return this.$createElement('thead', this.genTR(days));
  48. },
  49. // Returns number of the days from the firstDayOfWeek to the first day of the current month
  50. weekDaysBeforeFirstDayOfTheMonth: function weekDaysBeforeFirstDayOfTheMonth() {
  51. var firstDayOfTheMonth = new Date(this.displayedYear + '-' + pad(this.displayedMonth + 1) + '-01T00:00:00+00:00');
  52. var weekDay = firstDayOfTheMonth.getUTCDay();
  53. return (weekDay - parseInt(this.firstDayOfWeek) + 7) % 7;
  54. },
  55. getWeekNumber: function getWeekNumber() {
  56. var dayOfYear = [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334][this.displayedMonth];
  57. if (this.displayedMonth > 1 && (this.displayedYear % 4 === 0 && this.displayedYear % 100 !== 0 || this.displayedYear % 400 === 0)) {
  58. dayOfYear++;
  59. }
  60. var offset = (this.displayedYear + (this.displayedYear - 1 >> 2) - Math.floor((this.displayedYear - 1) / 100) + Math.floor((this.displayedYear - 1) / 400) - Number(this.firstDayOfWeek)) % 7; // https://en.wikipedia.org/wiki/Zeller%27s_congruence
  61. return Math.floor((dayOfYear + offset) / 7) + 1;
  62. },
  63. genWeekNumber: function genWeekNumber(weekNumber) {
  64. return this.$createElement('td', [this.$createElement('small', {
  65. staticClass: 'v-date-picker-table--date__week'
  66. }, String(weekNumber).padStart(2, '0'))]);
  67. },
  68. genTBody: function genTBody() {
  69. var children = [];
  70. var daysInMonth = new Date(this.displayedYear, this.displayedMonth + 1, 0).getDate();
  71. var rows = [];
  72. var day = this.weekDaysBeforeFirstDayOfTheMonth();
  73. var weekNumber = this.getWeekNumber();
  74. this.showWeek && rows.push(this.genWeekNumber(weekNumber++));
  75. while (day--) {
  76. rows.push(this.$createElement('td'));
  77. }for (day = 1; day <= daysInMonth; day++) {
  78. var date = this.displayedYear + '-' + pad(this.displayedMonth + 1) + '-' + pad(day);
  79. rows.push(this.$createElement('td', [this.genButton(date, true, 'date', this.formatter)]));
  80. if (rows.length % (this.showWeek ? 8 : 7) === 0) {
  81. children.push(this.genTR(rows));
  82. rows = [];
  83. day < daysInMonth && this.showWeek && rows.push(this.genWeekNumber(weekNumber++));
  84. }
  85. }
  86. if (rows.length) {
  87. children.push(this.genTR(rows));
  88. }
  89. return this.$createElement('tbody', children);
  90. },
  91. genTR: function genTR(children) {
  92. return [this.$createElement('tr', children)];
  93. }
  94. },
  95. render: function render() {
  96. return this.genTable('v-date-picker-table v-date-picker-table--date', [this.genTHead(), this.genTBody()], this.calculateTableDate);
  97. }
  98. });
  99. //# sourceMappingURL=VDatePickerDateTable.js.map