vue + antd vue + moment 日期选择器,选择范围限制

首先我们先把环境配置好
1.安装antd vue(这里就不介绍了)
2.安装moment.js
步骤:
(1)npm i moment
(2)

//main.js
import moment from 'moment';
Vue.prototype.$moment = moment;

需求1:要求日期不可选择未来时间,日期范围不得超过半年

<template>
 	<a-range-picker @change="onChange" @calendarChange="handleCalendarChange" :disabledDate="disabledDate">
 	</a-range-picker>
</template>
<script>
	export default {
     
		data(){
     
			return{
     
				search{
     
					startDate:'',
					endDate:''
				},
				chooseDate:''
			}
		},
		methods:{
     
			//日期范围发生变化的回调
			onChange(date,dateString){
     
				this.search.startDate = dateString[0];
				this.search.endDate= dateString[1];
			},
			//待选日期发生变化的回调(根据选择的日期,来控制不可选,这里仅获取选择的日期)
			handleCalendarChange(value,mode){
     
				//用moment进行格式转换
				this.chooseDate = this.$moment(value[0]._d).format('YYYY-MM-DD');
			},
			//禁止选择的日期(未来日期不可选,半年之前的不可选)
			disabledDate(current){
     
				const chooseDate = this.chooseDate;
				return current && current >= this.$moment().endOf('day') || this.$moment(new Date(chooseDate)).subtract(6,'months')
			}
		}
	}
</script>

需求2:要求日期默认为最近一周,不可选择未来日期

<template>
  <a-form-item label="内容发布时间">
    <div class="date">
        <a-range-picker
         @change="onChangeDate"
         :default-value="[searchParams.pubStartDate,searchParams.pubEndDate]"
         :disabledDate="disabledDate"
       	></a-range-picker>
     </div>
  </a-form-item>
</template>
<script>
	export default{
     
		data(){
     
			searchParams:{
     
				pubStartDate:null,
				pubEndDate:null
			}
		},
		methods:{
     
			onChangeDate (date, dateString) {
     
            	this.searchParams.pubStartDate = dateString[0];
            	this.searchParams.pubEndDate = dateString[1];
        	},
        	 // 禁止选择的日期
        	disabledDate (current) {
     
            	return current && current >= this.$moment().endOf('day');
        	},
		},
		created(){
     
			this.searchParams.pubStartDate = this.$moment().subtract('days', 6).format('YYYY-MM-DD');
			this.searchParams.pubEndDate = this.$moment().format('YYYY-MM-DD');
		}
	}
</script>

你可能感兴趣的:(vue,antd,vue)