更新记录

1.0.0（2024-01-02） 下载此版本

初版

平台兼容性

uni-app

其他

x-time-picker

只支持vue3，使用最新的顶层语法编写

uniapp 日期时间选择器

• 可选择年, 月, 日, 时, 分, 秒
• 可选择阳历阴历
• 支持自定义样式，边框，背景，字体等

演示效果图

属性说明

完整示例

注意你的组件位置

<template>
  <view class="wrap">
    <button type="default" @click="openDatetimePicker">生日选择器</button>

    <view>支持农历/公历</view>

    <text style="padding: 20px; color: red; font-size: 18px"
      >返回的对象值：</text
    >
    <text style="padding: 20px; color: red; font-size: 18px">{{
      JSON.stringify(md.timeObj, null, "  ")
    }}</text>

    <DateTimePicker
      ref="myPickerRef"
      @submit="handleSubmit"
      title="生日选择器"
      maskBgColor="rgba(0,0,0,0.3)"
      :isShowCalendar="true"
      :start-year="1949"
      :end-year="2049"
      :timeInit="Date.now()"
      :time-hide="[true, true, true, true, true, false]"
      :time-label="['年', '月', '日', '时', '分', '秒']"
    />
  </view>
</template>

<script setup>
import { ref, reactive, onMounted, watch, computed } from "vue";
import { onReady } from "@dcloudio/uni-app";

import DateTimePicker from "@/common/components/x-dateTimePicker/x-dateTimePicker.vue";

const md = reactive({
  timeObj: {},
});

const myPickerRef = ref(null);

function openDatetimePicker() {
  myPickerRef.value.show();
}

function closeDatetimePicker() {
  myPickerRef.value.hide();
}

function handleSubmit(timeObj) {
  console.log(timeObj);
  md.timeObj = timeObj;
}
</script>

<style scoped lang="scss">
.wrap {
  padding: 20px;
  button {
    margin-bottom: 20px;
  }
}
</style>