使用Vux的Datetime以及XNumber组件实现日期联动

实现效果

知识储备

XNumber组件

安装

局部注册：

import { XNumber } from 'vux'

export default {
  components: {
    XNumber
  }
}

全局注册：

// 在入口文件全局引入

import Vue from 'vue'
import { XNumber } from 'vux'

Vue.component('x-number', XNumber)

使用

注：x-number只能在Group中使用

属性

名字	类型	默认值	说明	版本要求
value	number	0	表单值，使用v-model绑定	--
title	string		标题	--
min	number		最小值	--
max	number		最大值	--
step	number	1	步长	--
fillable	boolean	false	是否可填写	--
width	string	50px	输入框宽度	--
button-style	string	square	按钮样式，可选值为square或者round	--
align	string	right	按钮部分位置，默认在右边(right)，可选值为left和right	--

   

样式变量

 

名字	默认值	说明	继承自变量
@number-button-font-color	#3cc51f	--
@number-input-font-color	#666	--
@number-button-enabled-border-color	#ececec	--
@number-square-button-enabled-border-color	#ececec	--	@number-button-enabled-border-color
@number-round-button-enabled-border-color	#3cc51f	--	@number-button-font-color
@number-button-disabled-border-color	#ececec	--	@number-button-enabled-border-color
@number-round-button-disabled-border-color	#ececec	--	@number-button-enabled-border-color

Demo源码

Default:
  zh-CN: 默认
Quantity:
  zh-CN: 数量
listen:
  en: listen to on-change events (printed on console)
  zh-CN: 监听 on-change 事件，在调试窗口中输出
set width=100px:
  zh-CN: 设置宽度为100px
set step=0.5:
  zh-CN: 设置步长为0.5
set value=1, min=-5 and max=8:
  zh-CN: 设置值为1，最小值为-5，最大值为8
fillable = true:
  zh-CN: 设置可以输入
use with other group elements:
  zh-CN: 和其他group子元素一起使用
Switch Component:
  zh-CN: Switch 组件
round style:
  zh-CN: 圆形按钮

Datetime组件

安装

局部注册：

import { Datetime } from 'vux'

export default {
  components: {
    Datetime
  }
}

全局注册：

// 在入口文件全局引入

import Vue from 'vue'
import { Datetime } from 'vux'

Vue.component('datetime', Datetime)

使用

需要在Group组件内使用

该组件支持以Plugin形式调用

// 以 plugin 形式使用时，请在入口处引入：
import { DatetimePlugin } from 'vux'
Vue.use(DatetimePlugin)

// 组件内使用
this.$vux.datetime.show({
  value: '', // 其他参数同 props
  onHide () {
    const _this = this
  },
  onShow () {
    const _this = this
  }
})

this.$vux.datetime.hide()

属性

参考官方文档：

https://doc.vux.li/zh-CN/components/datetime.html

事件

 

名字	参数	说明	版本要求
@on-change	(value)	表单值变化时触发, 参数 (newVal)	--
@on-clear	--	点击显示在中间的自定义按钮时触发	--
@on-show	--	弹窗显示时触发	--
@on-hide	(type), type is one of [cancel, confirm]	弹窗关闭时触发	v2.7.4
@on-cancel	--	点击取消按钮或者遮罩时触发，等同于事件 on-hide(cancel)	v2.7.4
@on-confirm	(value) v2.9.0 支持该参数	点击确定按钮时触发，等同于事件 on-hide(confirm)	v2.7.4

Demo源码

'Default format: YYYY-MM-DD':
  zh-CN: 默认格式：YYYY-MM-DD
Format:
  zh-CN: 格式
Start time:
  zh-CN: 开始时间
Placeholder:
  zh-CN: 提示文字
Please select:
  zh-CN: 请选择
Set min-year and max-year:
  zh-CN: 设置开始和结束年份
Years after 2000:
  zh-CN: 2000年以后的时间
Specified template text in Chinese:
  zh-CN: 自定义中文显示模板
Show center button and clear the value:
  zh-CN: 显示中间的清除按钮
Show center button to set date to today:
  zh-CN: 显示中间的设置日期为今天的按钮
Birthday:
  zh-CN: 生日
Chinese:
  zh-CN: 中文
Click me:
  zh-CN: 点我
Custom trigger slot:
  zh-CN: 自定义触发内容
Define range of hours:
  zh-CN: 限定小时范围
'Working hours: 09-18':
  zh-CN: 工作时间为 09-18
Set start-date and end-date:
  zh-CN: 设置开始时间和结束日期
'Click to change value to: 2017-11-11':
  zh-CN: 设置时间为 2017-11-11
Format display value:
  zh-CN: 格式化显示
Toggle format:
  zh-CN: 改变格式
'Custom minute list: every 15 minutes':
  zh-CN: 自定义分钟列表（每15分钟）
Custom hour list:
  zh-CN: 定义小时列表
'Use prop: show.sync (vue^2.3) to control visibility':
  zh-CN: '使用 prop: show.sync 控制显示(vue^2.3)'
Used as a plugin:
  zh-CN: 插件形式调用
Set default-selected-value to 2017-11-11:
  zh-CN: 设置默认选中值为 2017-11-11
'Prop: compute-hours-function':
  zh-CN: 自定义小时列表生成逻辑
'Prop: compute-days-function':
  zh-CN: 自定义日期列表生成逻辑
Toggle readonly:
  zh-CN: 切换 readonly 属性
'Set value: 2017-11-11':
  zh-CN: 设置时间为2017-11-11
Set end-date only:
  zh-CN: 只设置结束时间

实现日期联动

在vue单页面中 

注：

v-if:业务需求，当为2时才显示这个控件

title:要显示的标题

width:宽度

:min:最小值为1，不能再往下减

@on-change:发生改变时执行的方法

 v-model：绑定的v-model的值

然后在data中声明：

 

 data() {
      return {   
        demandForm: {
          tripDays: 1,    
          goStartTime: '',
          goEndTime: '',
          returnStartTime: '',
          returnEndTime: '',
          demandCloseTime: '',
        }
      }
}

当x-number的值发生改变时，会执行changeReturnDate方法，所以在此方法中：

methods: {
      changeReturnDate(){
       if(this.demandForm.tripDays!=''&&this.demandForm.goStartTime!=''){
          var goStartTime=new Date(this.demandForm.goStartTime)
          var returnStartTime=new Date(this.demandForm.returnStartTime)
          returnStartTime=new Date(goStartTime.getTime() +this.demandForm.tripDays * 24 * 60 * 60 * 1000);
          this.demandForm.returnStartTime=dateFormat(returnStartTime, 'YYYY-MM-DD').toString();
        }
       if(this.demandForm.tripDays!=''&&this.demandForm.goEndTime!=''){
          var goEndTime=new Date(this.demandForm.goEndTime)
          var returnEndTime=new Date(this.demandForm.returnEndTime)
          returnEndTime=new Date(goEndTime.getTime()+this.demandForm.tripDays* 24 * 60 * 60 * 1000);
          this.demandForm.returnEndTime=dateFormat(returnEndTime, 'YYYY-MM-DD').toString();
        }
      },

注：

if(出行天数不为空&&去程开始时间不为空){

获取去程开始时间并转化为Date格式;

获取返程开始时间并转化为Date格式;

返程开始时间=转化为Date(去程开始时间的毫秒基数+去程天数的毫秒数)；

返程开始时间=按指定格式格式化后的时间并转换为String格式；

}

下面返程结束时间同理。

注意:

使用JS 获取去程开始时间n天后的时间：

 var nTime=new Date(goStartTime.getTime() +n* 24 * 60 * 60 * 1000);