<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-infinite-scroll@2.0.2/vue-infinite-scroll.min.js">
</script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app">
<div>
getFirstDay {{ getFirstDay }}<br>
getLastDay{{ getLastDay }}<br>
getWeekDaysRangeOfMonth {{ getWeekDaysRangeOfMonth }}<br>
getTotalWeeks {{ getTotalWeeks }}<br>
<br><br><br>
week: {{ week }} <br>
month: {{ month }} <br>
year: {{ year }} <br>
total days {{ totalDay }}
<br>
Years
<select v-model='year'>
<option v-for="val in years" selected>{{val}} </option>
</select>
Months
<select v-model='month'>
<option v-for="val in months" selected>{{val}} </option>
</select>
Select week
<select v-model='week'>
<option v-for="val in getWeekDaysRangeOfMonth" >{{val.start}} - {{val.end}} or {{ val.start_day }} - {{ val.end_day }}</option>
</select>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
var app = new Vue({
el: '#app',
data: {
message: "welcome to vuejs",
year: 2018,
month: 03,
week: 01,
monthName: [
],
months: [
01,
02,
03,
04,
05,
06,
07,
08,
09,
10,
11,
12,
],
years: [
2018,
2019,
2020,
2021,
2022,
],
totalDay: 0,
},
computed: {
getFirstDay: function() {
return 1;
},
getLastDay: function() {
let month = this.month;
let year = this.year;
let date = new Date(year, month, 0);
return date.getDate();
},
getWeekDaysRangeOfMonth: function() {
let month = this.month;
let year = this.year;
let weeks = [],
firstDate = new Date(year, month, 1),
lastDate = new Date(year, month, 0),
numDays = lastDate.getDate();
let week_end = 1;
let week_start = 1;
let week_start_day = this.myDate(year + '-' + month + '-1');
let week_end_day = '';
let start = 1;
let end = this.endFirstWeek(firstDate, 2);
this.totalDay = numDays;
while (start <= numDays) {
let date = year + "-" + month + "-" + start;
let day = this.myDate(date);
if (day === 'Sunday') {
week_start = start;
week_start_day = day;
} else if (day === 'Saturday') {
week_end_day = day;
week_end = start;
weeks.push({
start: week_start,
end: week_end,
start_day: week_start_day,
end_day: week_end_day
});
} else if (start >= numDays) {
week_end = start;
week_end_day = this.myDate(date);
weeks.push({
start: week_start,
end: week_end,
start_day: week_start_day,
end_day: week_end_day
});
}
start++;
}
return weeks;
},
getTotalWeeks: function() {
let month = this.month;
let year = this.year;
var firstOfMonth = new Date(year, month - 1, 1);
var lastOfMonth = new Date(year, month, 0);
var used = firstOfMonth.getDay() + lastOfMonth.getDate();
return Math.ceil(used / 7);
}
},
methods: {
endFirstWeek: function(firstDate, firstDay) {
if (!firstDay) {
return 7 - firstDate.getDay();
}
if (firstDate.getDay() < firstDay) {
return firstDay - firstDate.getDay();
} else {
return 7 - firstDate.getDay() + firstDay;
}
},
myDate: function(date) {
let a = new Date(date);
let days = new Array(7);
days[0] = "Sunday";
days[1] = "Monday";
days[2] = "Tuesday";
days[3] = "Wednesday";
days[4] = "Thursday";
days[5] = "Friday";
days[6] = "Saturday";
let r = days[a.getDay()];
return r;
// document.getElementById("myId").innerHTML = r;
}
}
});
/* Styles go here */