vue 项目中使用mobiscroll calendar

在 vue 项目中使用mobiscroll calendar

• 在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', // 语言
          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. onSet 函数会返回所选中的值:  event 如下图

修改组件样式

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