<el-form-item class="date-range" label="制单日期范围">
<el-date-picker
v-model="timeRange"
:clearable="false"
type="daterange"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
@change="transferDateChange"
:picker-options="pickerOptions"
></el-date-picker>
</el-form-item>
export default {
name: "addEdit",
data() {
let _minDate = "";
let _maxDate = "";
return {
dataForm: {
timeRange: [],
queryData: {},
pickerOptions: {
onPick(time){
_minDate = time.minDate ? time.minDate : '';
_maxDate = time.maxDate ? time.maxDate : '';
disabledDate(time) {
let today = that.$util.formatDate(new Date());
let threeYearAgo = new Date().getFullYear() - 3 + today.slice(4);
if (_minDate && !_maxDate) {
let threeMonthAgo = "";
let threeMonthLater = "";
let selectMinDate = that.$util.formatDate(new Date(_minDate));
let selectMinDateMon = Number(new Date(_minDate).getMonth());
if(new Date(_minDate).getMonth()>2){
threeMonthAgo = selectMinDate.slice(0,5) + that.$validate.formatMonDay(selectMinDateMon - 2) + selectMinDate.slice(7);
}else{
threeMonthAgo = (selectMinDate.slice(0,4) -1) + "-" + that.$validate.formatMonDay(selectMinDateMon - 2 + 12) + selectMinDate.slice(7);
if(new Date(_minDate).getMonth()>8){
threeMonthLater = (Number(selectMinDate.slice(0,5))+1) + that.$validate.formatMonDay(selectMinDateMon -12 + 4) + selectMinDate.slice(7);
}else{
threeMonthLater = selectMinDate.slice(0,5) + that.$validate.formatMonDay(selectMinDateMon + 4) + selectMinDate.slice(7);
return time.getTime() > new Date(threeMonthLater).getTime() || time.getTime() < new Date(threeMonthAgo).getTime()
|| time.getTime() > new Date().getTime() || time.getTime() < new Date(threeYearAgo).getTime();
}else{
return time.getTime() > new Date().getTime() || time.getTime() < new Date(threeYearAgo).getTime();
methods:{
transferDateChange(){
this.queryData.startDate = this.timeRange ? this.timeRange[0] : '';
this.queryData.endDate = this.timeRange ? this.timeRange[1] : '';
有两个需求，一个是录入页面，开始时间和结束时间是两个表单元素，分开着的，要做限制；另一个是时间搜索选项，要选择时间范围，这个是要用同一个日期选择框，要做限制；两个日期选框需求：结束日期不能大于开始日期，选择时间在当日（包含当日）后的14天内；一个日期选框需求：选择时间当日前，整体范围在三年内，选择时间范围不能超过一个月；日期限制思路一个选框，结束日期不能大于日期，可以在选择@change后判断两个日期大小，如果不符合条件，触发表单验证提示。或者在一个选择后，另一个设置disabled
// main.js file
import VueDatepickerUi from 'vue-datepicker-ui'
import 'vue-datepicker-ui/lib/vuedatepickerui.css' ;
Vue . component ( 'Datepicker' , VueDatepickerUi )
< script >
import ' vue-datepicker-ui/lib/vuedatepickerui.css ' ;
import VueDatepickerUi from ' vue-datepicker-ui ' ;
export default {
components : {
Datepicker : VueD
<FormItem label="起止时间">
<DatePicker type="date" v-model="searchForm.startTime" :options="startOptions" placeholder="请选择开始时间" style="width: 200px"></DatePicker>
<DatePicker type="dat
此处做一个解释：
：picker-options=“updateTime” 为当前时间日期选择器特有的选项参考下表，而且可以用vue中的函数来做筛选，将data数据源中的updateTime给：picker-options使用
<el-form-item style='width: 100%;' label="开始日期:">
<el-date-picker style='width: 100%;' value-format="yyyy-MM-dd" form
问题描述：
原型中是两个分开的
日期选择器，而不是
element ui中给出的一个
控件里同时
选择开始
日期和
结束日期。所以需要自己获取两个框中的选定值然后进行范围
限制
1. 原型图效果：
要求开始
日期默认当天，且
限制例如
结束日期选择后，开始
日期中的
日期在此之后的都不能选，反之亦然。
Element-UI日期选择器是一个常用的组件，可以方便地实现日期的选择功能。根据引用\[1\]中的代码，可以看出该日期选择器是一个周选择器，只能选择本周以及本周之前的日期。通过设置picker-options的disabledDate属性，可以限制选择的日期范围。在这个例子中，disabledDate函数中的逻辑是禁止选择本周日以后的日期。具体实现是通过获取今天的日期和计算今天是周几来确定禁止选择的日期范围。如果今天是周日，则禁止选择今天以后的日期；否则，禁止选择本周日以后的日期。
另外，引用\[2\]中的代码展示了如何在Vue中使用Element-UI日期选择器。通过在Vue实例中定义value1和value2这两个变量，可以实现日期的双向绑定。在HTML中，可以使用el-date-picker标签来创建日期选择器，并通过v-model绑定value1和value2变量。通过设置不同的属性，如type、format、placeholder等，可以自定义日期选择器的样式和功能。
最后，引用\[3\]中的代码展示了在Vue项目中安装和使用dayjs库。dayjs是一个轻量级的日期处理库，可以方便地进行日期的格式化、计算和比较等操作。在Vue项目中，可以通过在main.js中引入dayjs，并将其挂载到Vue的原型上，以便在组件中直接使用dayjs函数来处理日期。
综上所述，Element-UI日期选择器是一个功能强大且易于使用的组件，可以满足各种日期选择的需求。通过合理设置属性和使用相关库，可以实现更加灵活和定制化的日期选择功能。
#### 引用[.reference_title]
- *1* *3* [Element UI DatePicker 日期选择器](https://blog.csdn.net/Igiveufireworks/article/details/129047276)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [【elementUI-日期选择器（两个框 限制选择范围、快捷键选择】](https://blog.csdn.net/JUN416326495/article/details/126723033)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]
