element日期时间选择器picker-options

毛崽

已于 2022-04-26 19:08:10 修改

阅读量2.2k

点赞数

文章标签： javascript

于 2021-04-22 11:19:58 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_56290677/article/details/116005722

版权

vue2.0 专栏收录该内容

10 篇文章

订阅专栏

这篇博客介绍了JavaScript中Date对象的使用，包括日期时间格式化、转换及禁用日期的设置。讲解了Date.parse()和Date.getTime()方法，以及如何通过picker-options在前端限制日期和时间选择。还展示了如何在日期时间选择器中实现特定日期和时间的禁用，并提供了日期限制的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

日期格式value-format="yyyy-MM-dd hh:mm:ss" ，时间戳value-format="timestamp"
Date.parse(date)

console.log(Date.parse("2020 09 09 12:30:22")) //1599625822000
//使用了Date()构造函数的的静态方法.

Date(time).getTiem(date)

console.log(new Date("2010/09/09 12:30:22").getTime())  //1284006622000
//使用了 Date() 构造函数的实例方法

设置日期禁用
通过给定义:picker-options="pickerOptions"，然后如下代码：

data() {
	return{
		pickerOptions: {
			disabledDate(time) {
				return time.getTime() < Date.now(); //后面
				// return time.getTime() >= (Date.now()-8.64e7); //前面   -8.64e7可以选择今天
			}
		},
	}
}

日期时间选择器选中日期时，同时获取当前时分秒

<el-date-picker v-model="Form.date" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" :picker-options="disable_pickerOptions(Form.date)" placeholder="选择日期时间"></el-date-picker>

 // 设置日期限制
 disable_pickerOptions(times){
    let date = new Date()
    let minutes = date.getMinutes() + 1
    // h和m 是将日期只取时分
    let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
    let m = (minutes < 10 ? '0' + minutes : minutes);
    // pickerDate 判断当前选择时间是否等于上条数据时间
    // 若等于时，限制时间从00：00：00 - 上条数据开始时间，不等于时，24小时可选
    // let pickerDate = date.toDateString() === new Date(times).toDateString()
    return {
       // 日期限制
       disabledDate: (time) => {
          let old = new Date()
          return time.getTime() < new Date(old).getTime() - 86400000
       },
       // 时间限制
       // selectableRange: pickerDate? h + m  + ':00 - 23:59:59' : '12:59:59 - 23:59:59'
       selectableRange: h + m  + ':00 - 23:59:59'
    }
 },

待续。。。