maestro-server/bootue

<div class="datepicker">
  <input class="form-control datepicker-input" type="text"
         v-model="val"
         :class="{'with-reset-button': clearButton}"
         :placeholder="placeholder"
         :style="{width:width}"
         @click="inputClick"
  />
  <button v-if="clearButton&&val" type="button" class="close" @click="val = ''">
    <span>&times;</span>
  </button>
  <div class="datepicker-popup" v-show="displayDayView">
    <div class="datepicker-inner">
      <div class="datepicker-body">
        <div class="datepicker-ctrl">
          <span :class="preBtnClasses" aria-hidden="true" @click="preNextMonthClick(0)"></span>
          <span :class="nextBtnClasses" aria-hidden="true" @click="preNextMonthClick(1)"></span>
          <p @click="switchMonthView">{{stringifyDayHeader(currDate)}}</p>
        </div>
        <div class="datepicker-weekRange">
          <span v-for="w in text.daysOfWeek">{{w}}</span>
        </div>
        <div class="datepicker-dateRange">
          <span v-for="d in dateRange" :class="d.sclass" @click="daySelect(d)">{{d.text}}</span>
        </div>
      </div>
    </div>
  </div>
  <div class="datepicker-popup" v-show="displayMonthView">
    <div class="datepicker-inner">
      <div class="datepicker-body">
        <div class="datepicker-ctrl">
          <span :class="preBtnClasses" aria-hidden="true" @click="preNextYearClick(0)"></span>
          <span :class="nextBtnClasses" aria-hidden="true" @click="preNextYearClick(1)"></span>
          <p @click="switchDecadeView">{{stringifyYearHeader(currDate)}}</p>
        </div>
        <div class="datepicker-monthRange">
          <template v-for="(m, index) in text.months">
              <span v-text="m.substr(0,3)"
                    :class="{'datepicker-dateRange-item-active':
                  (text.months[parse(val).getMonth()] === m) &&
                  currDate.getFullYear() === parse(val).getFullYear()}"
                    @click="monthSelect(index)"
              ></span>
          </template>
        </div>
      </div>
    </div>
  </div>
  <div class="datepicker-popup" v-show="displayYearView">
    <div class="datepicker-inner">
      <div class="datepicker-body">
        <div class="datepicker-ctrl">
          <span :class="preBtnClasses" aria-hidden="true" @click="preNextDecadeClick(0)"></span>
          <span :class="nextBtnClasses" aria-hidden="true" @click="preNextDecadeClick(1)"></span>
          <p>{{stringifyDecadeHeader(currDate)}}</p>
        </div>
        <div class="datepicker-monthRange decadeRange">
          <template v-for="decade in decadeRange">
              <span :class="{'datepicker-dateRange-item-active':parse(val).getFullYear() === decade.text}"
                    v-text="decade.text"
                    @click.stop="yearSelect(decade.text)"
              ></span>
          </template>
        </div>
      </div>
    </div>
  </div>
</div>