vue-datepicker-scroll v2.9.3

vue-datepicker-scroll

移动端简约的可滑动时间选择组件，支持同时选择日期和时间。

可以在GitHub中预览Demo效果，或者运行本项目。

Tips

该组件请在vue移动端使用，请先定义startDate和endDate变量（2019-11-11）格式的时间区间（也可以不传，分别为今天的前10天和后10天），最终返回的是时间格式的选中变量。具体参数请查看下方Options配置。

YYYY-MM-DD格式的时间，您可以使用dayjs或者moment.js格式化一下即可。

Install

npm install vue-datepicker-scroll

How to use?

1. 在main.js注册

// src/main.js
import Vue from 'vue'
import App from './App.vue'

import DatePickerScroll from "vue-datepicker-scroll";
Vue.use(DatePickerScroll)

···

2. 在组件中使用date-picker-scroll

// src/components/HelloWorld

<template>
  <div>
    <button @click="isPickerVisable=true">点击我选择</button>
    <p>{{selectedTime}}</p>

    <date-picker-scroll
      v-model="selectedTime"
      startDate="2019-11-10" // 不传的话为今天的前10天
      endDate="2019-11-25"   // 不传的话为今天的后10天
      :visible.sync="isPickerVisable"
      :onConfirm="handelConfirm"
    ></date-picker-scroll>

  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      isPickerVisable: false,
      selectedTime: new Date()
    };
  },
  methods: {
    handelConfirm(value) {
      this.selectedTime = value;
      console.log(this.selectedTime);
    }
  }
};
</script>

Options

Need demo?

You can also run this project, get a simple demo.

npm install
npm run serve

You can open http://localhost:8080/in your browser.

Contributing

Contributing Feel free to submit any fixes or propose any additional functionality via pull request or issue, making sure any changes take place in /src.

License

MIT