nutui-uniapp

Appearance

DatePicker 日期选择器 ​

介绍 ​

时间选择器，支持日期、年月、时分等维度，通常与弹出层组件配合使用。

选择年月日 ​

html
<template>
  <nut-date-picker v-model="currentDate"
                   :min-date="minDate"
                   :max-date="maxDate"
                   three-dimensional
                   is-show-chinese
                   @confirm="onConfirm"></nut-date-picker>
</template>
typescript
import type { DatePickerBaseEvent } from 'nutui-uniapp'

const minDate = new Date(2020, 0, 1)
const maxDate = new Date(2025, 10, 1)

const currentDate = ref<Date>(new Date(2022, 4, 10))

function onConfirm({ date, selectedValue, selectedOptions }: DatePickerBaseEvent) {
  console.log(date, selectedValue, selectedOptions)
}

搭配 Popup 使用 ​

html
<template>
  <nut-cell title="选择日期" :desc="popupDesc" @click="show = true"></nut-cell>

  <nut-popup v-model:visible="show" position="bottom" safe-area-inset-bottom>
    <nut-date-picker v-model="currentDate"
                     :min-date="minDate"
                     :max-date="maxDate"
                     is-show-chinese
                     @confirm="onConfirm"
                     @cancel="show = false">
      <nut-button block type="primary" @click="onButtonClick">
        永远有效
      </nut-button>
    </nut-date-picker>
  </nut-popup>
</template>
typescript
const show = ref<boolean>(false)
const popupDesc = ref<string>('')

const minDate = new Date(2020, 0, 1)
const maxDate = new Date(2025, 10, 1)

const currentDate = ref<Date>(new Date(2022, 4, 10, 10, 10))

function onConfirm({ date, selectedValue, selectedOptions }: DatePickerBaseEvent) {
  console.log(date, selectedValue, selectedOptions)

  popupDesc.value = selectedOptions.map(item => item.text).join('-')
  show.value = false
}

function onButtonClick() {
  popupDesc.value = '永远有效'
  show.value = false
}

选择年月 ​

将 type 设置为 year-month 即可选择年份和月份

html
<template>
  <nut-date-picker v-model="currentDate"
                   type="year-month"
                   title="日期选择"
                   @confirm="onConfirm"></nut-date-picker>
</template>

选择月日 ​

将 type 设置为 month-day 即可选择月份和日期。

html
<template>
  <nut-date-picker v-model="currentDate"
                   type="month-day"
                   title="日期选择"
                   @confirm="onConfirm"></nut-date-picker>
</template>

选择年月日时分 ​

将 type 设置为 datetime 即可选择完整的时间。

html
<template>
  <nut-date-picker v-model="currentDate"
                   type="datetime"
                   title="日期时间选择"
                   @confirm="onConfirm"></nut-date-picker>
</template>

选择时分秒 ​

将 type 设置为 time 即可选择时分秒。

html
<template>
  <nut-date-picker v-model="currentDate"
                   type="time"
                   title="时间选择"
                   @confirm="onConfirm"></nut-date-picker>
</template>

选择时分 ​

将 type 设置为 hour-minute 即可选择时分。

html
<template>
  <nut-date-picker v-model="currentDate"
                   type="hour-minute"
                   title="时间选择"
                   @confirm="onConfirm"></nut-date-picker>
</template>

格式化选项 ​

通过传入 formatter 函数，可以对选项文字进行格式化处理。 isShowChinese 属性同样是也为选项后面添加文案，但 formatter 函数的优先级高于 isShowChinese 属性。

html
<template>
  <nut-date-picker v-model="currentDate"
                   type="datetime"
                   title="日期选择"
                   :formatter="formatter"
                   @confirm="onConfirm"></nut-date-picker>
</template>
typescript
import type { DatePickerColumnType, PickerOption } from 'nutui-uniapp'

function formatter(type: DatePickerColumnType, option: PickerOption) {
  switch (type) {
    case 'year':
      option.text += ''
      break
    case 'month':
      option.text += '月'
      break
    case 'day':
      option.text += '日'
      break
    case 'hour':
      option.text += '时'
      break
    case 'minute':
      option.text += '分'
      break
    default:
      option.text += ''
  }
  return option
}

分钟数递增步长设置 ​

html
<template>
  <nut-date-picker v-model="currentDate"
                   type="time"
                   title="时间选择"
                   :minute-step="5"
                   @confirm="onConfirm"></nut-date-picker>
</template>

过滤选项 ​

通过 filter 函数可以对选项数组进行过滤，实现自定义时间间隔。

html
<template>
  <nut-date-picker v-model="currentDate"
                   type="datehour"
                   title="时间选择"
                   :filter="filter"
                   @confirm="onConfirm"></nut-date-picker>
</template>
typescript
import type { DatePickerColumnType, PickerOption } from 'nutui-uniapp'

function filter(type: DatePickerColumnType, options: PickerOption[]) {
  if (type === 'hour') {
    return options.filter(item => Number(item.value) % 6 === 0)
  }

  return options
}

API ​

Props ​

参数说明类型默认值
v-model选中值Date-
type时间类型，可选值 date(年月日) time(时分秒) year-month(年月) month-day(月日) datehour(年月日时) hour-minute(时分) datetime(年月日时分)stringdate
show-toolbar是否显示顶部导航booleantrue
title设置标题string-
ok-text确定按钮文案string确定
cancel-text取消按钮文案string取消
is-show-chinese每列是否展示中文booleanfalse
minute-step分钟步进值number1
min-date开始日期date十年前
max-date结束日期date十年后
formatter选项格式化函数(type: DatePickerColumnType, option: PickerOption) => PickerOption-
filter选项过滤函数(type: DatePickerColumnType, options: PickerOption[]) => PickerOption[]-
three-dimensional是否开启3D效果booleanfalse
swipe-duration惯性滚动时长number \ string1000
visible-option-num可见的选项个数number \ string7
option-height选项高度number \ string36

Events ​

事件名说明回调参数
change选项改变时触发（1.7.7 新增 date 参数）{ date, columnIndex, selectedValue, selectedOptions }
confirm点击确定按钮时触发（1.7.7 新增 date 参数）{ date, selectedValue, selectedOptions }
cancel点击取消按钮时触发（1.7.7 新增 date 参数）{ date, selectedValue, selectedOptions }

Slots ​

名称说明
default自定义滑动数据底部区域
top自定义滑动数据顶部区域

PickerOption 数据结构 ​

键名说明类型默认值
text选项的文字内容number \ string-
value选项对应的值，且唯一number \ string-
children用于级联选项PickerOption[]-
className添加额外的类名string-

主题定制 ​

样式变量 ​

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

名称默认值
--nut-picker-cancel-color#808080
--nut-picker-ok-colorvar(--nut-primary-color)
--nut-picker-bar-cancel-font-size14px
--nut-picker-bar-ok-font-size14px
--nut-picker-bar-button-padding0 15px
--nut-picker-bar-title-font-size16px
--nut-picker-bar-title-colorvar(--nut-title-color)
--nut-picker-bar-title-font-weightnormal
--nut-picker-item-height36px
--nut-picker-item-text-colorvar(--nut-title-color)
--nut-picker-item-text-font-size14px
--nut-picker-item-active-line-border1px solid #d8d8d8

MIT Licensed

版权所有 © 2023 年-至今 yang1206 贡献者