vue-xdate

a component to pick date in x-scroll mode;

install

npm install --save vue-xdate

demo

if you want to view the demo, you should clone this repo to local by git clone;

and then you should install vue-cli global:

npm install -g vue-cli

after that you watch the demo by

npm run serve

now you will see the demo in the browser;

useage

<template>
  <div class="app">
    <div class="demo">
      <xdate class="demo-slot"
        :date="date"
        :min="min"
        :max="max"
        @select="select"
      >
        <template v-slot:default="{ item }">
          <p>{{item.ymdw.y}}</p>
          <p>{{getDateStr(item.id)}}</p>
          <p>{{getWeekStr(item.id)}}</p>
        </template>
      </xdate>
    </div>
  </div>
</template>

<script>
import moment from 'moment';
import Xdate from "../src/xdate.vue";
export default {
  components: {
    Xdate
  },
  data () {
    const mDate = moment();
    return {
      date: mDate.format('YYYY-MM-DD'),
      max: mDate.add(20, 'days').format('YYYY-MM-DD'),
      min: mDate.subtract(40, 'days').format('YYYY-MM-DD'),
    }
  },
  methods: {
    getDateStr (date) {
      return moment(date).format('MM月DD日');
    },
    getWeekStr (date) {
      return '周' + ('日一二三四五六')[moment(date).day()];
    },
    select (item) {
      alert(`你选择了${item.id}`);
    }
  }
}
</script>

props

date

the date that is default selected.

type: String, it should be 'YYYY-MM-DD'.

default: today's 'YYYY-MM-DD'.

min

the min date loaded. if not specified, the date will always load when scroll right;

type: String, it should be 'YYYY-MM-DD'.

max

the max date loaded. if not specified, the date will always load when scroll left;

type: String, it should be 'YYYY-MM-DD'.

isDisable

a function that descide a date item is disable, if return true, the date item will not be select.

note: althrough it is disable, the select event will be emit, because maybe you want to do something when user click the item. you can use the arguments to confirm the disable state;

type: function

default: () => false;

slot

a date item data will pass to the slot you can use that data to render that date item you want;

in default, it will only show month and date, <p>MM-DD</p>.

event

select

arguments: dateItemInfo;

dateItemInfo: {
  id: 'YYYY-MM-DD',
  ymdw: {
    y: number, // year
    m: number, // month
    d: number, // date
    w: number // week day
  }
}