iview日期控件 双向绑定日期
【摘要】
官网查看iview
准备工作
import { getDate, getTime } from '@/libs/util'
1
@/libs/util
/**
* @description ...
准备工作
import { getDate, getTime } from '@/libs/util'
- 1
@/libs/util
/**
* @description 日期时间转换时间戳
*/
export const getTime = dt => {
return dt ? new Date(dt).getTime() : new Date().getTime()
}
/**
* @description 时间戳转换日期时间
*/
export const getDate = (format, dt) => {
dt = dt ? new Date(dt) : new Date()
const t = {
'M+': dt.getMonth() + 1, // 月份
'd+': dt.getDate(), // 日
'H+': dt.getHours(), // 小时
'm+': dt.getMinutes(), // 分
's+': dt.getSeconds(), // 秒
'S': dt.getMilliseconds() // 毫秒
}
if (/(y+)/.test(format)) {
format = format.replace(RegExp.$1, (dt.getFullYear() + '').substr(4 - RegExp.$1.length))
}
for (let k in t) {
if (new RegExp('(' + k + ')').test(format)) { format = format.replace(RegExp.$1, (RegExp.$1.length === 1) ? (t[k]) : (('00' + t[k]).substr(('' + t[k]).length))) }
}
return format
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
data里数据
data () {
return {
pubTime: getDate('yyyy-MM-dd'),
options: {
disabledDate (date) {
return date && date.valueOf() < Date.now() - 86400000
}
},
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
页面
<DatePicker
transfer
:options="options"
:value="pubTime"
style="width: 200px"
type="date"
placeholder="点击选择时间"
format="yyyy-MM-dd"
@on-change="pubTime = $event"
/>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
重点代码
@on-change="pubTime = $event"
- 1
文章来源: lvsige.blog.csdn.net,作者:祥子的小迷妹,版权归原作者所有,如需转载,请联系作者。
原文链接:lvsige.blog.csdn.net/article/details/109316066
【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)