更新记录

0.0.4（2023-10-23）

修复 DatePicker 组件对齐错误的问题

0.0.2（2023-06-07）

修复演示代码的错误语法

0.0.1（2023-06-07）

一个基于Vue3和TypeScript开发的 DatePicker 日期选择组件。

平台兼容性

组件库官方文档：fant-mini-plus

组件库提供更多vue3组件，比单独引入更加强大

DatePicker 日期选择

时间选择器，支持日期、年月、时分秒等维度。

代码演示

选择年月日

<hd-date-picker></hd-date-picker>

<script lang="ts" setup>
import { useDatePicker } from '@/uni_modules/hd-date-picker/components/hd-date-picker';
import { ref } from 'vue'
const datePicker = useDatePicker()
const date = ref<string|number>('')

function open() {
  let currentDate: number | string = new Date().getTime()
  datePicker.showDatePicker({
    type: 'date',
    currentDate: currentDate,
    success: (res) => {
      if (res.date) {
        date.value = res.date
      }
    },
    fail: () => {
      console.log(22)
    }
  })
}
</script>

选择时分秒

<hd-date-picker></hd-date-picker>

<script lang="ts" setup>

import { ref } from 'vue'
import { useDatePicker } from '@/uni_modules/hd-date-picker/components/hd-date-picker';
const datePicker = useDatePicker()
const date = ref<string|number>('')

function open() {
  let currentDate: number | string = new Date().getTime()
  datePicker.showDatePicker({
    type: 'time',
    currentDate: currentDate,
    success: (res) => {
      if (res.date) {
        date.value = res.date
      }
    },
    fail: () => {
      console.log(22)
    }
  })
}
</script>

选择年月

<hd-date-picker></hd-date-picker>

<script lang="ts" setup>

import { ref } from 'vue'
import { useDatePicker } from '@/uni_modules/hd-date-picker/components/hd-date-picker';

const datePicker = useDatePicker()
const date = ref<string|number>('')

function open() {
  let currentDate: number | string = new Date().getTime()
  datePicker.showDatePicker({
    type: 'year-month',
    currentDate: currentDate,
    success: (res) => {
      if (res.date) {
        date.value = res.date
      }
    },
    fail: () => {
      console.log(22)
    }
  })
}

日期时分

<hd-date-picker></hd-date-picker>

<script lang="ts" setup>
import { ref } from 'vue'
import { useDatePicker } from '@/uni_modules/hd-date-picker/components/hd-date-picker';
const datePicker = useDatePicker()
const date = ref<string|number>('')

function open() {
  let currentDate: number | string = new Date().getTime()
  datePicker.showDatePicker({
    type: 'date-hour-minute',
    currentDate: currentDate,
    success: (res) => {
      if (res.date) {
        date.value = res.date
      }
    },
    fail: () => {
      console.log(22)
    }
  })
}

日期时间

<hd-date-picker></hd-date-picker>

<script lang="ts" setup>

import { ref } from 'vue'
import { useDatePicker } from '@/uni_modules/hd-date-picker/components/hd-date-picker';
const datePicker = useDatePicker()
const date = ref<string|number>('')
function open() {
  let currentDate: number | string = new Date().getTime()
  datePicker.showDatePicker({
    type: 'date-time',
    currentDate: currentDate,
    success: (res) => {
      if (res.date) {
        date.value = res.date
      }
    },
    fail: () => {
      console.log(22)
    }
  })
}

方法

fant-mini 中导出了以下 DatePicker 相关的辅助函数：

DatePickerOptions 数据结构

调用 showDatePicker 方法时，支持传入以下选项：

联系方式

有不明白或者建议可以扫码交流

联系我们