vue-date-range

Build Status Coverage Status

A vue component for choosing dates and date ranges. Uses Moment.js for date operations. Support Chinese lunar.

vue-date-range-demo.gif

Live Demo

use

npm

npm install vue-date-range

Calendar

<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

<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()
        }
      }
    },
  }
}

browser

Download vue-date-range.min.js from dist/ and import in your web page. Example:

...
<div id="calendarLunar" class="calendar-wrapper">
    <span></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></span>~<span></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

For Vue2.3.0+, we can use .sync modifier:

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

v-model

We can also use v-model modifier (these can be configured in 2.2.0+):

<calendar v-model="date"></calendar>
<date-range v-model="range"></date-range>

Props

Calendar

addr. language
da Danish
en English
es Spanish
fi Finnish
fr French
hr Hrvatski
it Italian
lt Lithuanian
nl Nederlandse
de German
pt-br Portuguese
vi Vietnamese
zh Chinese
ja Japanese
he Hebrew
cs Czech
ru Russian
bg Bulgarian
sv Swedish
th Thai
ro Roman
sl-si Slovenian
uk Ukrainian

DateRange

This component is build on Calendar, so it has all the props of Calendar except sync-date Also it has its specific props:

custom style

This is a day html structure example:

<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>

The span tag will has different classes (v-date-selected, v-date-passive, v-date-in-range, v-date-start-day, v-date-end-day) according to the dates selected.

You can set your custom style using these classes. e.g.:

.v-date-day-cell.v-date-start-day {
  border-bottom-left-radius: 50%;
  border-top-left-radius: 50%;
  background-color: transparent;
}
.v-date-day-cell.v-date-end-day {
  border-bottom-right-radius: 50%;
  border-top-right-radius: 50%;
  background-color: transparent;
}
.v-date-day-cell.v-date-in-range {
  background-color: orange;
}

Thanks

License

MIT