185 lines
4.4 KiB
Vue
185 lines
4.4 KiB
Vue
<template>
|
|
<view style="position: relative;" :style="{textAlign:left?'left':'right'}">
|
|
<input type="hidden" :name="name" :value="tvalue" style="display:none;" />
|
|
<input v-if="hasmore" type="hidden" :name="name+'_date1'" :value="date1" style="display:none;" />
|
|
<input v-if="hasmore" type="hidden" :name="name+'_date2'" :value="date2" style="display:none;" />
|
|
<input v-if="hasmore" type="hidden" :name="name+'_str1'" :value="todatetime(date1,btime?'':'d')" style="display:none;" />
|
|
<input v-if="hasmore" type="hidden" :name="name+'_str2'" :value="todatetime(date2,btime?'':'d')" style="display:none;" />
|
|
<ciy-inputdatetime :disabled="disabled" @change="chg" class="_dt" v-model="date1" :bordercolor="bordercolor" clearbtn :placeholder="placeholder" :btime="btime" :selectbg="selectbg" :selecttextcolor="selecttextcolor" :weekmonday="weekmonday" :diastema="diastema"></ciy-inputdatetime>
|
|
<view class="_spn">~</view>
|
|
<ciy-inputdatetime :disabled="disabled" @change="chg" class="_dt" v-model="date2" :bordercolor="bordercolor" clearbtn :placeholder="placeholder" :btime="btime" :selectbg="selectbg" :selecttextcolor="selecttextcolor" :weekmonday="weekmonday" :diastema="diastema"></ciy-inputdatetime>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
behaviors: ['uni://form-field-group'],
|
|
emits: ['change', 'update:modelValue'],
|
|
props: {
|
|
name: {
|
|
type: String
|
|
},
|
|
modelValue: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
value: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
initevent: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
hasmore: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
placeholder: {
|
|
type: String
|
|
},
|
|
btime: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
left: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
bordercolor: {
|
|
type: String,
|
|
default: 'var(--bg6)'
|
|
},
|
|
selecttextcolor: {
|
|
type: String,
|
|
default: 'var(--man5)'
|
|
},
|
|
selectbg: {
|
|
type: String,
|
|
default: 'var(--bg1)'
|
|
},
|
|
weekmonday: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
diastema: { //间隙
|
|
type: Number,
|
|
default: 16
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
v: '',
|
|
date1: 0,
|
|
date2: 0
|
|
};
|
|
},
|
|
watch: {
|
|
value: {
|
|
handler(newD, oldD) {
|
|
this.setvalue(newD, oldD);
|
|
},
|
|
immediate: true
|
|
},
|
|
modelValue: {
|
|
handler(newD, oldD) {
|
|
this.setvalue(newD, oldD);
|
|
},
|
|
immediate: true
|
|
},
|
|
},
|
|
computed: {
|
|
tvalue() {
|
|
if (this.date1 && this.date2) {
|
|
if (this.date1 < this.date2)
|
|
return this.todatetime(this.date1, this.btime ? '' : 'd') + '~' + this.todatetime(this.date2, this.btime ? '' : 'd');
|
|
else
|
|
return this.todatetime(this.date2, this.btime ? '' : 'd') + '~' + this.todatetime(this.date1, this.btime ? '' : 'd');
|
|
} else if (this.date1) {
|
|
return this.todatetime(this.date1, this.btime ? '' : 'd') + '~';
|
|
} else if (this.date2) {
|
|
return '~' + this.todatetime(this.date2, this.btime ? '' : 'd');
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
if (this.initevent) {
|
|
this.$emit('change', {
|
|
name: this.name,
|
|
from: 'init',
|
|
value: this.tvalue ? this.tvalue : '',
|
|
date1: this.date1,
|
|
date2: this.date2
|
|
});
|
|
}
|
|
},
|
|
methods: {
|
|
setvalue(val, old) {
|
|
var vals = (val || '').split('~');
|
|
if (vals.length < 2) {
|
|
if (this.date1 != 0)
|
|
this.date1 = 0;
|
|
if (this.date2 != 0)
|
|
this.date2 = 0;
|
|
return;
|
|
}
|
|
var date1 = new Date(vals[0]);
|
|
var date2 = new Date(vals[1]);
|
|
if (isNaN(date1.getTime()))
|
|
date1 = 0;
|
|
else
|
|
date1 = this.tostamp(date1);
|
|
if (isNaN(date2.getTime()))
|
|
date2 = 0;
|
|
else
|
|
date2 = this.tostamp(date2);
|
|
|
|
if (this.date1 != date1)
|
|
this.date1 = date1;
|
|
if (this.date2 != date2)
|
|
this.date2 = date2;
|
|
},
|
|
chg(e) {
|
|
if (e.from != 'done')
|
|
return;
|
|
this.$emit('update:modelValue', this.tvalue);
|
|
this.$emit('change', {
|
|
name: this.name,
|
|
from: 'value',
|
|
value: this.tvalue ? this.tvalue : '',
|
|
date1: this.date1,
|
|
date2: this.date2
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
._dt {
|
|
display: inline-block;
|
|
margin-left: 0.3em;
|
|
text-align: center;
|
|
padding: 0.5em;
|
|
border-radius: 0.5em;
|
|
}
|
|
|
|
._dtx {
|
|
min-width: 7em;
|
|
display: inline-block;
|
|
margin-left: 0.3em;
|
|
text-align: center;
|
|
background: var(--bg2);
|
|
border: 1px solid var(--bg6);
|
|
padding: 0.5em;
|
|
border-radius: 0.5em;
|
|
}
|
|
|
|
._spn {
|
|
display: inline-block;
|
|
margin: 0 0 0 0.3em;
|
|
}
|
|
</style> |