php/www/vue/src/components/selectTime.vue

<template>
  <div class="picker-body">
    <!--日期-->
    <div class="picker-day-box">
      <div class=" picker-day">
        <ul class="row">
          <li class="col-md-3 day" v-for="item in dayNamesA">
            <span>{{item}}</span><br>
            <small>{{item}}</small>
          </li>
        </ul>
      </div>
    </div>
    <!--时间-->
    <div></div>
    <button @click="dayList">时间</button>
  </div>
</template>

<script type="es6">
  export default {
    name: 'selectTime',
    data () {
      return {
        dayNamesA: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
        dayNamesB: '今天'
      }
    },
    methods: {
      dayList: function () {
        /* get currentMonthLenght */
        let currentMonthLength = new Date(this.tmpYear, this.tmpMonth + 1, 0).getDate()
        /* get currentMonth day */
        let daylist = Array.from({length: currentMonthLength}, (value, index) => {
          return index + 1
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .picker-body {
    position: relative;
    width: 100%;
    .picker-day-box {
      position: relative;
      height: 70px;
      padding-left: 10px;
      padding-right: 10px;
      background: #fff;
      .picker-day {
        overflow-x: auto;
        width: 100%;
        height: 72px;
        ul {
          min-width: 560px;
          transition: all .3s linear;
          margin-right: 0;
          margin-left: 0;
          li.day {
            text-align: center;
            display: block;
            font-size: 16px;
            padding: 10px;
            float: left;
            width: 70px;
          }
          li.day.on {
            color: #5689d6;
          }
        }
      }
    }
  }
</style>