理工酷

验证日期范围

用于选择日期和日期范围的Vue组件。使用Moment.js进行日期操作。支持中国农历。

使用

npm

npm install vue-date-range

日历

<calendar class="calendar"
          :show-lunar="true"
          :first-day-of-week="1"
          :disable-days-before-today="disableDaysBeforeToday"
          :sync-date.sync="date"
          :lang="lang" @change="onChange"></calendar>
...
import {Calendar} from 'vue-date-range';
export default {
  components: {
    Calendar
  },
  data() {
    return {
      disableDaysBeforeToday: true,
      lang: 'zh',
      date: moment()
    };
  },
  methods: {
    onChange(date) {
      this.date = date;
    }
  }
}

日期范围

<daterange class="calendar" :sync-range.sync="range" :lang="lang" @change="onChange"></daterange>
...
import {DateRange} from 'vue-date-range';
export default {
  components: {
    DateRange
  },
  data() {
    return {
      lang: 'en',
      range: {
        startDate: moment(),
        endDate: moment().add(7, 'days')
      }
    };
  },
  methods: {
    onChange(range) {
      this.range = range;
    },
    setRange (p) {
      if (typeof p === 'number') {
        console.log(p)
        this.range = {
          startDate: moment().add(p, 'days'),
          endDate: moment()
        }
      }
    },
  }
}

浏览器

从dist /下载vue-date-range.min.js并导入网页。例子：

...
<div id="calendarLunar" class="calendar-wrapper">
    <span>{{date.format('YYYY-MM-DD')}}</span>
    <calendar class="calendar"
              :show-lunar="true"
              :first-day-of-week="1"
              :disable-days-before-today="disableDaysBeforeToday"
              :sync-date="date"
              :lang="lang" @change="onChange"></calendar>
</div>
...
<div id="range" class="calendar-wrapper">
    <span>{{range.startDate.format('YYYY-MM-DD')}}</span>~<span>{{range.endDate.format('YYYY-MM-DD')}}</span>
    <daterange class="calendar" :sync-range="range" :lang="lang" @change="onChange"></daterange>
    <button @click.stop.prevent="setRange(-7)">Last 7 days</button>
    <button @click.stop.prevent="setRange(-30)">Last 1 month</button>
</div>
...

<script src="//cdn.bootcss.com/moment.js/2.17.1/moment.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="../dist/vue-date-range.min.js"></script>
<script>
    new Vue({
        el: '#calendarLunar',
        components: {
          'calendar':daterange.Calendar
        },
        data() {
          return {
            disableDaysBeforeToday: true,
            lang: 'zh',
            date: moment()
          };
        },
        methods: {
          onChange(date) {
            this.date = date;
          }
        }
    });


    new Vue({
        el: '#range',
        components: {
            'daterange':daterange.DateRange
        },
        data() {
          return {
            lang: 'en',
            range: {
              startDate: moment(),
              endDate: moment().add(7, 'days')
            }
          };
        },
        methods: {
          onChange(range) {
            this.range = range;
          },
          setRange (p) {
            if (typeof p === 'number') {
              console.log(p)
              this.range = {
                startDate: moment().add(p, 'days'),
                endDate: moment()
              }
            }
          },
        }
    });
</script>

.sync

对于Vue2.3.0 +，我们可以使用.sync修饰符：

<calendar :sync-date.sync="date"></calendar>
<date-range :sync-range.sync="range"></date-range>

v-model

我们还可以使用v-model修饰符（可以在2.2.0+中进行配置）：

< Calendar  v-model = “ date” > < /日历> 
< date - range  v - model = “ range” > < / date-range >

道具

日历

• open-transition：是否打开转换。默认为true。
• show-lunar：显示月球或不显示。默认为false。
• 禁用今天之前的天数：是否禁用今天之前的天数。
• days-disabled-start：此天后禁用几天。
• days-disabled-end：在此日期之前禁用天数。
• disabled-func：用于决定是否禁用这一天。 ```javascript ... // set odd days to disabled disabledFunc: function (dayMoment) { var date = dayMoment.date() if (date % 2 === 1) {

   return true
  

  } return false } ...
• day-class-func：用于将类别添加到day。

  // add 'today, important' class to today 
    dayClassFunc: function (dayMoment) {
      if (dayMoment.format('YYYY-MM-DD') === moment().format('YYYY-MM-DD')) {
        return ['today', 'important']
      }
    }
  

• 设置一周的第一天。默认值为0（星期日）。
• month-year-format：月份和年份的显示格式。默认值为“ MM-YYYY”。
• lang：语言 ```
• 同步日期：默认选择的日期。可以用作日期（Vue 2.3.0+）的“双向绑定”。例如：

  < calendar  ：sync-date.sync =“ date ” > </ calendar >
  

• range：选定的日期范围。例如：

  range: {startDate: moment(), endDate: moment().add(7, 'days')}
  

• 每月特定天数：最初选定月份的任意一天。如果未设置，则等于value或syncDate或range.startDate或moment()。

日期范围

这个组件是建立在之上的Calendar，因此它Calendar除了具有所有其他道具外，sync-date 还具有其特定的道具：

• glowChangeOnStep0：如果设置为true，则将在选择一个日期后发出结果。或者在选择两个日期后发出结果。默认为false。
• sync-range：默认日期范围。可用作范围（Vue 2.3.0+）的“双向绑定”。例如：

  < date-range  ：sync-range.sync =“ range ” > </ date-range >
  

  定制风格

  这是一天的html结构示例：

  < span  title =“重阳” class =“ v-date-cell v-date-selected ” > 
  < div  class =“ v-date-cell-text ” > 
    < p  class =“ v-date-solar ” > 3 < / p > 
    < p  class =“ v-date-lunar ” >十八</ p > 
  </ div > 
  </ span >
  

  跨度标签将具有不同的类（v-date-selected，v-date-passive，v-date-in-range，v-date-start-day，v-date-end-day）根据所选择的日期。 可以使用这些类设置自定义样式。例如：

  .v-date-day-cell.v-date-start-day { 
  border-bottom-left-radius：50％; 
  border-top-left-radius：50％; 
  背景色：透明；
  } 
  .v-date-day-cell.v-date-end-day { 
  border-bottom-right-radius：50％; 
  右上边界半径：50％；
  背景色：透明；
  } 
  .v-date-day-cell.v-date-in-range { 
  background-color：orange; 
  }
  

转载自：https://github.com/ParadeTo/vue-date-range