datetimePicker.nvue 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233
  1. <template>
  2. <view class="u-page">
  3. <u-navbar
  4. title="datetimePicker 时间日期选择器"
  5. @leftClick="navigateBack"
  6. safeAreaInsetTop
  7. fixed
  8. placeholder
  9. ></u-navbar>
  10. <u-cell-group>
  11. <u-cell
  12. @click="showDatetimePicker(index)"
  13. :title="item.title"
  14. v-for="(item, index) in list"
  15. :key="index"
  16. isLink
  17. >
  18. <image
  19. slot="icon"
  20. class="u-cell-icon"
  21. :src="item.iconUrl"
  22. mode="widthFix"
  23. ></image>
  24. </u-cell>
  25. </u-cell-group>
  26. <u-datetime-picker
  27. :show="show1"
  28. v-model="value1"
  29. mode="datetime"
  30. closeOnClickOverlay
  31. @confirm="confirm"
  32. @cancel="cancel"
  33. @change="change"
  34. @close="close"
  35. ></u-datetime-picker>
  36. <u-datetime-picker
  37. :show="show2"
  38. v-model="value2"
  39. mode="date"
  40. closeOnClickOverlay
  41. @confirm="confirm"
  42. @cancel="cancel"
  43. @change="change"
  44. @close="close"
  45. ></u-datetime-picker>
  46. <u-datetime-picker
  47. :show="show3"
  48. v-model="value3"
  49. mode="year-month"
  50. closeOnClickOverlay
  51. @confirm="confirm"
  52. @cancel="cancel"
  53. @change="change"
  54. @close="close"
  55. ></u-datetime-picker>
  56. <u-datetime-picker
  57. :show="show4"
  58. v-model="value4"
  59. mode="time"
  60. closeOnClickOverlay
  61. @confirm="confirm"
  62. @cancel="cancel"
  63. @change="change"
  64. @close="close"
  65. ></u-datetime-picker>
  66. <u-datetime-picker
  67. :show="show5"
  68. v-model="value5"
  69. :filter="filter"
  70. mode="date"
  71. closeOnClickOverlay
  72. @confirm="confirm"
  73. @cancel="cancel"
  74. @change="change"
  75. @close="close"
  76. ></u-datetime-picker>
  77. <u-datetime-picker
  78. :show="show6"
  79. v-model="value6"
  80. mode="date"
  81. :formatter="formatter"
  82. closeOnClickOverlay
  83. @confirm="confirm"
  84. @cancel="cancel"
  85. @change="change"
  86. @close="close"
  87. ></u-datetime-picker>
  88. <u-datetime-picker
  89. :show="show7"
  90. v-model="value7"
  91. mode="datetime"
  92. :minDate="1587524800000"
  93. :maxDate="1786778555000"
  94. closeOnClickOverlay
  95. @confirm="confirm"
  96. @cancel="cancel"
  97. @change="change"
  98. @close="close"
  99. ></u-datetime-picker>
  100. </view>
  101. </template>
  102. <script>
  103. export default {
  104. data() {
  105. const d = new Date()
  106. const year = d.getFullYear()
  107. let month = uni.$u.padZero(d.getMonth() + 1)
  108. const date = d.getDate()
  109. return {
  110. current: 0,
  111. value1: Number(new Date()),
  112. value2: Number(new Date()),
  113. value3: Number(new Date()),
  114. value4: '05:28',
  115. value5: Number(new Date()),
  116. value6: Number(new Date()),
  117. value7: Number(new Date()),
  118. show1: false,
  119. show2: false,
  120. show3: false,
  121. show4: false,
  122. show5: false,
  123. show6: false,
  124. show7: false,
  125. list: [{
  126. title: '完整日期时间',
  127. iconUrl: 'https://cdn.uviewui.com/uview/demo/datetime-picker/6.png'
  128. },
  129. {
  130. title: '年月日',
  131. iconUrl: 'https://cdn.uviewui.com/uview/demo/datetime-picker/4.png'
  132. },
  133. {
  134. title: '年月',
  135. iconUrl: 'https://cdn.uviewui.com/uview/demo/datetime-picker/3.png'
  136. },
  137. {
  138. title: '时间',
  139. iconUrl: 'https://cdn.uviewui.com/uview/demo/datetime-picker/5.png'
  140. }, {
  141. title: '过滤器(保留偶数年)',
  142. iconUrl: 'https://cdn.uviewui.com/uview/demo/datetime-picker/2.png'
  143. }, {
  144. title: '格式化',
  145. iconUrl: 'https://cdn.uviewui.com/uview/demo/datetime-picker/1.png'
  146. }, {
  147. title: '限制最大最小值',
  148. iconUrl: 'https://cdn.uviewui.com/uview/demo/datetime-picker/7.png'
  149. }
  150. ]
  151. }
  152. },
  153. methods: {
  154. close() {
  155. this[`show${this.current}`] = false
  156. },
  157. cancel() {
  158. this[`show${this.current}`] = false
  159. },
  160. confirm(e) {
  161. this[`show${this.current}`] = false
  162. this.result(e.value, e.mode)
  163. },
  164. change(e) {
  165. // console.log('change', e)
  166. },
  167. navigateBack() {
  168. uni.navigateBack()
  169. },
  170. formatter(mode, value) {
  171. if (mode === 'year') {
  172. return `${value}年`;
  173. }
  174. if (mode === 'month') {
  175. return `${value}月`;
  176. }
  177. return value;
  178. },
  179. filter(mode, options) {
  180. if (mode === 'year') {
  181. return options.filter((option) => option % 2 === 0);
  182. }
  183. return options;
  184. },
  185. showDatetimePicker(index) {
  186. this.current = index + 1
  187. this[`show${index + 1}`] = true
  188. },
  189. result(time, mode) {
  190. const timeFormat = uni.$u.timeFormat,
  191. toast = uni.$u.toast
  192. switch (mode) {
  193. case 'datetime':
  194. return toast(timeFormat(time, 'yyyy-mm-dd hh:MM'))
  195. case 'date':
  196. return toast(timeFormat(time, 'yyyy-mm-dd'))
  197. case 'year-month':
  198. return toast(timeFormat(time, 'yyyy-mm'))
  199. case 'time':
  200. return toast(time)
  201. default:
  202. return ''
  203. }
  204. },
  205. filter(type, options) {
  206. if (type === 'year') {
  207. return options.filter((option) => option % 2 === 0)
  208. }
  209. return options;
  210. },
  211. formatter(type, value) {
  212. if (type === 'year') {
  213. return `${value}年`
  214. }
  215. if (type === 'month') {
  216. return `${value}月`
  217. }
  218. if (type === 'day') {
  219. return `${value}日`
  220. }
  221. return value
  222. },
  223. },
  224. }
  225. </script>
  226. <style lang="scss">
  227. .u-page {
  228. padding: 0;
  229. }
  230. </style>