- VisualStudio2022插件的安装及使用-编程手把手系列文章
- pprof-在现网场景怎么用
- C#实现的下拉多选框,下拉多选树,多级节点
- 【学习笔记】基础数据结构:猫树
最近一直在使用 element-ui中的日期组件。
所以想对日期组件常用的做一个简单的总结;
1.处理日期组件选择的时候面板联动问题
2.限制时间范围
我们发现2个日期面板之间其实是有联动关系的;
开始时间面板和结束时间面板始终只能相邻;
不能出现开始时间选择3月,结束时间是5月这样的情况;
但是我们有些时候要让他们之间解除联动关系;
我们需要将 unlink-panels 设置为true
unlink-panels:在范围选择器里取消两个日期面板之间的联动;
它默认是false;我们设置为true就行
<template>
<div>
<el-date-picker
v-model="value2"
type="datetimerange"
range-separator="至"
:picker-options="pickerOptions"
start-placeholder="开始日期"
end-placeholder="结束日期"
align="right">
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
pickerOptions: {
disabledDate(time) {
// time 表示的是面板中每一个日期值
// 只能选择今天以及今天之后的时间
return time.getTime() < Date.now() - 24*60*60*1000;
}
},
value2: ''
}
}
}
</script>
有的小伙伴说:我看见有些限制时间是这样写的
return time.getTime() < Date.now() - 8.64e7
其实8.64e7 约等于24小时;所以并不会影响
pickerOptions: {
disabledDate(time) {
// 只能选择今天之后的时间
// time 表示的是面板中每一个日期值
return time.getTime() < Date.now()
}
},
pickerOptions: {
disabledDate(time) {
// 选择今天以及今天之前的时间
// time 表示的是面板中每一个日期值
return time.getTime() > Date.now();
}
},
pickerOptions: {
disabledDate(time) {
// 选择今天之前的时间
// time 表示的是面板中每一个日期值
return time.getTime() > Date.now() - 24*60*60*1000;
}
},
<el-date-picker
v-model="value2"
type="datetimerange"
range-separator="至"
:picker-options="pickerOptions"
start-placeholder="开始日期"
end-placeholder="结束日期"
align="right">
</el-date-picker>
data() {
return {
pickerOptions: {
disabledDate(time) {
// 获取当前的时间
let currentTime = new Date()
// 重新设置当前时间的 时,分,秒,毫秒
currentTime.setHours(0,0,0,0)
// 得到当前时间 0时0分0秒的时间戳
let endTime = currentTime.getTime()
// 获取7天前的时间戳
let startTime = endTime - 6*24*60*60*1000
// time表示需要需要禁用的时间
return time.getTime() < startTime || time.getTime() > endTime
},
},
value2: ''
}
}
经过前面我们的学习,我们可以通过
time.getTime() > Date.now();
来限制时间不能超过当前时间;
时间跨度我们通过 change 事件来判断开始时间和结束时间是否相差30天
于是我们很快完成了功能
<template>
<div>
<el-date-picker
v-model="value2"
type="datetimerange"
@change="changeTime"
range-separator="至"
:picker-options="pickerOptions"
start-placeholder="开始日期"
end-placeholder="结束日期"
align="right">
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
pickerOptions: {
disabledDate(time) {
// 选择今天以及今天之前的时间
return time.getTime() > Date.now();
},
},
value2: ''
}
},
methods:{
changeTime(time){
if(time && time.length){
let endTime = time[1].getTime()
let startTime = time[0].getTime()
let limitTime= 30 *24 *60*60*1000
if(endTime - startTime > limitTime){
this.$message.error('选择的时间不能超过30天');
this.value2 = ''
}
}else {
this.$message.error('请选择时间');
}
}
}
}
</script>
虽然我们上面的代码实现了功能;但是用户体验不是特别不好;
有没有这样的方式:当用户选择了5月2号;
只能选择它的前30天和后30天范围的时间(4月2号---6.20号)
如果要实现上面这样的功能:
1.我们要解决面板联动,可以使用 unlink-panels 来解决;
2.我们要知道用户点击选择的时间,这样我们才能知道开始和结束;
这样问题我们可以使用 onPick: date => { }事件知道点击选中的时间
3.计算出30天前和30天后的时间
<template>
<div>
<el-date-picker v-model="myTime" unlink-panels type="datetimerange" range-separator="至"
:picker-options="pickerOptions" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
pickerOptions: {
disabledDate: time => {
// this.userSelectDate 可能是 '',不是一个日期对象;
// 这个必须要使用括号哈
// 如果使用 !this.userSelectDate instanceof Date 仍然是false
if (!(this.userSelectDate instanceof Date)) {
return false
} else {
let currentTime = time.getTime()
let userSelectDateTime = this.userSelectDate.getTime()
// 获取7天前的时间戳
let day7beforeTime = userSelectDateTime - 6*24*60*60*1000
// 获取7天后的时间戳
let day7AfterTime = userSelectDateTime + 6*24*60*60*1000
// 只能选择 7天前和7天后
return currentTime > day7AfterTime || currentTime < day7beforeTime
}
},
onPick: date => {
// minDates就是用户选择的初始时间,记录它是为了得到7天前和7天后的时间
console.log('用户选择时间就是触发', date)
if (date.minDate) {
// 记录用户选择的时间
this.userSelectDate = date.minDate
} else {
this.userSelectDate = null
}
}
},
userSelectDate: '',
myTime:''
}
}
}
</script>
上面虽然友好的实现了限制选择的时间前后不超过7天;
但是没有限制选择的时间【不能】选择今天之后的时间;
我们需要限制一下;
除了 pickerOptions 中的代码,其他的与上面的一样保持不变
pickerOptions: {
disabledDate: time => {
console.log(11111111111)
// 限制不能选择今天之后的时间
if( Date.now() < time.getTime()){
return true;
}else {
// this.userSelectDate 可能是 '',不是一个日期对象;
// 这个必须要使用括号哈
// 如果使用 !this.userSelectDate instanceof Date 仍然是false
if (!(this.userSelectDate instanceof Date)) {
return false
} else {
let currentTime = time.getTime()
let userSelectDateTime = this.userSelectDate.getTime()
// 获取7天前的时间戳
let day7beforeTime = userSelectDateTime - 6*24*60*60*1000
// 获取7天后的时间戳
let day7AfterTime = userSelectDateTime + 6*24*60*60*1000
// 只能选择 7天前和7天后
return currentTime > day7AfterTime || currentTime < day7beforeTime
}
}
}
},
没有想到五一这么快就结束了;
用了2天时间看完了遮天;
主角是古今第一圣体,荒古圣体;
我是牛马圣体;不说了,开始干活
最后此篇关于element-ui使用el-date-picker日期组件常见场景的文章就讲到这里了,如果你想了解更多关于element-ui使用el-date-picker日期组件常见场景的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
我正在寻找一个使用 iCloud for Xamarin Form for iOS 的文件选择器库。目前我正在使用 FilePicker-Plugin-for-Xamarin-and-Windows用
我对选择器 View 有一些疑问我有两个选择器 View 选择器 View 1 = getpPlandateDCPlanData选择器 View 2 = getpShipmentDCPlanData
当我在运行 npm install 后克隆一个 angular 4 项目时,我有 angular-cli 1.5.6,当使用 ng serve 服务项目时,我得到了这个错误 ng2-日期选择器 ERR
当升级到 react-native 0.61.2 时,这个问题出现了。我做到了从手机中删除了 apk 和自动链接使用 react-native link 然后 react-native run-and
当升级到 react-native 0.61.2 时,这个问题出现了。我做到了从手机中删除了 apk 和自动链接使用 react-native link 然后 react-native run-and
Picker reference 4月24日更新。子类 DocsView 现在有一个函数 setEnableSharedDrives(),但是 Picker 抛出异常并且不显示 View 。 这是一个
我正在使用 DayPickerInput,我将其设置为 this (具有 2 天选择器输入的范围)。我想始终显示覆盖,我不想隐藏它。我知道 showOverlay Prop ,但它只在初始渲染期间显示
如何将类添加到 react-day-picker 的今天按钮? 从文档中似乎是可能的: http://react-day-picker.js.org/api/DayPicker#classNames
我正在尝试使用 react-native-picker-select 包。根据他们的文档,@react-native-picker/picker 是一个依赖项。但是.. 将此包添加到我的 RN 应用程
我正在开发一个 SwiftUI View ,其目的是允许用户输入美元金额。我想要一排七个轮式选取器,每个值都是数字 0 到 9。 以下代码有效,除了,当我尝试触摸并拖动数字列以滚动它时,我发现我的拖动
我正在尝试使用 react-native-picker-select 包。根据他们的文档,@react-native-picker/picker 是一个依赖项。但是.. 将此包添加到我的 RN 应用程
在屏幕上我有 UIDatePicker。如果有简单的选择器就简单了。可能是这样的: app.pickeWheels["my_id_picker"].adjustToPickerWheelValue("
我想更改标签 我的 ,例如当语言改变时,由另一个按钮 ( react-redux ) 触发。 key和 value应该保持不变,只有 label变化。 不幸的是结果是重新渲染(?)和selected
这是我的示例代码,在 Android 中我无法第一次选择第一个 Picker Item,我创建了一个虚拟项目所以我需要隐藏第一个字段。 this.setState({selectedValue: i
我正在使用 Google Picker Api。 Google Picker 显示正常,但是当我选择一个文件(选择一个文件并单击 Select 按钮或双击一个文件)时,我收到此警报:An embedd
我正在尝试将简单的 GMSPlacePicker 示例转换为 Swift 但是选择器会出现,但一旦从右到左的过渡完成,它就会立即消失。 // ViewController.swift imp
我确信有一种方法可以做到这一点,但我还不知道如何实现。 我想做的是添加一个 Picker 组件,但不是对项目列表进行硬编码,而是从服务中获取该组件,并将 Picker 绑定(bind)到我稍后可以填充
我正在尝试对这段代码进行快照测试: import React, { Component } from 'react'; import { Picker, } from 'react-native'
我将 Place Picker 添加到我的 android 应用程序中。当您知道要选择的地点的地址并填写研究栏时,它就会起作用。但是我希望用户可以在使用红色选择器时选择他选择的位置,而这部分不起作用。
我想知道是否有任何适用于 iOS 的简单 Facebook 照片选择器 Controller 可以显示 facebook 相册和他们的照片,并让用户从中挑选照片。类似于 iOS Facebook SD
我是一名优秀的程序员,十分优秀!