# vue-mobiscroll-range

**Repository Path**: zbproject/vue-mobiscroll-range

## Basic Information

- **Project Name**: vue-mobiscroll-range
- **Description**:  vue-mobiscroll-range 选择日期范围
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 5
- **Forks**: 2
- **Created**: 2017-05-19
- **Last Updated**: 2021-06-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

 **介绍：本项目非组件形式存在 在VUE。本项目 源于mobiscroll3.2 javascript版本。通过绑定dom的形式实现日期选择。** 

首先感谢 Mobiscroll 汉化破解作者提供插件，Q群：20420014

@Version	 v3.2.0

@Demo	        [https://demo.mobiscroll.com/](https://demo.mobiscroll.com/)

@项目地址	[https://coding.net/u/mobiscroll/p/projects](https://coding.net/u/mobiscroll/p/projects)

@中文文档	[http://www.mobiscroll.cn](http://www.mobiscroll.cn)

@英文文档	[http://docs.mobiscroll.com](http://docs.mobiscroll.com)


刚用Vue做项目就以个人觉得最快的方式实现。不喜勿喷。
适用于我这样才入 Vue的人，下面我大致说下使用方式。

![](https://git.oschina.net/uploads/images/2017/0520/115243_af97442b_1314078.png "示例")

 **使用步骤** 

1：导入mobiscroll。在index.html 中导入静态资源，或者在main.js中导入也可以。

例如
```
<link rel="stylesheet" href="/static/Javascript-master/css/mobiscroll.javascript.min.css">

<script src="/static/Javascript-master/js/mobiscroll.javascript.min.js"></script>
```

---------------------------------------
2：使用插件。
在页面挂载完成过后使用(mounted 方法中)。

例如 我有两个对象需要用户交互后弹出此插件。class 为starttime and endtime。

    mobiscroll.range('.starttime,.endtime', {//创建mobiscroll
        theme: 'material',//显示模式
        lang: 'zh',//语言
        display: 'center',//显示位置
        controls: ['calendar'],//日历选择的格式 目前为 年月日
        min: new Date(),//最小日期
        max: setDateTime(),//最大日期 这里的 setDateTime方法是我处理日期的一个方法。需要自定义
        defaultValue: [ setDateTime("",1), setDateTime("",2)],//设置默认值
        onSet: function (event, inst) {//确定后设置值
            //inst.getVal() 拿到选中后的对象（时间格式需要进行处理）。
            //that.starttime=(inst.getVal()[0]).getTime();//选择后设置
            //that.endtime=(inst.getVal()[1]).getTime();//选选择后设置值
        }
     });
------------
大功告成,你可以尽情的使用此插件。

ps：如有问题下载本demo 演示即可,其实以我目前的理解在Vue里面可以嵌入任何dom操作。不过既然是一款组件化的框架。我并不建议这样去做。好好学习！加油