Vue3日期选择器（DatePicker）

本组件基于 @vuepic/vue-datepicker 插件进行了二次封装，以便更适合日常使用！

官方文档：https://vue3datepicker.com/installation/

除了年、月、时分秒选择器以外，其余选择的日期（v-model:date）均已调整为返回时间戳！

可自定义设置以下二次封装属性（也可根据官方文档设定相应属性，组件已设置继承所有属性）：

日期选择器宽度（width），类型：number，单位px，默认 180
选择器模式（mode），类型：'time'|'date'|'week'|'month'|'year'，默认 'date'，可选：时间time，日期date，周week，月month，年year
是否增加时间选择（showTime），类型：boolean，默认 false
是否展示”今天“按钮（showToday），类型：boolean，默认 false
v-model值的类型（modelType），类型：'timestamp'|'format'，默认 'format'，可选时间戳(timestamp)、字符串(format)，mode为week和year时，该配置不生效

更多使用方式还请查阅官方文档，功能设计非常全面，各部分主题颜色也均可自定义修改！

常用官方属性举例：

日期展示格式（format），类型：string，默认 'yyyy-MM-dd'，可选（y: 年, M: 月, d: 天, H: 时, m: 分, s: 秒）
范围选择器是否使用双日期面板（multiCalendars），类型：boolean，默认 false
定义选择顺序（flow），类型：array，默认 []，可选 ("calendar" | "time" | "month" | "year" | "minutes" | "hours" | "seconds")[]
样式主题是否使用黑色（dark），类型：boolean，默认 false
是否展示秒选择（enable-seconds），类型：boolean，默认 false

效果如下图：在线预览

①创建日期选择器组件DatePicker.vue：

<script lang="ts">
/*一个根节点时，禁用组件根节点自动继承 attribute，必须使用这种写法！然后在要继承 attribute 的节点上绑定 v-bind="$attrs" 即可多个根节点时，只需在要继承 attribute 的节点上绑定 v-bind="$attrs" 即可
*/
export default {inheritAttrs: false
}
</script>
<script setup lang="ts">
import VueDatePicker from '@vuepic/vue-datepicker'
import '@vuepic/vue-datepicker/dist/main.css'
import { computed } from 'vue'
interface Props {width?: number // 日期选择器宽度mode?: 'time'|'date'|'week'|'month'|'year' // 选择器模式，可选：时间time，日期date，周week，月month，年year// format?: string | (params: Date | Date[]) => string // 日期展示格式，(y: 年, M: 月, d: 天, H: 时, m: 分, s: 秒)showTime?: boolean // 是否增加时间选择showToday?: boolean // 是否展示”今天“按钮// multiCalendars?: boolean // 范围选择器是否使用双日期面板// flow?: any[] // 定义选择顺序 ("calendar" | "time" | "month" | "year" | "minutes" | "hours" | "seconds")[]// dark?: boolean // 样式主题是否使用黑色modelType?: 'timestamp'|'format', // v-model 值的类型，可选时间戳(timestamp)、字符串(format)，mode为week和year时，该配置不生效date?: string|number|number[]|{month:number,year:number}|{hours:number,minutes:number,seconds:number} // （v-model）当前选中日期
}
const props = withDefaults(defineProps<Props>(), {width: 180,mode: 'date',/* format defaultSingle picker: 'MM/dd/yyyy HH:mm'Range picker: 'MM/dd/yyyy HH:mm - MM/dd/yyyy HH:mm'Month picker: 'MM/yyyy'Time picker: 'HH:mm'Time picker range: 'HH:mm - HH:mm'*/// format: 'MM/dd/yyyy',showTime: false,showToday: false,// multiCalendars: false,// flow: () => [],// dark: false,modelType: 'format'
})
const time = computed(() => {return props.mode === 'time'
})
const week = computed(() => {return props.mode === 'week'
})
const month = computed(() => {return props.mode === 'month'
})
const year = computed(() => {return props.mode === 'year'
})
// const format = (date: Date) => {
//   const day = date.getDate()
//   const month = date.getMonth() + 1
//   const year = date.getFullYear()
//   return `${year}-${month}-${day}`
// }
</script>
<template><div class="m-datepicker" :style="`width: ${width}px;`"><VueDatePickerlocale="zh-CN":month-change-on-scroll="false":enable-time-picker="showTime":time-picker="time":week-picker="week":month-picker="month":year-picker="year"now-button-label="今天":show-now-button="showToday":auto-apply="true"text-input:model-type="modelType":day-names="['一', '二', '三', '四', '五', '六', '七']"v-bind="$attrs"></VueDatePicker></div>
</template>
<style lang="less" scoped>
.m-datepicker {display: inline-block;
}
.dp__theme_dark { // dark theme--dp-background-color: #212121;--dp-text-color: #ffffff;--dp-hover-color: #484848;--dp-hover-text-color: #ffffff;--dp-hover-icon-color: #959595;--dp-primary-color: #005cb2;--dp-primary-text-color: #ffffff;--dp-secondary-color: #a9a9a9;--dp-border-color: #2d2d2d;--dp-menu-border-color: #2d2d2d;--dp-border-color-hover: #aaaeb7;--dp-disabled-color: #737373;--dp-scroll-bar-background: #212121;--dp-scroll-bar-color: #484848;--dp-success-color: #00701a;--dp-success-color-disabled: #428f59;--dp-icon-color: #959595;--dp-danger-color: #e53935;--dp-highlight-color: rgba(0, 92, 178, 0.2);
}
.dp__theme_light { // light theme--dp-background-color: #ffffff;--dp-text-color: #212121;--dp-hover-color: #f3f3f3;--dp-hover-text-color: #212121;--dp-hover-icon-color: #959595;--dp-primary-color: #1976d2;--dp-primary-text-color: #f8f5f5;--dp-secondary-color: #c0c4cc;--dp-border-color: #ddd;--dp-menu-border-color: #ddd;--dp-border-color-hover: #aaaeb7;--dp-disabled-color: #f6f6f6;--dp-scroll-bar-background: #f3f3f3;--dp-scroll-bar-color: #959595;--dp-success-color: #76d275;--dp-success-color-disabled: #a3d9b1;--dp-icon-color: #959595;--dp-danger-color: #ff6f60;--dp-highlight-color: rgba(25, 118, 210, 0.1);
}
</style>

②在要使用的页面引入：

<script setup lang="ts">
import DatePicker from './DatePicker.vue'
import { ref, watchEffect } from 'vue'
import { format, endOfMonth, endOfYear, startOfMonth, startOfYear, subMonths, addDays, startOfWeek, endOfWeek, addHours, addMinutes, addSeconds } from 'date-fns'const dateValue = ref(format(new Date(), 'yyyy-MM-dd'))
const dateTimeValue = ref(format(new Date(), 'yyyy-MM-dd HH:mm:ss'))
const rangeValue = ref<number[]>([Date.now(), addDays(new Date(), 1).getTime()])
console.log(addHours(Date.now(), 1))const timeRangeValue = ref([{hours: new Date().getHours(),minutes: new Date().getMinutes(),seconds: new Date().getSeconds()},{hours: addHours(Date.now(), 1).getHours(),minutes: addMinutes(Date.now(), 10).getMinutes(),seconds: addSeconds(Date.now(), 30).getSeconds()}
])
const presetRanges = ref([{ label: 'Today', range: [new Date(), new Date()] },{ label: 'This month', range: [startOfMonth(new Date()), endOfMonth(new Date())] },{label: 'Last month',range: [startOfMonth(subMonths(new Date(), 1)), endOfMonth(subMonths(new Date(), 1))],},{ label: 'This year', range: [startOfYear(new Date()).getTime(), endOfYear(new Date()).getTime()] }
])
const timeValue = ref({hours: new Date().getHours(),minutes: new Date().getMinutes()
})
const secondsValue = ref({hours: new Date().getHours(),minutes: new Date().getMinutes(),seconds: new Date().getSeconds()
})
const weekValue = ref(['2023-05-28', '2023-06-03'])
const monthValue = ref({year: new Date().getFullYear(),month: new Date().getMonth()
})
const yearValue = ref(new Date().getFullYear())watchEffect(() => {console.log('dateValue:', dateValue.value)
})
watchEffect(() => {console.log('dateTimeValue:', dateTimeValue.value)
})
watchEffect(() => {console.log('rangeValue:', rangeValue.value)
})
watchEffect(() => {console.log('timeRangeValue:', timeRangeValue.value)
})
watchEffect(() => {console.log('timeValue:', timeValue.value)
})
watchEffect(() => {console.log('secondsValue:', secondsValue.value)
})
watchEffect(() => {console.log('weekValue:', weekValue.value)
})
watchEffect(() => {console.log('monthValue:', monthValue.value)
})
watchEffect(() => {console.log('yearValue:', yearValue.value)
})
</script>
<template><div><h1>Vue datepicker 参考文档</h1><ul class="m-list"><li><a class="u-file" href="https://vue3datepicker.com/" target="_blank">Vue Datepicker</a></li><li><a class="u-file" href="https://vue3datepicker.com/installation/" target="_blank">Vue Datepicker Documents</a></li></ul><h2 class="mt30 mb10">DatePicker 日期选择器基本使用</h2><h2 class="mb10">日期选择器 (mode: date 默认)</h2><DatePickerplaceholder="请选择日期"v-model:date="dateValue"show-todayformat="yyyy-MM-dd" /><h2 class="mt30 mb10">禁用过去的日期选择器 (mode: date )</h2><DatePickerplaceholder="请选择日期"v-model:date="dateValue":min-date="new Date()"format="yyyy-MM-dd" /><h2 class="mt30 mb10">禁用未来的日期选择器 (mode: date )</h2><DatePickerplaceholder="请选择日期"v-model:date="dateValue":max-date="new Date()"format="yyyy-MM-dd" /><h2 class="mt30 mb10">日期时间选择器 (mode: date & show-time & enable-seconds)</h2><DatePickerplaceholder="请选择日期时间"v-model:date="dateValue"format="yyyy-MM-dd HH:mm:ss":width="240"show-timeenable-seconds /><h2 class="mt30 mb10">日期范围选择器 (range)</h2><DatePickerplaceholder="请选择日期范围"v-model:date="rangeValue"range:preset-ranges="presetRanges"format="yyyy-MM-dd":width="280" /><h2 class="mt30 mb10">日期范围选择器，双日期面板 (range & multi-calendars)</h2><DatePickerplaceholder="请选择日期范围"v-model:date="rangeValue"mode="range"format="yyyy-MM-dd":width="280"rangemulti-calendars /><h2 class="mt30 mb10">时分选择器 (mode: time & show-time)</h2><DatePickerplaceholder="请选择时间"v-model:date="timeValue"mode="time"show-timemode-height="120"format="HH:mm":width="120" /><h2 class="mt30 mb10">时分秒选择器 (mode: time & show-time & enable-seconds)</h2><DatePickerplaceholder="请选择时间"v-model:date="secondsValue"mode="time"show-timeenable-secondsmode-height="120"format="HH:mm:ss":width="150" /><h2 class="mt30 mb10">时分秒范围选择器 (mode: time & range & show-time & enable-seconds)</h2><DatePickerplaceholder="请选择时间"v-model:date="timeRangeValue"mode="time"show-timerangeenable-secondsmode-height="120"format="HH:mm:ss":width="240" /><h2 class="mt30 mb10">周选择器 (mode: week)</h2><DatePickerplaceholder="请选择周"v-model:date="weekValue"mode="week"format="yyyy-MM-dd":width="280" /><h2 class="mt30 mb10">月选择器 (mode: month)</h2><DatePickerplaceholder="请选择月"v-model:date="monthValue"mode="month"format="yyyy-MM":width="150" /><h2 class="mt30 mb10">年选择器 (mode: year)</h2><DatePickerplaceholder="请选择年"v-model:date="yearValue"mode="year"format="yyyy":width="120" /></div>
</template>
<style lang="less" scoped>
</style>

Vue3日期选择器（DatePicker）相关推荐

android简单易上手的日期选择器DatePicker
今天尝试自己动手做一个日期选择器 1.在布局文件中添加DatePicker ... <DatePickerandroid:layout_width="match_pa ...
android 之日期选择器,Android GUI 之日期选择器(DatePicker)
简单介绍下 DatePicker 和 Calender ,用他们两个实现日期选择器,并添加日期改变监听器将当前时间显示在下面的 TextView 上,日期改变时 TextView 上的日期相应改变 ...
【安卓开发】Android中日期选择器DatePicker和TimePicker的使用
DatePickerDatePickerDatePicker和TimePickerTimePickerTimePicker是安卓自带的日期选择器,可以变换多种样式,下面是他们的简单使用. 显示年月日和 ...
elementUI 日期选择器datepicker 设置禁用日期
本例记录ElementUI中DatePicker(日期选择器)设置日期项禁用状态的实现. 下图中将DatePicker的type设置为year,展示为年份选择器: 可以看到上图中2022.2023.2 ...
element-ui日期选择器datepicker限制最大选择日期范围
如图,需求为最多选择范围为七天 <el-date-pickerv-model="pickerDate"type="daterange":picker-op ...
Android中DatePicker日期选择器的使用和获取选择的年月日
场景实现效果如下注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号霸道的程序猿获取编程相关电子书.教程推送与免费下载. 实现将布局改 ...
axure日期选择器控件_JavaFX 控件 - 输入（Control - Inputs）
本章重点内容介绍JavaFX常用输入控件,从 GitHub 或 Gitee下载详细demo代码. 按钮.单选框.复选框等适用范围根据官方文档 javafx.scene.control 编写,适合 ...
Android中实现日期时间选择器(DatePicker和TimePicker)
利用Android应用框架提供的DatePicker(日期选择器)和TimePicker(时间选择器),实现日期时间选择器. Dialog的Content布局文件(date_time_dialog.x ...
html5 自定义 datepicker,如何使用 React 构建自定义日期选择器(3)
本文作者:IMWeb howenhuo 未经同意,禁止转载 Datepicker 组件构建 Datepicker 组件要开始构建 Datepicker 组件,请将以下代码片段添加到 src/com ...

Vue3日期选择器（DatePicker）

Vue3日期选择器（DatePicker）相关推荐

最新文章

热门文章