zoukankan      html  css  js  c++  java
  • 使用 Element+vue实现开始时间结束时间限制

    html部分:

     1 <div>
     2                         <div style="  220px; margin: 20px auto 0;">
     3                             <el-date-picker
     4                                     v-model="startDate"
     5                                     type="date"
     6                                     placeholder="选择开始日期"
     7                                     format="yyyy/MM/dd "
     8                                     value-format="timestamp"
     9                                     :picker-options="pickerOptionsStart"
    10                                     @change="changeStart">
    11                             </el-date-picker>
    12                         </div>
    13                         <div style="  220px; margin: 20px auto 0;">
    14                             <el-date-picker
    15                                     v-model="endDate"
    16                                     type="date"
    17                                     placeholder="选择结束日期"
    18                                     format="yyyy/MM/dd "
    19                                     value-format="timestamp"
    20                                     :picker-options="pickerOptionsEnd"
    21                                     @change="changeEnd">
    22                             </el-date-picker>
    23                         </div>
    24                     </div>

      js部分:

     1 data() {
     2             return {
     3                 pickerOptionsStart: {},
     4                 pickerOptionsEnd: {},
     5                 startDate: '', // 开始日期
     6                 endDate: '', // 结束日期
     7                 }
     8 }
     9  
    10  
    11  
    12 methods: {
    13            
    14             changeStart() { // 限制开始时间
    15                 this.pickerOptionsEnd = Object.assign({}, this.pickerOptionsEnd, {
    16                     disabledDate: (time) => {
    17                         if (this.startDate) {
    18                             return time.getTime() < this.startDate
    19                         }
    20                     }
    21                 })
    22             },
    23  
    24             changeEnd() { // 限制结束时间
    25                 console.log(this.endDate);
    26                 this.pickerOptionsStart = Object.assign({}, this.pickerOptionsStart, {
    27                     disabledDate: (time) => {
    28                         if (this.endDate) {
    29                             return time.getTime() > this.endDate
    30                         }
    31                     }
    32                 })
    33             },
    34  
    35             beautifyTimeFormat(value) { // 时间戳转换时间格式
    36                 if (value == null) {
    37                     return '';
    38                 } else {
    39                     let date = new Date(value);
    40                     let y = date.getFullYear();//
    41                     let MM = date.getMonth() + 1;//
    42                     MM = MM < 10 ? ('0' + MM) : MM;
    43                     let d = date.getDate();//
    44                     d = d < 10 ? ('0' + d) : d;
    45                     return y + '-' + MM + '-' + d;
    46                 }
    47             }
    48 }

    html写法2

     1 <script src="//unpkg.com/vue/dist/vue.js"></script>
     2 <script src="//unpkg.com/element-ui@2.3.8/lib/index.js"></script>
     3 <div id="app">
     4 <template>
     5   <div class="block">
     6     <span class="demonstration">起始日期</span>
     7     <el-date-picker v-model="startDate" type="date" placeholder="选择日期" :picker-options="pickerOptionsStart" @change="changeEnd">
     8     </el-date-picker>
     9   </div>
    10  
    11   <div class="block">
    12     <span class="demonstration">截止日期</span>
    13     <el-date-picker v-model="endDate" type="date" placeholder="选择日期" :picker-options="pickerOptionsEnd" @change="changeStart">
    14     </el-date-picker>
    15   </div>
    16 </template>
    17 </div>

    js部分:

     1 var Main = {
     2     data() {
     3       return {
     4         pickerOptionsStart: {},
     5         pickerOptionsEnd:{},
     6         startDate: '',
     7         endDate: '',
     8       };
     9     },
    10     methods:{
    11       changeStart (){
    12           this.pickerOptionsStart = Object.assign({},this.pickerOptionsStart,{
    13           disabledDate: (time) => {
    14             return time.getTime() > this.endDate
    15           }
    16         })
    17       },
    18       changeEnd (){
    19           this.pickerOptionsEnd = Object.assign({},this.pickerOptionsEnd,{
    20           disabledDate: (time) => {
    21               return time.getTime() < this.startDate
    22             }
    23         })
    24       }
    25     }
    26   };
    27 var Ctor = Vue.extend(Main)
    28 new Ctor().$mount('#app')

    css部分:

    1 @import url("//unpkg.com/element-ui@2.3.8/lib/theme-chalk/index.css");
    2  
    3 .block{
    4   margin-top:10px;
    5 }

      

  • 相关阅读:
    python中的编码问题
    CVPR2018 Tutorial 之 Visual Recognition and Beyond
    hdu 1376 Octal Fractions
    hdu 1329 Hanoi Tower Troubles Again!
    hdu 1309 Loansome Car Buyer
    hdu 1333 Smith Numbers
    hdu 1288 Hat's Tea
    hdu 1284 钱币兑换问题
    hdu 1275 两车追及或相遇问题
    hdu 1270 小希的数表
  • 原文地址:https://www.cnblogs.com/xiaozhu-zhu/p/11946949.html
Copyright © 2011-2022 走看看