logpm/uni_modules/fant-mini-plus/components/hd-date-picker/INDEX.md

代码演示

选择年月日

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

<script lang="ts" setup>
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'
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'
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'
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'
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 相关的辅助函数：

方法名	说明	参数	返回值
showDatePicker	展示日期选择器	DatePickerOptions	DatePicker实例

DatePickerOptions 数据结构

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

参数	说明	类型	是否必填	默认值
currentDate	初始选择的日期时间，默认当前时间。	Number、 String	false	new Date().getTime()
startDate	最小日期时间。	Number、 String	false	十年前
endDate	最大日期时间。	Number、 String	false	十年后
type	日期类型，可选值:date time year-month date-hour-minute date-time	DatePickerType	false	date
themeColor	主题颜色	String	false	#6ba1ff
maxHour	可选的最大小时，针对 time 类型。	Number	false	23
maxMinute	可选的最大分钟，针对 time 类型。	Number	false	59
maxSecond	可选的最大秒，针对 time 类型。	Number	false	59
minHour	可选的最小小时，针对 time 类型。	Number	false	0
minMinute	可选的最小分，针对 time 类型。	Number	false	0
minSecond	可选的最小秒，针对 time 类型。	Number	false	0
success	选择成功的回调。	Function	false	-
fail	选择失败的回调。	Function	false	-