En el desarrollo de proyectos de sistemas de gestión, el uso del selector de fecha y hora de la biblioteca elementUi es el más común y más utilizado, si necesita usarlo, es muy engorroso escribir uno por uno y no es conveniente usarlo. está empaquetado en un componente, es fácil de administrar. Simplemente use este componente y llámelo. can use.
Subcomponente:
el tipo de visualización de tipo puede ser año/mes/fecha/semana/fechahora/rango de fechahora/
valor de rango de fechasFormato de formato de valor vinculante, generalmente el formato de datos de los parámetros pasados al selector de fondoOpciones
: tecla de acceso directo y elemento de configuración
predeterminadoTiempo: después de seleccionar la fecha El formato de datos de tiempo específico predeterminado es una matriz ['00:00:00', '23:59:59']
<div>
<el-date-picker
@change="changeTimeValue"
v-model="selectTimeDate"
:type="type"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:value-format="valueFormat"
:picker-options="pickerOptions"
:default-time="defaultTime"
>
</el-date-picker>
<script>
export default {
props: {
type: {
type: String,
required: true
},
valueFormat: {
type: String,
default: ''
},
pickerOptions: {
type: Object,
default: () => {
return {}
}
},
defaultTime: {
type: Array,
default: () => {
return []
}
},
vModel: {
type: Array,
default: () => {
return []
}
},
},
data() {
return {
selectTimeDate: []
}
},
watch: {
vModel(val) {
this.selectTimeDate = val
}
},
methods: {
changeTimeValue(val) {
this.$emit('changeTimeValue', val)
}
}
}
</script>
componente principal:
<data-picker
:type="'datetimerange'"
:valueFormat="'yyyy-MM-dd HH:mm:ss'"
:pickerOptions="pickerOptions"
:defaultTime="['00:00:00','23:59:59']"
@changeTimeValue="changeTimeValue"
:vModel="dateTimeRangeVal"
></data-picker>
<script>
import dataPicker from '@/components/dataPicker.vue'
export default {
components: {
dataPicker
},
data() {
return {
pickerOptions: {
shortcuts: [{
text: '今天',
onClick(picker) {
const end = new Date();
const start = new Date(new Date(new Date().getTime()).setHours(0, 0, 0, 0));
picker.$emit('pick', [start, end]);
}
}, {
text: '昨天',
onClick(picker) {
const start=new Date(new Date(new Date().getTime()-24*60*60*1000).setHours(0, 0, 0, 0));
const end=new Date(new Date(new Date().getTime()-24*60*60*1000).setHours(23, 59, 59, 999));
picker.$emit('pick', [start, end]);
}
},{
text: '最近一周',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近一个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近三个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]);
}
}]
},
dateTimeRangeVal: []
}
},
methods: {
// 子组件传过来的值 以下是对选着的值最大区间限制在6个月之内 不需要直接赋值就行
changeTimeValue(val) {
if(val) {
let min = new Date(val[0])
let max = new Date(val[1])
let now = new Date()
let min6 = new Date(Date.now() - (30 * 24 * 3600 * 1000)*6)
let timeSection = new Date((max.valueOf() - (30 * 24 * 3600 * 1000)*6)).Format("yyyy-MM-dd hh:mm:ss.S")
let cha = (max.getFullYear() - min.getFullYear() > 0) ? (max.getMonth() + (max.getFullYear() - min.getFullYear()) * 12) : (max.getMonth() - min.getMonth())
if(max>now && min > min6) {
this.dateTimeRangeVal = [min.Format("yyyy-MM-dd hh:mm:ss.S"), now.Format("yyyy-MM-dd hh:mm:ss.S")]
} else if(max > now && min < min6) {
this.dateTimeRangeVal = [min6.Format("yyyy-MM-dd hh:mm:ss.S"), now.Format("yyyy-MM-dd hh:mm:ss.S")]
}else if(cha > 6 && max<now) {
this.dateTimeRangeVal = [timeSection, max.Format("yyyy-MM-dd hh:mm:ss.S")]
} else {
this.dateTimeRangeVal = [min.Format("yyyy-MM-dd hh:mm:ss.S"), max.Format("yyyy-MM-dd hh:mm:ss.S")]
}
}
}
}
}
</script>