FantMiniPlus

DatePicker 日期选择

时间选择器，支持日期、年月、时分秒等维度。## 代码演示

选择年月日

<hd-date-picker ref="datePicker"></hd-date-picker>

<script lang="ts" setup>
import { DatePicker, DatePickerType } from '@/uni_modules/fant-mini-plus/components/hd-date-picker/types'
import { ref } from 'vue'
const datePicker = ref<DatePicker>()
cosnt date = ref<string|number>('')

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

选择时分秒

<hd-date-picker ref="datePicker"></hd-date-picker>

<script lang="ts" setup>
import { DatePicker, DatePickerType } from '@/uni_modules/fant-mini-plus/components/hd-date-picker/types'
import { ref } from 'vue'
const datePicker = ref<DatePicker>()
cosnt date = ref<string|number>('')

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

选择年月

<hd-date-picker ref="datePicker"></hd-date-picker>

<script lang="ts" setup>
import { DatePicker, DatePickerType } from '@/uni_modules/fant-mini-plus/components/hd-date-picker/types'
import { ref } from 'vue'
const datePicker = ref<DatePicker>()
cosnt date = ref<string|number>('')

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

日期时分

<hd-date-picker ref="datePicker"></hd-date-picker>

<script lang="ts" setup>
import { DatePicker, DatePickerType } from '@/uni_modules/fant-mini-plus/components/hd-date-picker/types'
import { ref } from 'vue'
const datePicker = ref<DatePicker>()
cosnt date = ref<string|number>('')

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

日期时间

<hd-date-picker ref="datePicker"></hd-date-picker>

<script lang="ts" setup>
import { DatePicker, DatePickerType } from '@/uni_modules/fant-mini-plus/components/hd-date-picker/types'
import { ref } from 'vue'
const datePicker = ref<DatePicker>()
cosnt date = ref<string|number>('')
function onClick() {
  let currentDate: number | string = new Date().getTime()
  datePicker.value?.showDatePicker({
    type: 'date-time',
    currentDate: currentDate,
    success: (res) => {
      if (res.date) {
        date = res.date
      }
    },
    fail: () => {
      console.log(22)
    }
  })
}

方法

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

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

DatePickerOptions 数据结构

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

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