企业建站模板下载,logo制作免费软件下载,玉树营销网站建设服务,门户网站开发步骤从底部弹起的滚动选择器。支持五种选择器#xff0c;通过mode来区分#xff0c;分别是普通选择器#xff0c;多列选择器#xff0c;时间选择器#xff0c;日期选择器#xff0c;省市区选择器#xff0c;默认是普通选择器。
学习一下日期选择器
平台差异说明 日期选择默…从底部弹起的滚动选择器。支持五种选择器通过mode来区分分别是普通选择器多列选择器时间选择器日期选择器省市区选择器默认是普通选择器。
学习一下日期选择器
平台差异说明 日期选择默认在App端和H5端PC版Chrome以及PC版FireFox调用的是os的原生日期选择控件在不同平台有不同的ui表现当配置fields参数后使用统一的展示方式。
属性说明 fields 有效值 演示效果
完整代码
templateview classpages!-- picker时间选择 --view classuni-listview classuni-list-cellview classuni-list-cell-left当前选择/viewview classuni-list-cell-dbpicker modedate :valuedate :startstartDate :endendDate changebindDateChangeview classuni-input{{date}}/view/picker/view/view/view/view
/templatescriptexport default {data() {const currentDate this.getDate({format: true})return {index: 0,date: currentDate,}},computed: {startDate() {return this.getDate(start);},endDate() {return this.getDate(end);}},methods: {bindDateChange: function(e) {this.date e.detail.value},getDate(type) {const date new Date();let year date.getFullYear();let month date.getMonth() 1;let day date.getDate();if (type start) {year year - 60;} else if (type end) {year year 2;}month month 9 ? month : 0 month;day day 9 ? day : 0 day;return ${year}-${month}-${day};}}}
/scriptstyle scoped langscss.pages {background-color: #eee;height: 100vh;}.uni-list{background-color: #fff;// margin: 10px;margin-top: 10px;padding: 10px;}/style
