<!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 */