<nks-datetime-picker
v-model="endTime"
clearable
type="datetime"
:border="false"
placeholder="完成时间"
label="完成时间"
prop="endTime"
label-width="70px"
style="width: 300px"
/>
<template>
<uni-datetime-picker
v-model="value"
:class="{ 'nks-input-wrapper': border, 'nks-focus': isFocus, 'is-disabled': isDisabled }"
@show="handleFocus"
@change="handleBlur"
@maskClick="handleBlur"
:disabled="disabled"
>
<view
:style="{ width: labelWidth ? labelWidth + 'px' : '65px' }"
:class="`nks-label ${isRequired ? 'is-required' : ''}`"
>
{{ label }}
</view>
<view style="display: flex; flex: 1; align-items: center; justify-content: space-between">
<view style="position: relative; flex: 1">
<view>{{ value }}</view>
<view v-if="errorMessage" class="nks-calendar__error-message">{{ errorMessage }}</view>
</view>
<wd-icon name="arrow-right" color="rgb(0 0 0 / 25%)"></wd-icon>
</view>
</uni-datetime-picker>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import { useParent } from 'wot-design-uni/components/composables/useParent'
import { FORM_KEY } from 'wot-design-uni/components/wd-form/types'
// 定义 Props 接口
interface Props {
modelValue?: string | number | null
label?: string
labelWidth?: number | string
prop?: string
required?: boolean
rules?: any[]
disabled?: boolean | string
border?: boolean
}
// 使用 withDefaults 设置默认值
const props = withDefaults(defineProps<Props>(), {
modelValue: null,
label: '',
labelWidth: undefined,
prop: '',
required: false,
rules: () => [],
disabled: false,
border: true, // 设置默认值为 true
})
const emit = defineEmits(['update:modelValue'])
const value = ref(props.modelValue)
console.log('props.options', value.value, props.modelValue)
const isFocus = ref(false)
const handleFocus = () => {
isFocus.value = true
}
const handleBlur = () => {
isFocus.value = false
}
watch(value, (val) => {
emit('update:modelValue', val)
})
watch(
() => props.modelValue,
(val) => {
value.value = val
},
{ immediate: true, deep: true },
)
const { parent: form } = useParent(FORM_KEY)
// 表单校验错误信息
const errorMessage = computed(() => {
if (form && props.prop && form.errorMessages && form.errorMessages[props.prop]) {
return form.errorMessages[props.prop]
} else {
return ''
}
})
// 是否展示必填
const isRequired = computed(() => {
let formRequired = false
if (form && form.props.rules) {
const rules = form.props.rules
for (const key in rules) {
if (
Object.prototype.hasOwnProperty.call(rules, key) &&
key === props.prop &&
Array.isArray(rules[key])
) {
formRequired = rules[key].some((rule) => rule.required)
}
}
}
return props.required || props.rules?.some((rule) => rule.required) || formRequired
})
const isDisabled = computed(() => {
let result = false
props.disabled ? (result = true) : props.disabled === '' ? (result = true) : (result = false)
return result
})
console.info('props.disabled', props)
</script>
<style scoped lang="scss">
.nks-input-wrapper {
box-sizing: border-box;
align-items: center;
height: 46px;
padding: 0 var(--nks-padding);
line-height: 1.5;
color: var(--nks-text-color);
background-color: var(--nks-bg);
border: var(--nks-border);
border-radius: var(--nks-border-radius);
transition:
border-color 0.15s ease-in-out,
box-shadow 0.15s ease-in-out;
&.nks-focus {
border-color: var(--nks-border-color-focus);
}
&.is-not-empty:not(.is-disabled)::after {
background: none;
}
&.is-disabled {
// color: var(--nks-text-color-disable);
background-color: var(--nks-bg-disable);
border-color: var(--nks-border-color-disable);
}
:deep(.wd-input__suffix) {
line-height: inherit;
}
:deep(.wd-input__clear) {
vertical-align: auto;
}
::v-deep .wht-select-inner {
height: 100% !important;
background-color: initial !important;
border: none !important;
}
}
.wd-input.is-cell {
align-items: center;
}
::v-deep .uni-date-x--border {
border: none;
}
::v-deep .uni-date__x-input {
box-sizing: border-box;
height: 44px;
line-height: 44px;
}
::v-deep .uni-date-editor {
display: flex;
align-items: center;
height: 100%;
}
.nks-label {
position: relative;
margin-right: var(--wot-cell-padding, var(--wot-size-side-padding, 15px));
font-size: var(--nks-font-size);
font-weight: 600;
}
.nks-label.is-required {
padding-left: 12px;
}
.nks-calendar__error-message {
position: absolute;
bottom: -12px;
left: 0;
font-size: var(--wot-form-item-error-message-font-size, var(--wot-fs-secondary, 12px));
color: var(--wot-form-item-error-message-color, var(--wot-color-danger, #fa4350));
}
.nks-label.is-required::after {
position: absolute;
top: 2px;
left: 0;
font-size: var(--wot-cell-required-size, 18px);
line-height: 1.1;
color: var(--wot-cell-required-color, var(--wot-color-danger, #fa4350));
content: '*';
}
</style>
z***@163.com (作者)
发啦发啦 您看看
2025-04-10 15:48
DCloud_UNI_JBB
回复 z***@163.com: 你能发个可以复现的项目吗?现在内容有点乱,我也不清楚你的运行环境
2025-04-10 16:10
z***@163.com (作者)
回复 DCloud_UNI_JBB: 其实就是uni-datetime-picker日期选择器 这个组件
2025-04-10 16:36
DCloud_UNI_JBB
回复 z***@163.com: 暂时不支持调整时间选择框的位置
2025-04-10 20:12
z***@163.com (作者)
回复 DCloud_UNI_JBB: 好的吧 非常感谢!
2025-04-11 09:10