Skip to content

E
ec-report-refactor
Commit 9a9926d4 authored by Jenny's avatar Jenny
Browse files
Options

feat: 日期组件增加清除按钮

parent c4cfc5c5
Hide whitespace changes
Inline Side-by-side
Showing with 148 additions and 105 deletions
components/DatePicker/DatePicker.vue
View file @ 9a9926d4
<template> <template>
<view class="timer"> <view class="timer">
<NormalTitle :elementInfo="elementInfo"></NormalTitle> <NormalTitle :elementInfo="elementInfo"></NormalTitle>
<view class="date-wrap"> <view class="input-group">
<u-input <u-input
style="width:100%" style="width: 100%"
placeholder="请输入日期" placeholder="请输入日期"
v-model="pickerValue" v-model="pickerValue"
type="select" type="select"
:select-open="show" :select-open="show"
:border="true" :border="true"
:borderColor="elementInfo.option.dateTime.borderColor" :borderColor="elementInfo.option.dateTime.borderColor"
:custom-style="{color: elementInfo.option.dateTime.color}" :custom-style="{ color: elementInfo.option.dateTime.color }"
@click="show = true" @click="show = true"
></u-input> ></u-input>
</view> <u-icon
<u-picker class="close-icon"
mode="time" v-if="pickerValue"
v-model="show" name="close-circle"
@confirm="timeConfirm" @click.prevent.stop="handleClearValue"
:default-time="pickerValue ? pickerValue : ''" ></u-icon>
:params="elementInfo.option.dateTime.showTime ? timeParams : dateParams" </view>
></u-picker> <u-picker
</view> mode="time"
v-model="show"
@confirm="timeConfirm"
:default-time="pickerValue ? pickerValue : ''"
:params="elementInfo.option.dateTime.showTime ? timeParams : dateParams"
></u-picker>
</view>
</template> </template>
<script> <script>
export default { export default {
name: "DatePicker", name: 'DatePicker',
props: { props: {
elementInfo: { elementInfo: {
type: Object, type: Object,
required: true required: true
} }
}, },
data() { data() {
return { return {
dateParams: { dateParams: {
year: true, year: true,
month: true, month: true,
day: true, day: true,
hour: false, hour: false,
minute: false, minute: false,
second: false second: false
}, },
timeParams: { timeParams: {
year: true, year: true,
month: true, month: true,
day: true, day: true,
hour: true, hour: true,
minute: true, minute: true,
second: true second: true
}, },
show: false, show: false,
pickerValue: '' pickerValue: ''
}
}; },
}, mounted() {
mounted() { let { date } = this.elementInfo.option.dateTime
let { date } = this.elementInfo.option.dateTime if (!date) date = new Date()
if(!date) date = new Date() this.pickerValue = this.dateTimeFormat(date)
this.pickerValue = this.dateTimeFormat(date) },
}, methods: {
methods: { timeConfirm(e) {
timeConfirm(e){ const year = e.year
const year = e.year const month = e.month
const month = e.month const day = e.day
const day = e.day const hour = e.hour
const hour =e.hour const minute = e.minute
const minute = e.minute const second = e.second
const second = e.second if (this.elementInfo.option.dateTime.showTime) {
if(this.elementInfo.option.dateTime.showTime) { this.pickerValue = `${year}-${month}-${day} ${hour}:${minute}:${second}`
this.pickerValue = `${year}-${month}-${day} ${hour}:${minute}:${second}` } else {
} else { this.pickerValue = `${year}-${month}-${day}`
this.pickerValue = `${year}-${month}-${day}` }
} this.handleEmitValue()
const { index, paramName, data } = this.elementInfo.child },
if(index.length) { handleEmitValue() {
uni.$emit('handleLinkParams', { index, paramName, value: this.pickerValue }) const { index, paramName } = this.elementInfo.child
} if (index.length) {
}, uni.$emit('handleLinkParams', {
// 日期时间格式化 index,
dateTimeFormat(val){ paramName,
const date = new Date(val) value: this.pickerValue
const year = date.getFullYear() })
// 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一 如 09:11:05 }
const month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1; },
const day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate(); /** 清除值 */
const hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(); handleClearValue() {
const minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(); this.pickerValue = ''
const seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds(); this.handleEmitValue()
// 拼接 },
if(this.elementInfo.option.dateTime.showTime) { // 日期时间格式化
return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds; dateTimeFormat(val) {
} const date = new Date(val)
return year + "-" + month + "-" + day; const year = date.getFullYear()
// 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一 如 09:11:05
}, const month =
} date.getMonth() + 1 < 10
} ? '0' + (date.getMonth() + 1)
: date.getMonth() + 1
const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
const hours =
date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
const minutes =
date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
const seconds =
date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
// 拼接
if (this.elementInfo.option.dateTime.showTime) {
return (
year +
'-' +
month +
'-' +
day +
' ' +
hours +
':' +
minutes +
':' +
seconds
)
}
return year + '-' + month + '-' + day
}
}
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.timer { .timer {
position: relative; position: relative;
z-index: 999999; z-index: 999999;
display: flex; display: flex;
flex-flow: column; flex-flow: column;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
} }
.input-group {
position: relative;
}
.close-icon {
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
z-index: 2;
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment