valor inicial predeterminado del selector de fecha vue de diseño de hormigas más registro de suma de comprobación

Requisitos del proyecto: selector de fecha de envío de formulario, el valor inicial predeterminado de la fecha de inicio es el día actual, el valor inicial predeterminado de la fecha límite es el último día del mes, y no se puede seleccionar el tiempo anterior al día actual, y el El formulario enviado debe ser verificado.

// 正确代码
// date-picker在表单中默认初始值要用initialValue赋值,不要使用defaultValue,否则表单提交获取不到默认值
<template>
	<a-form :form="form" @submit="handleSubmit">
		<a-form-item 
			label="开始时间" 
			:labelCol="labelCol" 
			:wrapperCol="wrapperCol" >
		          <a-date-picker
		            :disabled-date="disabledEndDate"
		            v-decorator="[ 'startTime', 
		            {
    
     
		            initialValue: taskStartTime,
		            rules: [{
    
     required: true, message: '请选择开始时间'}]
		            } 
		           ]"
		          >
		          </a-date-picker>
		</a-form-item>
		<a-form-item 
			label="截止时间" 
			:labelCol="labelCol" 
			:wrapperCol="wrapperCol" >
		     <a-date-picker
			       :disabled-date="disabledEndDate"
			       v-decorator="[ 
			       'endTime', 
			       {
    
    
			       	initialValue: monthDate,  // 初始值通过initialValue赋值
			       	rules: [{
    
     required: true, message: '请选择截止时间'}], 
			       } 
			      ]"
		          >
		    	</a-date-picker>
		</a-form-item>
		<a-form-item :wrapper-col="{ span: 12, offset: 5 }">
	      <a-button type="primary" @click="handleSubmit">
	        提交
	      </a-button>
	    </a-form-item>
	</form>
</template>
import moment from 'moment'
export default {
    
    
	data(){
    
    
		return {
    
    
			form: this.$form.createForm(this, {
    
     name: 'coordinated' }),
			labelCol: {
    
    
		        xs: {
    
     span: 24 },
		        sm: {
    
     span: 5 }
		     },
		    wrapperCol: {
    
    
		        xs: {
    
     span: 24 },
		        sm: {
    
     span: 16 }
	      	},
		    taskStartTime: moment(new Date()).format('YYYY-MM-DD'), //开始日期当天
		    monthDate: '', // 截止日期
		},
		created(){
    
    
			this.getmonthDate()
		},
		methods:{
    
    
			getmonthDate () {
    
    
		      // var monthDate = ''
		      var now = new Date() // 当前日期
		      var nowMonth = now.getMonth() // 当前月
		      var nowYear = now.getFullYear() // 当前年
		      // 本月的开始时间
		      // var monthStartDate = new Date(nowYear, nowMonth, 1)
		      // var yy = monthStartDate.getFullYear() + '-'
		      // var mm =
		      //   (monthStartDate.getMonth() + 1 < 10
		      //     ? '0' + (monthStartDate.getMonth() + 1)
		      //     : monthStartDate.getMonth() + 1) + '-'
		      // var dd =
		      //   monthStartDate.getDate() < 10
		      //     ? '0' + monthStartDate.getDate()
		      //     : monthStartDate.getDate()
		      // 本月的结束时间
		      var monthEndDate = new Date(nowYear, nowMonth + 1, 0)
		      var YY = monthEndDate.getFullYear() + '-'
		      var MM =
		        (monthEndDate.getMonth() + 1 < 10
		          ? '0' + (monthEndDate.getMonth() + 1)
		          : monthEndDate.getMonth() + 1) + '-'
		      var DD =
		        monthEndDate.getDate() < 10
		          ? '0' + monthEndDate.getDate()
		          : monthEndDate.getDate()
		      // monthDate.start_day = yy + mm + dd
		      this.monthDate = YY + MM + DD    // 本月最后一天
		      // return monthDate
		      console.log(this.monthDate)
		    },
		    // 禁止选择当天之前的日期 不包含当天
		    disabledEndDate (current) {
    
    
		        return current && current < moment().subtract(1, 'days') // 当天之前的不可选,不包括当天
		      // return current && current < moment().endOf(‘day') 当天之前的不可选,包括当天
		    },
		    // 表单提交
		    handleSubmit(e) {
    
    
		      e.preventDefault();
		      this.form.validateFields((err, values) => {
    
    
		        if (!err) {
    
    
		          console.log('Received values of form: ', values);
		        }
		      });
		    },
		}
	}

Supongo que te gusta

Origin blog.csdn.net/ccyolo/article/details/119026015
Recomendado
Clasificación