el-date-picker 时间选择器自定义年月日格式

el-date-picker 时间选择器自定义年月日三种

选择年后，选月份时会默认所选年份，日期一样
当自选日期后，年份月份也会与当前选择一致

代码

 <div class=''><span>年</span><el-date-pickerv-model="selectYear"size='mini'type="year"@change='selectYearFun'placeholder="选择年"></el-date-picker>
</div>
<div class=''><span>月</span><el-date-pickersize='mini'v-model="selectMonth"type="month"format='MM':default-value='timeDefaultShow'@change='selectMonthFun'placeholder="选择月"></el-date-picker>
</div>
<div class=''><span>日</span><el-date-pickersize='mini'v-model="selectDay"type="date"format='dd':default-value='timeDefaultShow2'@change='selectDayFun'placeholder="选择日"></el-date-picker>
</div>

data(){return{selectYear:'',selectMonth:'',selectDay:'',timeDefaultShow:'',timeDefaultShow2:'',}
}

 /**
* 选择年份
* */
selectYearFun(year){this.selectMonth = '';this.selectDay = '';this.timeDefaultShow = year
},//下面方面加了if判断，当清空当前日期或月份时，不会清空前面所选
/**
* 选择月份
* */
selectMonthFun(month){console.log(month)this.selectDay = '';if( month ){this.selectYear = month;this.timeDefaultShow2 = month}
},
/**
* 选择日期
* */
selectDayFun(day){console.log(day,'-------------');if( day ){this.selectYear = daythis.selectMonth = day}},

el-date-picker 时间选择器自定义年月日格式相关推荐

date类型的时间转换成年月日格式
原格式: <fmt:formatDate value="${validity.wtrq}" pattern="yyyy/MM/dd" /> 显示为: ...
【转】微信小程序日期时间选择器（年月日时分秒）
公司需要用到秒但是小程序提供的只到分钟 vantui也只到分钟,真的是有问题啊从网上找了一个试了试可以用如下: <picker mode="multiSelector" ...
vue:时间选择器自定义时间可选范围
vue:el-date-picker 时间自定义选择时间范围注:该方法需写再计算属性中补充:(后面时分秒的禁选)在disabledDate的后面加一个selectableRange 时间自定义选择 ...
elementUI中DateTimePicker 日期时间选择器自定义开发，固定时间段，修改时间后取当前输入作为时间段起始
最近项目需求默认时间段前一天20:00 - 第二天8:00,更改日期选择后,快捷选项以更改后的时分秒范围来取值,记录一下. 组件代码: <el-date-picker v-model=" ...
微信小程序 - 日期时间选择器（年月日时分秒）
前言您只需要跟着步骤一路复制粘贴,最后看一下使用示例即可. 由于微信官方的 <picker> 组件不支持同时选择年月日时分, 所以在此官方组件上再次封装,可靠性毋庸置疑. 您将获得一个 ...
uniapp picker时间选择器
//第一种 <picker @change="bindPickerChange" :value="index" :range="appointL ...
前端将时间数据处理为年月日格式
实现很简单,两种方法. 字符串截取这是投机取巧的方法,要求后传递的数据比较规范. getNewsByPage(this.size, val).then(res => {this.tableDa ...
vant的时间选择器使用
vant的时间选择器: <van-popup:show="showPop"position="bottom"label="有效日期"c ...
Android 自定义年月日日期选择器、时分时间选择器
实现效果: 日期选择器时间 ...

el-date-picker 时间选择器自定义年月日格式

el-date-picker 时间选择器自定义年月日格式相关推荐

最新文章

热门文章

el-date-picker 时间选择器 自定义年月日格式

el-date-picker 时间选择器 自定义年月日格式相关推荐

最新文章

热门文章

el-date-picker 时间选择器自定义年月日格式

el-date-picker 时间选择器自定义年月日格式相关推荐