• uni-app yrkDataPicker 日期和时间选择控件

    uni-app 选择日期时间控件有 2 月份有 31 天的问题，一直没有修复，uni-calendar 苹果有选择年份和月份后无法显示问题。自己写了一个，只支持 H5 和微信小程序，其他没有试过。

    1. <template>
    2. 	<view class="yrk-data-picker">
    3. 		<uni-popup ref="pickerView" type="bottom" style="z-index: 9999999;">
    4. 			<view class="popup-view">
    5. 				<view class="popup-view-header">
    6. 					<view class="popup-view-cancel" @click="pickerCancel">取消</view>
    7. 					<view class="popup-view-confirm" @click="pickerConfirm">完成</view>
    8. 				</view>
    9. 				<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="values" @change="bindChange" class="picker-view">
    10. 					<picker-view-column :style="dateStyle">
    11. 					    <view class="item" v-for="(item,index) in years" :key="index">{{formatTime(item)}}{{labels[0]}}</view>
    12. 					</picker-view-column>
    13. 					<picker-view-column  :style="dateStyle">
    14. 					    <view class="item" v-for="(item,index) in months" :key="index">{{formatTime(item)}}{{labels[1]}}</view>
    15. 					</picker-view-column>
    16. 					<picker-view-column  :style="dateStyle">
    17. 					    <view class="item" v-for="(item,index) in days" :key="index">{{formatTime(item)}}{{labels[2]}}</view>
    18. 					</picker-view-column>
    19. 					<picker-view-column :style="timeStyle">
    20. 					    <view class="item" v-for="(item,index) in hours" :key="index">{{formatTime(item)}}{{labels[3]}}</view>
    21. 					</picker-view-column>
    22. 					<picker-view-column :style="timeStyle">
    23. 					    <view class="item" v-for="(item,index) in minutes" :key="index">{{formatTime(item)}}{{labels[4]}}</view>
    24. 					</picker-view-column>
    25. 				</picker-view>
    26. 			</view>
    27. 		</uni-popup>
    28. 	</view>
    29. </template>
    30.  
    31. <script>
    32. 	const da = new Date()
    33. 	/**
    34. 	 * yrkDataPicker 日期和时间选择控件
    35. 	 * @description 日期和时间选择控件 
    36. 	 * @copyright https://my.oschina.net/lovelong1/
    37. 	 * @property {Number} startYear 年份开始日期，默认1900
    38. 	 * @property {Number} endYear 年份结束日期 默认当前年份
    39. 	 * @property {String} mode = ['date','time','datetime'] 选择模式，日期，时间，日期时间，不包含秒针。
    40. 	 * @property {String} value 默认日期 格式，'1900-01-01 01:01:01' 默认当前，目前只支持全
    41. 	 * @event {Function} change 控件更换 参数 event 参考 picker-view change
    42. 	 * @event {Function} cancel 选择取消按钮 
    43. 	 * @event {Function} confirm 选择确认按钮 参数 格式化日期 Date数据
    44. 	 * @example <yrk-data-picker ref="pickerView" mode="time" value="1981-05-01 23:01:01" @confirm="pickerConfirm"></yrk-data-picker>
    45. 	 * 显示控件 this.$refs.pickerView.open('bottom');
    46. 	 * 关闭控件 this.$refs.pickerView.close();
    47. 	 * pickerConfirm(dateStr,da){ console.log(dataStr,da); }
    48. 	 */	
    49. 	export default {
    50. 		name:'yrkDataPicker',
    51. 		props: {
    52. 			startYear:	{ type:	Number, default:	1900 },
    53. 			endYear:	{ type:	Number, default:	da.getFullYear() },
    54. 			
    55. 			mode: 		{ type: String,	default: 	'time'	},
    56. 			value:		{ type: String,	default: 	null },
    57. 			
    58. 		},
    59. 		computed: {
    60. 			// 解决微信不显示问题。
    61. 			dateStyle() { return this.getStyle(['date','datetime']) },
    62. 			timeStyle() { return this.getStyle(['time','datetime']) }
    63. 		},
    64. 		watch: {
    65. 			mode:{
    66. 				immediate:true,
    67. 				handler(newValue, oldValue){this.init()}
    68. 			},
    69. 			value:{
    70. 				immediate:true,
    71. 				handler(newValue, oldValue){this.init()}
    72. 			}
    73. 		},
    74. 		data() {
    75. 			return {
    76. 				visible: true,
    77. 				tempvalues:[],//临时保存数据
    78. 				values:[],
    79. 				defaults:[
    80. 					{start:1900,end:da.getFullYear()},
    81. 					{start:1,end:12},
    82. 					{start:1,end:31},
    83. 					{start:0,end:23},
    84. 					{start:0,end:59}
    85. 				],
    86. 				labels:['年','月','日','点','分'],
    87. 				keys:['years','months','days','hours','minutes'],
    88. 				years:[],
    89. 				months :[],
    90. 				days :[],
    91. 				hours:[],
    92. 				minutes:[],
    93. 				indicatorStyle: ``,
    94. 			}
    95. 		},
    96. 		created() {
    97. 			this.defaults[0]={start:this.startYear,end:this.endYear};
    98. 			this.defaults.forEach((item,index)=>{
    99. 				for(let i = item.start;i<=item.end;i++){
    100. 					this[this.keys[index]].push(i);
    101. 				}
    102. 			})
    103. 		},
    104. 		methods: {
    105. 			getStyle(modes){
    106. 				const isShow = modes.includes(this.mode);
    107. 				return `flex:${isShow?1:0};width:${isShow?'auto':'0px'};`
    108. 			},
    109. 			init(){
    110. 				this.$nextTick(()=>{
    111. 					let year = da.getFullYear();
    112. 					let month = da.getMonth();
    113. 					let day = da.getDate();
    114. 					let hour = da.getHours();
    115. 					let minute = da.getMinutes();
    116. 					if(this.value){
    117. 						const val = this.parse(this.value);
    118. 						year = val.getFullYear();
    119. 						month = val.getMonth();
    120. 						day = val.getDate();
    121. 						hour = val.getHours();
    122. 						minute = val.getMinutes();
    123. 					}
    124. 					year = year - this.startYear;
    125. 					this.values = [0, 0, 0, 0, 0];
    126. 					setTimeout(()=>{
    127. 						this.values = [year, month, day-1,hour,minute];
    128. 					},0)
    129. 					this.upDays(year, month);
    130. 				})
    131. 			},
    132. 			parse: function(str) {
    133. 				var a = str.split(/[^0-9]/);
    134. 				return new Date(a[0], a[1] - 1, a[2], a[3], a[4], a[5]);
    135. 			},
    136. 			open(e){
    137. 				this.$refs.pickerView.open(e);
    138. 			},
    139. 			close(){
    140. 				this.$refs.pickerView.close();
    141. 				this.$emit('close')
    142. 			},
    143. 			pickerCancel() {
    144. 				this.$refs.pickerView.close();
    145. 				this.$emit('cancel')
    146. 			},
    147. 			formatTime(t){
    148. 				return (t<10?`0`:'')+t
    149. 			},
    150. 			pickerConfirm() {
    151. 				this.values = this.tempvalues;
    152. 				let year = this.formatTime(this.years[this.values[0]]);
    153. 				let month = this.formatTime(this.months[this.values[1]]) ;
    154. 				let day = this.formatTime(this.days[this.values[2]]) ;
    155. 				let hour = this.formatTime(this.hours[this.values[3]]);
    156. 				let minute = this.formatTime(this.minutes[this.values[4]]) ;
    157. 				let value = `${year}-${month}-${day} ${hour}:${minute}:00`
    158. 				if(this.mode==='date'){
    159. 					value = `${year}-${month}-${day}`
    160. 				}else if(this.mode==='time'){
    161. 					 value = `${hour}:${minute}`
    162. 				}
    163. 				this.$refs.pickerView.close();
    164. 				// console.log(value ,new Date(year,month-1,day,hour,minute,0))
    165. 				this.$emit('confirm', value ,new Date(year,month-1,day,hour,minute,0))
    166. 			},
    167. 			bindChange(e){
    168. 				// console.log(e);
    169. 				if(this.values[1] != e.detail.value[1]){
    170. 					const year = e.detail.value[0]+this.startYear;
    171. 					const month = e.detail.value[1]+1;
    172. 					this.upDays(year, month);
    173. 				}
    174. 				this.tempvalues = e.detail.value;
    175. 				this.$emit('change', e)
    176. 			},
    177. 			upDays(year,month){
    178. 				const monthDays = this.getMonthDaysByYearMonth(year,month);
    179. 				this.days = [];
    180. 				for (let i = 1; i <= monthDays; i++) this.days.push(i);
    181. 			},
    182. 			getMonthDaysByDate(da){
    183. 				return 	this.getMonthDaysByYearMonth(da.getFullYear(), da.getMonth);
    184. 			},
    185. 			getMonthDaysByYearMonth(year=1900,month=0){
    186. 				return 	new Date(year, month,0).getDate();
    187. 			}
    188. 		}
    189. 	}
    190. </script>
    191.  
    192. <style lang="scss">
    193. 	.popup-view {
    194. 		background-color: #FFFFFF;
    195. 		.popup-view-header {
    196. 			display: flex;
    197. 			flex-direction: row;
    198. 			justify-content: space-between;
    199. 			align-items: center;
    200. 			border-bottom: 1px solid #F5F5F5;
    201. 			.popup-view-cancel,.popup-view-confirm {
    202. 				box-sizing: border-box;
    203. 				padding: 0 28rpx;
    204. 				font-size: 34rpx;
    205. 				line-height: 90rpx;
    206. 			}
    207. 			.popup-view-cancel{
    208. 				color: #888888;
    209. 			}
    210. 			.popup-view-confirm{
    211. 				color: #007aff;
    212. 			}
    213. 		}
    214. 		.picker-view {
    215. 			height: 476rpx;
    216. 			margin-top: 20rpx;
    217. 			.item{
    218. 				text-align: center;
    219. 				display: flex;
    220. 				flex-direction: column;
    221. 				align-items: center;
    222. 				justify-content: center;
    223. 			}
    224.  
    225. 		}
    226. 		picker-view-column{
    227. 			// display: flex;
    228. 		}
    229. 	}
    230. </style>

  • 相关阅读:
    Unity开发者3D模型基础
    从0开始python学习-34.pytest常用插件
    卷积输入输出维度计算公式，Conv, Dilation Conv, Padding, Kernel_size, Output的维度计算关系
    uniapp——项目day04
    如何保护人工智能隐私？
    树莓 LUMA-OLED.EXAMPLE使用
    idea如何隐藏background tasks
    【从零开始学习 SystemVerilog】5.1、SystemVerilog 通信—— 进程间通信
    给 Pod 添加 DNS 记录
    Objective-C和C/C++混合编译
  • 原文地址：https://blog.csdn.net/lovelong1981/article/details/133917778