CODEWITHSUNDEEP
vuejs2datepickervue-componentelement-ui
uoraa
uoraa

Reputation: 3

Disable every Monday in element-ui datepicker

If I want to disable every Monday or every Monday and Tuesday, then how would I do that in the datepicker for element-ui?

There's no documentation on disabling days of the week that I can find. 

data() {return { calendarOptions: { disabledDate: function(time) { return time.getTime() < Date.now();},},}}

Upvotes: 0

Views: 2206

Answers (1)

sugars
sugars

Reputation: 1493

var Main = {
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return new Date(time).getDay() === 1;
        }
      },
      value1: ''
    };
  }
};
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
@import url("//unpkg.com/[email protected]/lib/theme-chalk/index.css");
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
  <template>
  <div class="block">
    <span class="demonstration">Default</span>
    <el-date-picker
      v-model="value1"
      type="date"
      placeholder="Pick a day"
      :picker-options="pickerOptions">
    </el-date-picker>
  </div>
</template>
</div>

The disabledDate option can be set to disable. You only need to determine if the current date is Monday, then return true to disable it.

Upvotes: 2

Related Questions