博客

<Col span="7">
    <FormItem label="DatePicker">
         <Row>
               <Col span="11">
                    <DatePicker type="date" placeholder="Select date" v-model="formValidation.startTime" :option="startTimeOption" @on-change="startTimeChange"></DatePicker>
                  </Col>
                  <Col span="2" style="text-align: center">-</Col>
                  <Col span="11">
                        <DatePicker type="date" placeholder="Select date" v-model="formValidation.endTime" :option="endTimeOption" @on-change="endTimeChange"></DatePicker>
                   </Col>
              </Row>
    </FormItem>
</Col>

<script>
export default{
    data(){
        return{
             areaList:[
                  {
                       value:1,
                       label:'监狱1'
                  },
                  {
                       value:2,
                       label:'监狱2'
                  }
             ],
              formValidate:{
                  area:'',
                  name:'',
                  startTime:'',
                  endTime:''
             }
        }
    },
    computed:{
         //设置不可选择的日期,option的disabledDate属性
         startTimeOption(){
               return{
                     //date为从1970开始的日期
                     disabledDate:date=>{
                           let endTime  = new Date(this.formValidate.endTime).valueOf();
                            //若返回值为ture 则该日期处于禁用状态
                            return date && date.valueOf() >endTime;
                     }
               }
          },
         endTimeOption(){
               return{
                     disabledDate:date=>{
                           //为了让结束日期可以选择当前开始日期，则减去一天的时间
                           let startTime  = new Date(this.formValidate.startTime).valueOf() -1*24*60*60*1000;
                            return date && date.valueOf() <startTime  ;
                     }
               }
          },     
    },
    methods:{
         //e为已经格式化的当前选中的日期
         startTimeChange(e){
                 this.formValidate.startTime =e;
         },
         endTimeChange(e){
                 this.formValidate.endTime =e;
         },

    }
}
</script>