uu
This commit is contained in:
aihe
parent
94c2adc382
commit
976dbafcb1
121
components/tpx-date-input/demo-datetime-picker.vue
Normal file
121
components/tpx-date-input/demo-datetime-picker.vue
Normal file
@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<view class="page container">
|
||||
<uni-card :is-shadow="false" is-full>
|
||||
<text class="uni-h6">可以同时选择日期和时间的选择器</text>
|
||||
</uni-card>
|
||||
<uni-section :title="'日期用法：' + dateString" type="line"></uni-section>
|
||||
<view class="example-body">
|
||||
<uni-datetime-picker type="date" :clear-icon="false" v-model="dateString" @maskClick="maskClick" />
|
||||
</view>
|
||||
<uni-section :title="'日期时间用法：' + datetimeString" type="line"></uni-section>
|
||||
<view class="example-body">
|
||||
<uni-datetime-picker type="datetime" :start="start" :end="end" v-model="datetimeString" @change="change" />
|
||||
</view>
|
||||
<uni-section :title="'日期时间 default-value：' + datetimeDefaultValueString" type="line"></uni-section>
|
||||
<view class="example-body">
|
||||
<uni-datetime-picker type="datetime" :start="start" :end="end" :default-value="datetimeDefaultValue" v-model="datetimeDefaultValueString" @change="change" />
|
||||
</view>
|
||||
<uni-section :title="'日期范围用法：' + '[' + dateRange + ']'" type="line"></uni-section>
|
||||
<view class="example-body">
|
||||
<uni-datetime-picker v-model="dateRange" type="daterange" @maskClick="maskClick" />
|
||||
</view>
|
||||
<uni-section :title="'日期时间范围用法：' + '[' + datetimeRange + ']' " type="line"></uni-section>
|
||||
<view class="example-body">
|
||||
<uni-datetime-picker v-model="datetimeRange" type="datetimerange" rangeSeparator="至" />
|
||||
</view>
|
||||
<uni-section :title="'时间戳用法：' + dateTimestamp" type="line"></uni-section>
|
||||
<view class="example-body">
|
||||
<uni-datetime-picker returnType="timestamp" v-model="dateTimestamp" @change="change" />
|
||||
</view>
|
||||
<uni-section :title="'date 对象用法：' + dateInstance" type="line"></uni-section>
|
||||
<view class="example-body">
|
||||
<uni-datetime-picker type="datetime" returnType="date" v-model="dateInstance" @change="change" />
|
||||
</view>
|
||||
<uni-section :title="'插槽用法：' + dateString" type="line"></uni-section>
|
||||
<view class="example-body">
|
||||
<uni-datetime-picker v-model="dateString">我是一个插槽，点击我</uni-datetime-picker>
|
||||
</view>
|
||||
<uni-section :title="'无边框用法：' + dateString" type="line"></uni-section>
|
||||
<view class="example-body">
|
||||
<uni-datetime-picker v-model="dateString" :border="false" />
|
||||
</view>
|
||||
<uni-section :title="'隐藏清除按钮用法：' + dateString" type="line"></uni-section>
|
||||
<view class="example-body">
|
||||
<uni-datetime-picker v-model="dateString" :clearIcon="false" />
|
||||
</view>
|
||||
<uni-section :title="'disabled用法：' + dateString" type="line"></uni-section>
|
||||
<view class="example-body">
|
||||
<uni-datetime-picker v-model="dateString" disabled />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dateString: this.getDateTime(new Date()),
|
||||
datetimeString: this.getDateTime(new Date(), false),
|
||||
datetimeDefaultValueString: '',
|
||||
datetimeDefaultValue: this.getDateTime(Date.now() + 1 * 24 * 3600000),
|
||||
dateTimestamp: Date.now(),
|
||||
dateInstance: new Date(),
|
||||
dateRange: [this.getDate(Date.now() - 5 * 24 * 3600000), this.getDate(Date.now() + 5 * 24 * 3600000)],
|
||||
datetimeRange: [this.getDateTime(Date.now() - 5 * 24 * 3600000), this.getDateTime(Date.now() + 5 * 24 * 3600000)],
|
||||
start: Date.now() - 10 * 24 * 3600000,
|
||||
end: Date.now() + 10 * 24 * 3600000
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
datetimeString() {
|
||||
console.log('日期时间单选:', this.datetimeString);
|
||||
},
|
||||
dateRange() {
|
||||
console.log('日期范围选:', this.dateRange);
|
||||
},
|
||||
datetimeRange() {
|
||||
console.log('日期时间范围选:', this.datetimeRange);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change(e) {
|
||||
console.log('----change事件:', e);
|
||||
},
|
||||
maskClick() {
|
||||
console.log('----maskClick事件');
|
||||
},
|
||||
getDateTime(date, addZero = true){
|
||||
return `${this.getDate(date, addZero)} ${this.getTime(date, addZero)}`
|
||||
},
|
||||
getDate(date, addZero = true){
|
||||
date = new Date(date)
|
||||
const year = date.getFullYear()
|
||||
const month = date.getMonth()+1
|
||||
const day = date.getDate()
|
||||
return `${year}-${addZero ? this.addZero(month) : month}-${addZero ? this.addZero(day) : day}`
|
||||
},
|
||||
getTime(date, addZero = true){
|
||||
date = new Date(date)
|
||||
const hour = date.getHours()
|
||||
const minute = date.getMinutes()
|
||||
const second = date.getSeconds()
|
||||
return this.hideSecond ?
|
||||
`${addZero ? this.addZero(hour) : hour}:${addZero ? this.addZero(minute) : minute}` :
|
||||
`${addZero ? this.addZero(hour) : hour}:${addZero ? this.addZero(minute) : minute}:${addZero ? this.addZero(second) : second}`
|
||||
},
|
||||
addZero(num) {
|
||||
if (num < 10) {
|
||||
num = `0${num}`
|
||||
}
|
||||
return num
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.example-body {
|
||||
background-color: #fff;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
@ -18,19 +18,30 @@
|
||||
</view>
|
||||
<!-- 日历 -->
|
||||
<view v-if="showCladar">
|
||||
<u-calendar title="请选择日期范围" :minDate="minDate" :monthNum="monthNum" color="#B12D29" :mode="mode" rowHeight="90" closeOnClickOverlay :show="showCladar" :defaultDate="value" @confirm="handleClaOk" @close="handleSwitchCladar"
|
||||
></u-calendar>
|
||||
<uni-datetime-picker ref="unDateTimePckRef" @maskClick="handleClaClose"
|
||||
:start="minDate" :end="maxDate" v-model="proxyValue"
|
||||
:type="mode" @change="handleClaValChange"
|
||||
:placeholder="placeholder"
|
||||
>
|
||||
<!-- 使用自定义显示 -->
|
||||
<view></view>
|
||||
</uni-datetime-picker>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { } from "@/common/untool"
|
||||
// uni-datetime-picker 插件地址： https://ext.dcloud.net.cn/plugin?id=3962
|
||||
import dayjs from "dayjs"
|
||||
const formatStr = 'YYYY-MM-DD'
|
||||
|
||||
export default {
|
||||
computed: {
|
||||
proxyValue: {
|
||||
get() {
|
||||
return this.value
|
||||
}
|
||||
},
|
||||
inputValue() {
|
||||
let val = this.value
|
||||
if(Array.isArray(val)) {
|
||||
@ -66,14 +77,14 @@
|
||||
return dayjs().subtract(12, 'months').format(`${formatStr}`)
|
||||
}
|
||||
},
|
||||
monthNum: {
|
||||
maxDate: {
|
||||
default() {
|
||||
return 24
|
||||
return dayjs().add(12, 'months').format(`${formatStr}`)
|
||||
}
|
||||
},
|
||||
mode: {
|
||||
default() {
|
||||
return 'range' // single | multiple | range
|
||||
return 'datetimerange' // datetime | date | datetimerange
|
||||
}
|
||||
},
|
||||
customStyle:{
|
||||
@ -124,26 +135,39 @@
|
||||
this.handleSwitchCladar()
|
||||
},
|
||||
handleChange(val){
|
||||
val[0] = dayjs(val[0]).format(`${formatStr} 00:00:00`)
|
||||
val[1] = dayjs(val[1]).format(`${formatStr} 23:59:59`)
|
||||
// 补全 时间戳
|
||||
if(val[0].indexOf(":") == -1) {
|
||||
val[0] = dayjs(val[0]).format(`${formatStr} 00:00:00`)
|
||||
}
|
||||
if(val[1].indexOf(":") == -1) {
|
||||
val[1] = dayjs(val[1]).format(`${formatStr} 23:59:59`)
|
||||
}
|
||||
this.$emit('change', val)
|
||||
this.$emit('update:value', val)
|
||||
},
|
||||
handleClaOk(res){
|
||||
handleClaValChange(res) {
|
||||
const ary = Object.values(res)
|
||||
const val = [ary[0], ary[ary.length-1]]
|
||||
this.handleChange(val)
|
||||
},
|
||||
handleClaClose(res){
|
||||
this.handleSwitchCladar()
|
||||
},
|
||||
handleSwitchCladar() {
|
||||
this.showCladar = !this.showCladar
|
||||
// 手动唤起日期事件
|
||||
setTimeout(()=> {
|
||||
if(this.showCladar) {
|
||||
this.$refs.unDateTimePckRef.show()
|
||||
}
|
||||
}, 300)
|
||||
},
|
||||
handleToolsRangChange(val) {
|
||||
if(val == -1) {
|
||||
this.handleSwitchCladar()
|
||||
} else {
|
||||
let sltRang = this.toolsRangesList.filter(t=> t.val == val)[0].range
|
||||
this.handleChange(sltRang)
|
||||
this.handleChange(sltRang, )
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@ import en from './en.json'
|
||||
import zhHans from './zh-Hans.json'
|
||||
import zhHant from './zh-Hant.json'
|
||||
export default {
|
||||
'zh-Hans': zhHans, // 硬重置 中文 语言包顺序， 默认中文
|
||||
en,
|
||||
'zh-Hans': zhHans,
|
||||
'zh-Hant': zhHant
|
||||
}
|
||||
|
||||
@ -105,7 +105,7 @@
|
||||
:startPlaceholder="startPlaceholder" :endPlaceholder="endPlaceholder"
|
||||
:default-value="defaultValue"
|
||||
:pleStatus="endMultipleStatus" :showMonth="false" :range="isRange" :hasTime="hasTime" :insert="false"
|
||||
:hideSecond="hideSecond" @confirm="mobileChange" @maskClose="close" />
|
||||
:hideSecond="hideSecond" @confirm="mobileChange" @maskClose="close" @close="close"/>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
@ -625,12 +625,14 @@
|
||||
this.endMultipleStatus = Object.assign({}, this.endMultipleStatus, obj)
|
||||
},
|
||||
mobileChange(e) {
|
||||
this.close()
|
||||
|
||||
if (this.isRange) {
|
||||
const {before, after} = e.range
|
||||
|
||||
if(!before || !after){
|
||||
return
|
||||
}
|
||||
if(!before || !after){
|
||||
return
|
||||
}
|
||||
|
||||
this.handleStartAndEnd(before, after, true)
|
||||
if (this.hasTime) {
|
||||
@ -650,7 +652,6 @@
|
||||
}
|
||||
this.setEmit(this.displayValue)
|
||||
}
|
||||
this.$refs.mobile.close()
|
||||
},
|
||||
rangeChange(before, after) {
|
||||
if (!(before && after)) return
|
||||
|
||||
Loading…
Reference in New Issue
Block a user