index.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311
  1. <template>
  2. <uni-shadow-root class="vant-dist-datetime-picker-index"><van-picker class="van-datetime-picker" active-class="active-class" toolbar-class="toolbar-class" column-class="column-class" :title="title" :columns="columns" :item-height="itemHeight" :show-toolbar="showToolbar" :visible-item-count="visibleItemCount" :confirm-button-text="confirmButtonText" :cancel-button-text="cancelButtonText" @change="onChange" @confirm="onConfirm" @cancel="onCancel"></van-picker></uni-shadow-root>
  3. </template>
  4. <script>
  5. import VanPicker from '../picker/index.vue'
  6. global['__wxVueOptions'] = {components:{'van-picker': VanPicker}}
  7. global['__wxRoute'] = 'vant/dist/datetime-picker/index'
  8. import { VantComponent } from '../common/component';
  9. import { isDef } from '../common/validator';
  10. import { pickerProps } from '../picker/shared';
  11. const currentYear = new Date().getFullYear();
  12. function isValidDate(date) {
  13. return isDef(date) && !isNaN(new Date(date).getTime());
  14. }
  15. function range(num, min, max) {
  16. return Math.min(Math.max(num, min), max);
  17. }
  18. function padZero(val) {
  19. return `00${val}`.slice(-2);
  20. }
  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. function getTrueValue(formattedValue) {
  30. if (formattedValue === undefined) {
  31. formattedValue = '1';
  32. }
  33. while (isNaN(parseInt(formattedValue, 10))) {
  34. formattedValue = formattedValue.slice(1);
  35. }
  36. return parseInt(formattedValue, 10);
  37. }
  38. function getMonthEndDay(year, month) {
  39. return 32 - new Date(year, month - 1, 32).getDate();
  40. }
  41. const defaultFormatter = (type, value) => value;
  42. VantComponent({
  43. classes: ['active-class', 'toolbar-class', 'column-class'],
  44. props: Object.assign(Object.assign({}, pickerProps), { value: {
  45. type: null,
  46. observer: 'updateValue',
  47. }, filter: null, type: {
  48. type: String,
  49. value: 'datetime',
  50. observer: 'updateValue',
  51. }, showToolbar: {
  52. type: Boolean,
  53. value: true,
  54. }, formatter: {
  55. type: null,
  56. value: defaultFormatter,
  57. }, minDate: {
  58. type: Number,
  59. value: new Date(currentYear - 10, 0, 1).getTime(),
  60. observer: 'updateValue',
  61. }, maxDate: {
  62. type: Number,
  63. value: new Date(currentYear + 10, 11, 31).getTime(),
  64. observer: 'updateValue',
  65. }, minHour: {
  66. type: Number,
  67. value: 0,
  68. observer: 'updateValue',
  69. }, maxHour: {
  70. type: Number,
  71. value: 23,
  72. observer: 'updateValue',
  73. }, minMinute: {
  74. type: Number,
  75. value: 0,
  76. observer: 'updateValue',
  77. }, maxMinute: {
  78. type: Number,
  79. value: 59,
  80. observer: 'updateValue',
  81. } }),
  82. data: {
  83. innerValue: Date.now(),
  84. columns: [],
  85. },
  86. methods: {
  87. updateValue() {
  88. const { data } = this;
  89. const val = this.correctValue(data.value);
  90. const isEqual = val === data.innerValue;
  91. this.updateColumnValue(val).then(() => {
  92. if (!isEqual) {
  93. this.$emit('input', val);
  94. }
  95. });
  96. },
  97. getPicker() {
  98. if (this.picker == null) {
  99. this.picker = this.selectComponent('.van-datetime-picker');
  100. const { picker } = this;
  101. const { setColumnValues } = picker;
  102. picker.setColumnValues = (...args) => setColumnValues.apply(picker, [...args, false]);
  103. }
  104. return this.picker;
  105. },
  106. updateColumns() {
  107. const { formatter = defaultFormatter } = this.data;
  108. const results = this.getOriginColumns().map((column) => ({
  109. values: column.values.map((value) => formatter(column.type, value)),
  110. }));
  111. return this.set({ columns: results });
  112. },
  113. getOriginColumns() {
  114. const { filter } = this.data;
  115. const results = this.getRanges().map(({ type, range }) => {
  116. let values = times(range[1] - range[0] + 1, (index) => {
  117. const value = range[0] + index;
  118. return type === 'year' ? `${value}` : padZero(value);
  119. });
  120. if (filter) {
  121. values = filter(type, values);
  122. }
  123. return { type, values };
  124. });
  125. return results;
  126. },
  127. getRanges() {
  128. const { data } = this;
  129. if (data.type === 'time') {
  130. return [
  131. {
  132. type: 'hour',
  133. range: [data.minHour, data.maxHour],
  134. },
  135. {
  136. type: 'minute',
  137. range: [data.minMinute, data.maxMinute],
  138. },
  139. ];
  140. }
  141. const { maxYear, maxDate, maxMonth, maxHour, maxMinute, } = this.getBoundary('max', data.innerValue);
  142. const { minYear, minDate, minMonth, minHour, minMinute, } = this.getBoundary('min', data.innerValue);
  143. const result = [
  144. {
  145. type: 'year',
  146. range: [minYear, maxYear],
  147. },
  148. {
  149. type: 'month',
  150. range: [minMonth, maxMonth],
  151. },
  152. {
  153. type: 'day',
  154. range: [minDate, maxDate],
  155. },
  156. {
  157. type: 'hour',
  158. range: [minHour, maxHour],
  159. },
  160. {
  161. type: 'minute',
  162. range: [minMinute, maxMinute],
  163. },
  164. ];
  165. if (data.type === 'date')
  166. result.splice(3, 2);
  167. if (data.type === 'year-month')
  168. result.splice(2, 3);
  169. if (data.type === 'year')
  170. result.splice(1,4);
  171. return result;
  172. },
  173. correctValue(value) {
  174. const { data } = this;
  175. // validate value
  176. const isDateType = data.type !== 'time';
  177. if (isDateType && !isValidDate(value)) {
  178. value = data.minDate;
  179. }
  180. else if (!isDateType && !value) {
  181. const { minHour } = data;
  182. value = `${padZero(minHour)}:00`;
  183. }
  184. // time type
  185. if (!isDateType) {
  186. let [hour, minute] = value.split(':');
  187. hour = padZero(range(hour, data.minHour, data.maxHour));
  188. minute = padZero(range(minute, data.minMinute, data.maxMinute));
  189. return `${hour}:${minute}`;
  190. }
  191. // date type
  192. value = Math.max(value, data.minDate);
  193. value = Math.min(value, data.maxDate);
  194. return value;
  195. },
  196. getBoundary(type, innerValue) {
  197. const value = new Date(innerValue);
  198. const boundary = new Date(this.data[`${type}Date`]);
  199. const year = boundary.getFullYear();
  200. let month = 1;
  201. let date = 1;
  202. let hour = 0;
  203. let minute = 0;
  204. if (type === 'max') {
  205. month = 12;
  206. date = getMonthEndDay(value.getFullYear(), value.getMonth() + 1);
  207. hour = 23;
  208. minute = 59;
  209. }
  210. if (value.getFullYear() === year) {
  211. month = boundary.getMonth() + 1;
  212. if (value.getMonth() + 1 === month) {
  213. date = boundary.getDate();
  214. if (value.getDate() === date) {
  215. hour = boundary.getHours();
  216. if (value.getHours() === hour) {
  217. minute = boundary.getMinutes();
  218. }
  219. }
  220. }
  221. }
  222. return {
  223. [`${type}Year`]: year,
  224. [`${type}Month`]: month,
  225. [`${type}Date`]: date,
  226. [`${type}Hour`]: hour,
  227. [`${type}Minute`]: minute,
  228. };
  229. },
  230. onCancel() {
  231. this.$emit('cancel');
  232. },
  233. onConfirm() {
  234. this.$emit('confirm', this.data.innerValue);
  235. },
  236. onChange() {
  237. const { data } = this;
  238. let value;
  239. const picker = this.getPicker();
  240. const originColumns = this.getOriginColumns();
  241. if (data.type === 'time') {
  242. const indexes = picker.getIndexes();
  243. value = `${+originColumns[0].values[indexes[0]]}:${+originColumns[1]
  244. .values[indexes[1]]}`;
  245. }
  246. else {
  247. const indexes = picker.getIndexes();
  248. const values = indexes.map((value, index) => originColumns[index].values[value]);
  249. const year = getTrueValue(values[0]);
  250. const month = getTrueValue(values[1]);
  251. const maxDate = getMonthEndDay(year, month);
  252. let date = getTrueValue(values[2]);
  253. if (data.type === 'year-month') {
  254. date = 1;
  255. }
  256. date = date > maxDate ? maxDate : date;
  257. let hour = 0;
  258. let minute = 0;
  259. if (data.type === 'datetime') {
  260. hour = getTrueValue(values[3]);
  261. minute = getTrueValue(values[4]);
  262. }
  263. value = new Date(year, month - 1, date, hour, minute);
  264. }
  265. value = this.correctValue(value);
  266. this.updateColumnValue(value).then(() => {
  267. this.$emit('input', value);
  268. this.$emit('change', picker);
  269. });
  270. },
  271. updateColumnValue(value) {
  272. let values = [];
  273. const { type } = this.data;
  274. const formatter = this.data.formatter || defaultFormatter;
  275. const picker = this.getPicker();
  276. if (type === 'time') {
  277. const pair = value.split(':');
  278. values = [formatter('hour', pair[0]), formatter('minute', pair[1])];
  279. }
  280. else {
  281. const date = new Date(value);
  282. values = [
  283. formatter('year', `${date.getFullYear()}`),
  284. formatter('month', padZero(date.getMonth() + 1)),
  285. ];
  286. if (type === 'date') {
  287. values.push(formatter('day', padZero(date.getDate())));
  288. }
  289. if (type === 'datetime') {
  290. values.push(formatter('day', padZero(date.getDate())), formatter('hour', padZero(date.getHours())), formatter('minute', padZero(date.getMinutes())));
  291. }
  292. }
  293. return this.set({ innerValue: value })
  294. .then(() => this.updateColumns())
  295. .then(() => picker.setValues(values));
  296. },
  297. },
  298. created() {
  299. const innerValue = this.correctValue(this.data.value);
  300. this.updateColumnValue(innerValue).then(() => {
  301. this.$emit('input', innerValue);
  302. });
  303. },
  304. });
  305. export default global['__wxComponents']['vant/dist/datetime-picker/index']
  306. </script>
  307. <style platform="mp-weixin">
  308. @import '../common/index.css';
  309. </style>