自定义日期校验

src/views/ebiz/billingDetail/billingDetail.vue

@@ -276,7 +276,7 @@
 </template>
 
 <script>
-import { Icon, RadioGroup, Radio, DatetimePicker } from 'vant'
+import { Icon, RadioGroup, Radio, DatetimePicker, Toast } from 'vant'
 import tableDetail2 from '@/components/ebiz/billingDetail/tableDetail2'
 import generateImg from '../generateImg/generateImg.vue'
 import policyDetails from './policyDetails.vue'
@@ -297,6 +297,7 @@ export default {
     [RadioGroup.name]: RadioGroup,
     [Radio.name]: Radio,
     [DatetimePicker.name]: DatetimePicker,
+    [Toast.name]: Toast,
 
     FieldDatePicter
   },
@@ -474,6 +475,14 @@ export default {
       this.queryOutOrderListFunc()
     },
     popupOnConfirm() {
+      if(this.dialogForm.dateFlag == 'y') {
+        if(this.isStartDateInvalid()) {
+          Toast({message: '开始日期不能小于结束日期!',size: 'large'});
+          return
+        } else {
+          this.titleText = this.dialogForm.startDate.toString() + '~' + this.dialogForm.endDate.toString()
+        }
+      }
       if (!this.dialogForm.dateFlag) {
         this.startDate = this.dialogForm.startDate
         this.endDate = this.dialogForm.endDate
@@ -492,9 +501,7 @@ export default {
         this.titleText = this.monthValue
       }
       
-      if(this.dateFlag == 'y') {
-        this.titleText = this.dialogForm.startDate.toString() + '~' + this.dialogForm.endDate.toString()
-      }
+      
       this.outOrderTypeChange()
       this.queryOutOrderListFunc()
     },
@@ -802,6 +809,9 @@ export default {
       }
 
     },
+    isStartDateInvalid() {
+      return this.dialogForm.endDate && new Date(this.dialogForm.startDate) > new Date(this.dialogForm.endDate);
+    },
     // 选择月份事件
     formatter(type, value) {
       if (type === 'year') {
@@ -1033,4 +1043,7 @@ table {
   text-align: center;
   margin-top: 100px;
 }
+/deep/.van-toast--text {
+    width: 230px !important;
+}
 </style>