当前位置:网站首页>vben-admin 时间选择器相关配置以及设置不可选择的时间
vben-admin 时间选择器相关配置以及设置不可选择的时间
2022-07-20 02:47:00 【xiaofiy】
一、介绍配置;
component取值:
DatePicker:日期选择
RangePicker:日期区间选择
format: 表单显示的格式,‘YYYY-MM-DD HH:mm:ss’, / ‘YYYY-MM-DD’,
valueFormat:获取到值得格式(传给后台的数据格式)
时间戳为’X’, 大写X是10位,小写x是13位
‘YYYY-MM-DD HH:mm:ss’, / ‘YYYY-MM-DD’,showTime:显示时分秒的配置,不写不显示选择具体的时分秒
showTime: {
defaultValue: [moment(‘00:00:00’, ‘HH:mm:ss’), moment(‘23:59:59’, ‘HH:mm:ss’)],
},
- disabledDate 设置不可选
- 不可选择未来时间
{
label: '解决时间',
field: 'processTime',
component: 'DatePicker',
required: true,
componentProps: {
// 传给后端的时间格式--
valueFormat: 'YYYY-MM-DD HH:mm:ss',
// 显示的时间格式
showTime: {
format: 'YYYY-MM-DD HH:mm:ss',
},
// 设置不可选
disabledDate: (current) => {
// 不可选择未来时间
return current && current > Date.now();
},
style: {
width: '100%',
},
},
},
效果图:
- 不可选择过去时间
moment插件项目如果没有需要自己下载 然后引入
import moment from 'moment';
{
label: '解决时间',
field: 'processTime',
component: 'DatePicker',
required: true,
componentProps: {
// 传给后端的时间格式-- 时间戳为'X',大写X是10位小写x是13位
valueFormat: 'YYYY-MM-DD HH:mm:ss',
// 显示的时间格式
showTime: {
format: 'YYYY-MM-DD HH:mm:ss',
},
// 设置不可选
disabledDate: (current) => {
// 不可选择过去时间
return current < moment().add(-1, 'd');
},
style: {
width: '100%',
},
},
},
效果图
边栏推荐
- Network security - comprehensive penetration test -cve-2019-15107-webmin remote code execution
- 力扣刷题目录
- 中职网络安全—2022年国赛逆向PE Reverse解题思路
- [after reading] relevant blogs of NiO
- On the surface, the development logic of the meta universe and the Internet is the same, but in fact, it is not
- Miller gingival recession and mucogingival junction
- .Net Core快速开发平台,强大工作流引擎,多系统快速配置
- scala基础【高阶函数编程】
- LeetCode.302 场周赛___03_6121. 裁剪数字后查询第 K 小的数字____排序
- LeetCode.1217. 玩筹码____简单贪心
猜你喜欢
理解和应用持续集成-Tekton
Resolved no module named 'flask_ Misaka '[bug solution]
cannot import name ‘import_ String 'from' Werkzeug '[bug resolution]
AT32使用內核DWT寄存器設定延時時間
使用OpenCV调整图像的亮度和对比度
理解和应用持续部署-argo-cd
Technical analysis premint security events, how to avoid attacks?
Dynamic memory management
[after reading] relevant blogs of NiO
测试岗面试,一份好的简历总可以让人眼前一亮
随机推荐
Interview preparation of Tencent for Android Development
剑指 Offer II 041. 滑动窗口的平均值_____使用队列 / 循环数组实现
cannot import name ‘import_ String 'from' Werkzeug '[bug resolution]
. Net core rapid development platform, powerful workflow engine, multi system rapid configuration
【琐琐碎碎小知识】 关于部分Unity编辑器在创建瓦片地图时缺乏Tiles选项
C语言_结构体引入
At32 MCU f415 OTG new function use
C -- string
Network security comprehensive penetration test cve-2010-2883-pdf vulnerability analysis
科赫曲线
VMware安装
ICLR 2022 | gnnaskernel: a general framework that can improve the expression ability of any GNN
How to use mitmproxy to get data return in automated testing?
C——字符串
Harbor - image warehouse
网络安全——信息隐藏-使用隐写术来防止敏感数据被盗用
使用OpenCV调整图像的亮度和对比度
过滤器和拦截器区别
力扣279-完全平方数——动态规划
[after reading] relevant blogs of NiO