avue time picker limits time range (time after today, current month, remaining time in current month)

The time picker is an indispensable component when making a project. Today, I will briefly give a few commonly used examples for reference.

<avue-form v-model="form" :option="option"></avue-form>

<script>
export default {
    data() {
      return {
        form:{},
        option:{
          column: [{
              label: "禁止日期(只能今天以后的日期)",
              prop: "date",
              type: "date",  
              format: 'YYYY-MM-DD',
              valueFormat: 'YYYY-MM-DD',
              disabledDate(time) {
                return time.getTime() < Date.now();
              },
          },{
              label: "禁止日期(只能选择当前月)",
              prop: "date",
              type: "date",  
              format: 'YYYY-MM-DD',
              valueFormat: 'YYYY-MM-DD',
              disabledDate(time) {
                const today = new Date();
                const lastDay = new Date(today.getFullYear(), today.getMonth() + 1, 0);
                return time.getTime() < Date.now() || time.getTime() > lastDay.getTime();
              },
          }]
        },
      };
    }
}
</script>

Renderings:

 

 ​​​​​​​