vue 项目中使用mobiscroll calendar

在vue 项目中使用 mobiscroll calendar

准备

	1. 首先在项目中引入jquery cdn 或静态资源 
	2. 下载 mobiscroll .js 和 mobiscroll .css    引入js和css

初始化组件

		import Mobiscroll from '.......'  // 从某个文件夹引人入
		Mobiscroll.calendar('#id', { 
          theme: 'android-holo-light',  // 组件类型
          lang: 'zh', // 语言
          // buttons: buttons,
          display: 'center', // 组件显示位置
          headerText: '<div style="color: #000;">选择时间</div>{value}', // 头部内容 {value} 为选中日期
          dateOrder: 'yyyy-mm-dd', 
          dateFormat: 'yyyy-mm-dd',
          animate: false, 
          controls: ['calendar'], // 控制 这里只使用了 calendar  还有 date 等
          min: new Date(),  // 最小时间范围  在calendar  中只能用 min 不能使用 minDate
          max: new Date(),  // 最大时间范围  在calendar  中只能用 max不能使用 maxDate
          defaultValue: new Date(), // 默认显示时间
          onSet: function (event, inst) {  // 选中后执行  // 有event 和 inst 两个参数
	        console.log(event);
	        console.log(inst);
		  }
        });

	描述: 
		1.这里为了展示onSet 方法直接使用了function函数的写法 在实际vue项目使用过程中可以使用的写法进行
	 	此时就可以进行之后的操作了  
	 	2. 此处的buttons可以进行自定义日历组件按钮 , buttons 是数组类型, 默认是 ['set', 'cancel']; 代表确定和取消
	 	可以通过数组对象进行自定义 例如: [{
								          text: '自定义',
								          // cssClass: 'own-color',
								          handler: this.handler
								        }, {
								          text: '确定',
								          handler: 'set'
								          // cssClass: 'own-color'
								        }, 'cancel']
			其中 "text" 是自定义按钮名称; "handler" 是自定义按钮事件,  可以是字符串(必须是组件自带事件才可以用字符串代替);  
			cssCalss 是自定义的class名.
	 	3. onSet 函数会返回所选中的值:  event 如下图

修改组件样式

可以用过 引入的css文件对组件样式进行修改