0
点赞
收藏
分享

微信扫一扫

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


实现效果

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

知识储备

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中使用

<group>
<x-number title="title" v-model="value"></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源码

<template>
<div>
<group :title="$t('Default')">
<x-number :name="$t('Quantity')" :title="$t('Quantity')"></x-number>
</group>

<group :title="$t('listen')">
<x-number :title="$t('Quantity')" v-model="changeValue" :min="0" @on-change="change"></x-number>
</group>

<group :title="$t('set width=100px')">
<x-number :title="$t('Quantity')" width="100px"></x-number>
</group>

<group :title="$t('round style')">
<x-number :title="$t('Quantity')" v-model="roundValue" button-style="round" :min="0" :max="5"></x-number>
</group>

<group :title="$t('set step=0.5')">
<x-number :title="$t('Quantity')" :step="0.5"></x-number>
</group>

<group :title="$t('set value=1, min=-5 and max=8')">
<x-number :title="$t('Quantity')" :min="-5" :max="8" :value="1"></x-number>
</group>

<group :title="$t('fillable = true')">
<x-number :value="10" :title="$t('Quantity')" fillable></x-number>
</group>

</div>
</template>

<i18n>
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: 圆形按钮
</i18n>

<script>
import { Group, XNumber, XSwitch, Divider } from 'vux'

export default {
components: {
XNumber,
Group,
XSwitch,
Divider
},
data () {
return {
changeValue: 0,
roundValue: 0
}
},
methods: {
change (val) {
console.log('change', val)
}
}
}
</script>

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源码

<template>
<div>
<div style="padding:15px;">
<x-button type="primary" plain @click.native="showPlugin">{{ $t('Used as a plugin') }}</x-button>
</div>

<group :title="$t('Default format: YYYY-MM-DD')">
<datetime
v-model="value1"
@on-change="change"
:title="$t('Birthday')"
@on-cancel="log('cancel')"
@on-confirm="onConfirm"
@on-hide="log('hide', $event)"></datetime>
</group>

<group :title="$t('Custom minute list: every 15 minutes')">
<datetime v-model="minuteListValue" format="YYYY-MM-DD HH:mm" :minute-list="['00', '15', '30', '45']" @on-change="change" :title="$t('Birthday')"></datetime>
</group>

<group :title="$t('Custom hour list')">
<datetime v-model="hourListValue" format="YYYY-MM-DD HH:mm" :hour-list="['09', '10', '11', '12', '13', '14', '15', '16']" :minute-list="['00', '15', '30', '45']" @on-change="change" :title="$t('Birthday')"></datetime>
</group>

<group title="Readonly">
<datetime v-model="valueReadonly" :readonly="readonly" @on-change="change" :title="$t('Birthday')"></datetime>
</group>
<div style="padding:15px">
<x-button type="primary" plain @click.native="readonly = !readonly"> {{ $t('Toggle readonly') }} </x-button>
</div>

<group :title="$t('Format display value')">
<datetime v-model="formatValue" :display-format="formatValueFunction" @on-change="change" :title="$t('Birthday')"></datetime>
</group>

<div style="padding:15px;">
<x-button type="primary" @click.native="formatValue = '2017-11-11'">{{ $t('Set value: 2017-11-11') }}</x-button>
</div>

<group :title="$t('Define range of hours')">
<datetime v-model="limitHourValue" format="YYYY-MM-DD HH:mm" :min-hour=9 :max-hour=18 @on-change="change" :title="$t('Define range of hours')" :inline-desc="$t('Working hours: 09-18')"></datetime>
</group>

<group :title="$t('Set start-date and end-date') + ' 2015-11-11 ~ 2017-10-11'">
<datetime v-model="limitHourValue" :start-date="startDate" :end-date="endDate" format="YYYY-MM-DD HH:mm" @on-change="change" :title="$t('Start time')"></datetime>
</group>

<group :title="$t('Set end-date only') + ' 2017-10-11'">
<datetime v-model="onlySetEndDateValue" :end-date="onlySetEndDate" format="YYYY-MM-DD HH:mm" @on-change="change" :title="$t('Start time')"></datetime>
</group>

<group :title="$t('Format') + ': ' + format">
<datetime v-model="value2" :format="format" @on-change="change" :title="$t('Start time')"></datetime>
</group>

<div style="padding:15px;">
<x-button type="primary" @click.native="toggleFormat">{{ $t('Toggle format') }}</x-button>
</div>

<group title="noon">
<datetime title="noon" v-model="noonValue" format="YYYY-MM-DD A"></datetime>
</group>

<group :title="$t('Placeholder')">
<datetime v-model="value3" default-selected-value="2017-06-18 13" format="YYYY-MM-DD HH" :placeholder="$t('Please select')" @on-change="change" :title="$t('Start time')"></datetime>
</group>

<group :title="$t('Set default-selected-value to 2017-11-11')">
<datetime v-model="value3_1" default-selected-value="2017-11-11" format="YYYY-MM-DD" :placeholder="$t('Please select')" @on-change="change" :title="$t('Start time')" :inline-desc=" $t('Current value') + `: ${value3_1}`"></datetime>
</group>

<group :title="$t('Set min-year and max-year')">
<datetime v-model="value4" :placeholder="$t('Please select')" :min-year=2000 :max-year=2016 format="YYYY-MM-DD HH:mm" @on-change="change" :title="$t('Years after 2000')"></datetime>
</group>

<group :title="$t('Prop: compute-hours-function')">
<datetime format="YYYY-MM-DD HH" v-model="computeHoursValue" :compute-hours-function="computeHoursFunction" :title="$t('Birthday')" @on-change="change"></datetime>
</group>

<group :title="$t('Prop: compute-days-function')">
<datetime format="YYYY-MM-DD HH" v-model="computeDaysValue" :compute-days-function="computeDaysFunction" :title="$t('Birthday')" @on-change="change"></datetime>
</group>

<group :title="$t('Specified template text in Chinese')">
<datetime v-model="value5" :placeholder="$t('Please select')" :min-year=2000 :max-year=2016 format="YYYY-MM-DD HH:mm" @on-change="change" :title="$t('Chinese')" year-row="{value}年" month-row="{value}月" day-row="{value}日" hour-row="{value}点" minute-row="{value}分" confirm-text="完成" cancel-text="取消"></datetime>
</group>

<group :title="$t('Show center button and clear the value')">
<datetime v-model="value6" @on-change="change" :title="$t('Birthday')" clear-text="clear" @on-clear="clearValue"></datetime>
</group>

<group :title="$t('Show center button to set date to today')">
<datetime v-model="value7" @on-change="change" :title="$t('Birthday')" clear-text="today" @on-clear="setToday"></datetime>
</group>

<group :title="$t('Custom trigger slot')">
<datetime v-model="value7" @on-change="change" :title="$t('Birthday')" clear-text="today" @on-clear="setToday">
<x-button>{{$t('Click me')}}</x-button>
</datetime>
</group>

<group :title="$t('Required')">
<datetime v-model="value8" :title="$t('Required')" clear-text="clear" @on-clear="clearValue8" :required="true"></datetime>
</group>

<group :title="$t('Use prop: show.sync (vue^2.3) to control visibility')">
<datetime v-model="value9" @on-change="change" :title="$t('Birthday')" :show.sync="visibility"></datetime>
</group>

<div style="padding:15px;">
<x-button type="primary" plain @click.native="visibility = true">显示</x-button>
</div>

<group :title="$t('Default format: YYYY-MM-DD')">
<datetime
:order-map="{
year: 3,
month: 2,
day: 1
}"
v-model="value1"
@on-change="change"
title="customize column order"
@on-cancel="log('cancel')"
@on-confirm="onConfirm"
@on-hide="log('hide', $event)"></datetime>
</group>


</div>
</template>

<i18n>
'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: 只设置结束时间
</i18n>

<script>
import { Datetime, Group, XButton } from 'vux'

export default {
components: {
Datetime,
Group,
XButton
},
data () {
return {
noonValue: '2018-04-13 PM',
readonly: true,
minuteListValue: '2017-06-12 09:00',
hourListValue: '2017-06-12 09:00',
format: 'YYYY-MM-DD HH:mm',
value1: '2015-11-12',
valueReadonly: '2015-11-12',
value2: '',
value3: '',
value3_1: '',
value4: '',
value5: '',
value6: '2016-08-18',
value7: '',
value8: '',
limitHourValue: '',
startDate: '2015-11-11',
endDate: '2017-10-11',
formatValue: '2017-10-11',
formatValueFunction (val) {
return val.replace(/-/g, '$')
},
value9: '',
visibility: false,
computeHoursValue: '',
computeDaysValue: '',
computeHoursFunction (date, isToday, generateRange) {
if (isToday) {
return generateRange(new Date().getHours(), 23)
} else {
return generateRange(0, 23)
}
},
computeDaysFunction (options, generateRange) {
return [options.month] // if current month is n, days are [n]
},
onlySetEndDate: '2017-10-11',
onlySetEndDateValue: ''
}
},
methods: {
log (str1, str2 = '') {
console.log(str1, str2)
},
onConfirm (val) {
console.log('on-confirm arg', val)
console.log('current value', this.value1)
},
showPlugin () {
this.$vux.datetime.show({
cancelText: '取消',
confirmText: '确定',
format: 'YYYY-MM-DD HH',
value: '2017-05-20 18',
onConfirm (val) {
console.log('plugin confirm', val)
},
onShow () {
console.log('plugin show')
},
onHide () {
console.log('plugin hide')
}
})
},
toggleFormat () {
if (this.format === 'YYYY-MM-DD') {
this.format = 'YYYY-MM-DD HH:mm'
} else if (this.format === 'YYYY-MM-DD HH:mm') {
this.format = 'YYYY-MM-DD'
}
},
change (value) {
console.log('change', value)
},
clearValue (value) {
this.value6 = ''
},
clearValue8 (value) {
this.value8 = ''
},
setToday (value) {
let now = new Date()
let cmonth = now.getMonth() + 1
let day = now.getDate()
if (cmonth < 10) cmonth = '0' + cmonth
if (day < 10) day = '0' + day
this.value7 = now.getFullYear() + '-' + cmonth + '-' + day
console.log('set today ok')
}
}
}
</script>

<style scoped lang="less">
.center {
padding-top: 10px;
padding-left: 15px;
color: green;
}
</style>

实现日期联动

在vue单页面中 

<group class="mt_cd_0">

<x-number class= " h_36em pb_0 pt_0"v-if="demandForm.flightTypeArray==2" title="出行天数" width="50px" :min="1"
@on-change="changeReturnDate"
v-model="demandForm.tripDays"></x-number>
</group>

注:

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);

 

举报

相关推荐

0 条评论