u-datetime-picker.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341
  1. <template>
  2. <u-picker
  3. ref="picker"
  4. :show="show"
  5. :closeOnClickOverlay="closeOnClickOverlay"
  6. :columns="columns"
  7. :title="title"
  8. :defaultIndex="innerDefaultIndex"
  9. :cancelText="cancelText"
  10. :confirmText="confirmText"
  11. :cancelColor="cancelColor"
  12. :confirmColor="confirmColor"
  13. @close="close"
  14. @cancel="cancel"
  15. @confirm="confirm"
  16. @change="change"
  17. >
  18. </u-picker>
  19. </template>
  20. <script>
  21. function times(n, iteratee) {
  22. let index = -1
  23. const result = Array(n < 0 ? 0 : n)
  24. while (++index < n) {
  25. result[index] = iteratee(index)
  26. }
  27. return result
  28. }
  29. import props from './props.js';
  30. import dayjs from '../../libs/util/dayjs.js';
  31. /**
  32. * DatetimePicker 时间日期选择器
  33. * @description 此选择器用于时间日期
  34. * @tutorial https://www.uviewui.com/components/datetimePicker.html
  35. * @property {Boolean} show 用于控制选择器的弹出与收起 ( 默认 false )
  36. * @property {Boolean} showToolbar 是否显示顶部的操作栏 ( 默认 true )
  37. * @property {String | Number} value 绑定值
  38. * @property {String} title 顶部标题
  39. * @property {String} mode 展示格式 mode=date为日期选择,mode=time为时间选择,mode=year-month为年月选择,mode=datetime为日期时间选择 ( 默认 ‘datetime )
  40. * @property {Number} maxDate 可选的最大时间 默认值为后10年
  41. * @property {Number} minDate 可选的最小时间 默认值为前10年
  42. * @property {Number} minHour 可选的最小小时,仅mode=time有效 ( 默认 0 )
  43. * @property {Number} maxHour 可选的最大小时,仅mode=time有效 ( 默认 23 )
  44. * @property {Number} minMinute 可选的最小分钟,仅mode=time有效 ( 默认 0 )
  45. * @property {Number} maxMinute 可选的最大分钟,仅mode=time有效 ( 默认 59 )
  46. * @property {Function} filter 选项过滤函数
  47. * @property {Function} formatter 选项格式化函数
  48. * @property {Boolean} loading 是否显示加载中状态 ( 默认 false )
  49. * @property {String | Number} itemHeight 各列中,单个选项的高度 ( 默认 44 )
  50. * @property {String} cancelText 取消按钮的文字 ( 默认 '取消' )
  51. * @property {String} confirmText 确认按钮的文字 ( 默认 '确认' )
  52. * @property {String} cancelColor 取消按钮的颜色 ( 默认 '#909193' )
  53. * @property {String} confirmColor 确认按钮的颜色 ( 默认 '#3c9cff' )
  54. * @property {String | Number} visibleItemCount 每列中可见选项的数量 ( 默认 5 )
  55. * @property {Boolean} closeOnClickOverlay 是否允许点击遮罩关闭选择器 ( 默认 false )
  56. * @property {Array} defaultIndex 各列的默认索引
  57. * @event {Function} close 关闭选择器时触发
  58. * @event {Function} confirm 点击确定按钮,返回当前选择的值
  59. * @event {Function} change 当选择值变化时触发
  60. * @event {Function} cancel 点击取消按钮
  61. * @example <u-datetime-picker :show="show" :value="value1" mode="datetime" ></u-datetime-picker>
  62. */
  63. export default {
  64. name: 'datetime-picker',
  65. mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
  66. data() {
  67. return {
  68. columns: [],
  69. innerDefaultIndex: [],
  70. innerFormatter: (type, value) => value
  71. }
  72. },
  73. watch: {
  74. show(newValue, oldValue) {
  75. if (newValue) {
  76. this.updateColumnValue(this.value)
  77. }
  78. },
  79. propsChange() {
  80. this.init()
  81. }
  82. },
  83. computed: {
  84. // 如果以下这些变量发生了变化,意味着需要重新初始化各列的值
  85. propsChange() {
  86. return [this.mode, this.maxDate, this.minDate, this.minHour, this.maxHour, this.minMinute, this.maxMinute, this.filter, ]
  87. }
  88. },
  89. mounted() {
  90. this.init()
  91. },
  92. methods: {
  93. init() {
  94. this.innerValue = this.correctValue(this.value)
  95. this.updateColumnValue(this.innerValue)
  96. },
  97. // 在微信小程序中,不支持将函数当做props参数,故只能通过ref形式调用
  98. setFormatter(e) {
  99. this.innerFormatter = e
  100. },
  101. // 关闭选择器
  102. close() {
  103. if (this.closeOnClickOverlay) {
  104. this.$emit('close')
  105. }
  106. },
  107. // 点击工具栏的取消按钮
  108. cancel() {
  109. this.$emit('cancel')
  110. },
  111. // 点击工具栏的确定按钮
  112. confirm() {
  113. this.$emit('confirm', {
  114. value: this.innerValue,
  115. mode: this.mode
  116. })
  117. this.$emit('input', this.innerValue)
  118. },
  119. // 列发生变化时触发
  120. change(e) {
  121. const { indexs, values } = e
  122. let selectValue = ''
  123. if(this.mode === 'time') {
  124. // 根据value各列索引,从各列数组中,取出当前时间的选中值
  125. selectValue = `${values[0][indexs[0]]}:${values[1][indexs[1]]}`
  126. } else {
  127. // 将选择的值转为数值,比如'03'转为数值的3,'2019'转为数值的2019
  128. const year = parseInt(values[0][indexs[0]])
  129. const month = parseInt(values[1][indexs[1]])
  130. let date = parseInt(values[2] ? values[2][indexs[2]] : 1)
  131. let hour = 0, minute = 0
  132. // 此月份的最大天数
  133. const maxDate = dayjs(`${year}-${month}-${date}`).daysInMonth()
  134. // year-month模式下,date不会出现在列中,设置为1,为了符合后边需要减1的需求
  135. if (this.mode === 'year-month') {
  136. date = 1
  137. }
  138. // 不允许超过maxDate值
  139. date = Math.min(maxDate, date)
  140. if (this.mode === 'datetime') {
  141. hour = parseInt(values[3][indexs[3]])
  142. minute = parseInt(values[4][indexs[4]])
  143. }
  144. // 转为时间模式
  145. selectValue = Number(new Date(year, month - 1, date, hour, minute))
  146. }
  147. // 取出准确的合法值,防止超越边界的情况
  148. selectValue = this.correctValue(selectValue)
  149. this.innerValue = selectValue
  150. this.updateColumnValue(selectValue)
  151. // 发出change时间,value为当前选中的时间戳
  152. this.$emit('change', {
  153. value: selectValue,
  154. // #ifndef MP-WEIXIN
  155. // 微信小程序不能传递this实例,会因为循环引用而报错
  156. picker: this.$refs.picker,
  157. // #endif
  158. mode: this.mode
  159. })
  160. },
  161. // 更新各列的值,进行补0、格式化等操作
  162. updateColumnValue(value) {
  163. this.innerValue = value
  164. this.updateColumns()
  165. this.updateIndexs(value)
  166. },
  167. // 更新索引
  168. updateIndexs(value) {
  169. let values = []
  170. const formatter = this.formatter || this.innerFormatter
  171. const padZero = uni.$u.padZero
  172. if (this.mode === 'time') {
  173. // 将time模式的时间用:分隔成数组
  174. const timeArr = value.split(':')
  175. // 使用formatter格式化方法进行管道处理
  176. values = [formatter('hour', timeArr[0]), formatter('minute', timeArr[1])]
  177. } else {
  178. const date = new Date(value)
  179. values = [
  180. formatter('year', `${dayjs(value).year()}`),
  181. // 月份补0
  182. formatter('month', padZero(dayjs(value).month() + 1))
  183. ]
  184. if (this.mode === 'date') {
  185. // date模式,需要添加天列
  186. values.push(formatter('day', padZero(dayjs(value).date())))
  187. }
  188. if (this.mode === 'datetime') {
  189. // 数组的push方法,可以写入多个参数
  190. values.push(formatter('day', padZero(dayjs(value).date())), formatter('hour', padZero(dayjs(value).hour())), formatter('minute', padZero(dayjs(value).minute())))
  191. }
  192. }
  193. // 根据当前各列的所有值,从各列默认值中找到默认值在各列中的索引
  194. const indexs = this.columns.map((column, index) => {
  195. // 通过取大值,可以保证不会出现找不到索引的-1情况
  196. return Math.max(0, column.findIndex(item => item === values[index]))
  197. })
  198. this.innerDefaultIndex = indexs
  199. },
  200. // 更新各列的值
  201. updateColumns() {
  202. const formatter = this.formatter || this.innerFormatter
  203. // 获取各列的值,并且map后,对各列的具体值进行补0操作
  204. const results = this.getOriginColumns().map((column) => column.values.map((value) => formatter(column.type, value)))
  205. this.columns = results
  206. },
  207. getOriginColumns() {
  208. // 生成各列的值
  209. const results = this.getRanges().map(({ type, range }) => {
  210. let values = times(range[1] - range[0] + 1, (index) => {
  211. let value = range[0] + index
  212. value = type === 'year' ? `${value}` : uni.$u.padZero(value)
  213. return value
  214. })
  215. // 进行过滤
  216. if (this.filter) {
  217. values = this.filter(type, values)
  218. }
  219. return { type, values }
  220. })
  221. return results
  222. },
  223. // 通过最大值和最小值生成数组
  224. generateArray(start, end) {
  225. return Array.from(new Array(end + 1).keys()).slice(start)
  226. },
  227. // 得出合法的时间
  228. correctValue(value) {
  229. const isDateMode = this.mode !== 'time'
  230. if (isDateMode && !uni.$u.test.date(value)) {
  231. // 如果是日期类型,但是又没有设置合法的当前时间的话,使用最小时间为当前时间
  232. value = this.minDate
  233. } else if (!isDateMode && !value) {
  234. // 如果是时间类型,而又没有默认值的话,就用最小时间
  235. value = `${uni.$u.padZero(this.minHour)}:uni.$u.padZero(this.minMinute)}`
  236. }
  237. // 时间类型
  238. if (!isDateMode) {
  239. if (String(value).indexOf(':') === -1) return uni.$u.error('时间错误,请传递如12:24的格式')
  240. let [hour, minute] = value.split(':')
  241. // 对时间补零,同时控制在最小值和最大值之间
  242. hour = uni.$u.padZero(uni.$u.range(this.minHour, this.maxHour, Number(hour)))
  243. minute = uni.$u.padZero(uni.$u.range(this.minMinute, this.maxMinute, Number(minute)))
  244. return `${ hour }:${ minute }`
  245. } else {
  246. // 如果是日期格式,控制在最小日期和最大日期之间
  247. value = dayjs(value).isBefore(dayjs(this.minDate)) ? this.minDate : value
  248. value = dayjs(value).isAfter(dayjs(this.maxDate)) ? this.maxDate : value
  249. return value
  250. }
  251. },
  252. // 获取每列的最大和最小值
  253. getRanges() {
  254. if (this.mode === 'time') {
  255. return [
  256. {
  257. type: 'hour',
  258. range: [this.minHour, this.maxHour],
  259. },
  260. {
  261. type: 'minute',
  262. range: [this.minMinute, this.maxMinute],
  263. },
  264. ];
  265. }
  266. const { maxYear, maxDate, maxMonth, maxHour, maxMinute, } = this.getBoundary('max', this.innerValue);
  267. const { minYear, minDate, minMonth, minHour, minMinute, } = this.getBoundary('min', this.innerValue);
  268. const result = [
  269. {
  270. type: 'year',
  271. range: [minYear, maxYear],
  272. },
  273. {
  274. type: 'month',
  275. range: [minMonth, maxMonth],
  276. },
  277. {
  278. type: 'day',
  279. range: [minDate, maxDate],
  280. },
  281. {
  282. type: 'hour',
  283. range: [minHour, maxHour],
  284. },
  285. {
  286. type: 'minute',
  287. range: [minMinute, maxMinute],
  288. },
  289. ];
  290. if (this.mode === 'date')
  291. result.splice(3, 2);
  292. if (this.mode === 'year-month')
  293. result.splice(2, 3);
  294. return result;
  295. },
  296. // 根据minDate、maxDate、minHour、maxHour等边界值,判断各列的开始和结束边界值
  297. getBoundary(type, innerValue) {
  298. const value = new Date(innerValue)
  299. const boundary = new Date(this[`${type}Date`])
  300. const year = dayjs(boundary).year()
  301. let month = 1
  302. let date = 1
  303. let hour = 0
  304. let minute = 0
  305. if (type === 'max') {
  306. month = 12
  307. // 月份的天数
  308. date = dayjs(value).daysInMonth()
  309. hour = 23
  310. minute = 59
  311. }
  312. // 获取边界值,逻辑是:当年达到了边界值(最大或最小年),就检查月允许的最大和最小值,以此类推
  313. if (dayjs(value).year() === year) {
  314. month = dayjs(boundary).month() + 1
  315. if (dayjs(value).month() + 1 === month) {
  316. date = dayjs(boundary).date()
  317. if (dayjs(value).date() === date) {
  318. hour = dayjs(boundary).hour()
  319. if (dayjs(value).hour() === hour) {
  320. minute = dayjs(boundary).minute()
  321. }
  322. }
  323. }
  324. }
  325. return {
  326. [`${type}Year`]: year,
  327. [`${type}Month`]: month,
  328. [`${type}Date`]: date,
  329. [`${type}Hour`]: hour,
  330. [`${type}Minute`]: minute
  331. }
  332. },
  333. },
  334. }
  335. </script>
  336. <style lang="scss" scoped>
  337. @import '../../libs/css/components.scss';
  338. </style>