移动端非常简约的可滑动的同时包含日期和时间

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

预览效果如下：

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

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

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

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 Feel free to submit any fixes or propose any additional functionality via pull request or issue, making sure any changes take place in /src.

MIT