ant-design-vue中a-date-picker组件只选择年份

<a-form-model-item label="开始年限：" prop="all_plan_one" ><a-date-pickermode="year"placeholder="请选择年份"format='YYYY'v-model="addForm.all_plan_one"style="width:100%":open='yearShowOne'@openChange="

小仙女de成长

3369人浏览 · 2020-11-12 11:46:37

小仙女de成长 · 2020-11-12 11:46:37 发布

<a-form-model-item label="开始年限：" prop="all_plan_one" >
   <a-date-picker 
   mode="year" 
   placeholder="请选择年份" 
   format='YYYY' 
   v-model="addForm.all_plan_one"  
   style="width:100%"
   :open='yearShowOne'  
   @openChange="openChangeOne" 
   @panelChange="panelChangeOne" 
   :disabled="modalDisabled"/>
</a-form-model-item>

在模型数据data中

//年度计划的打开关闭状态，true为打开，false为关闭
yearShowOne:false,
//添加对话框的表单绑定
addForm:{
    all_plan_one:null,//开始年限
},

方法中

// 弹出日历和关闭日历的回调
openChangeOne(status){
	//status是打开或关闭的状态
    if(status){
         this.yearShowOne =  true
     }
 },
// 得到年份选择器的值
panelChangeOne(value){
     this.addForm.all_plan_one = value
     this.yearShowOne = false
 },

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^