储能智慧云小程序
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.

date-time-picker.js 15KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364
  1. var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
  2. var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
  3. if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
  4. else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
  5. return c > 3 && r && Object.defineProperty(target, key, r), r;
  6. };
  7. var _a, _b;
  8. import dayjs from 'dayjs';
  9. import localeData from 'dayjs/plugin/localeData';
  10. import config from '../common/config';
  11. import { SuperComponent, wxComponent } from '../common/src/index';
  12. import props from './props';
  13. import dayjsLocaleMap from './locale/dayjs';
  14. dayjs.extend(localeData);
  15. dayjs.locale('zh-cn');
  16. const defaultLocale = ((_a = dayjsLocaleMap[dayjs.locale()]) === null || _a === void 0 ? void 0 : _a.key) || ((_b = dayjsLocaleMap.default) === null || _b === void 0 ? void 0 : _b.key);
  17. const { prefix } = config;
  18. const name = `${prefix}-date-time-picker`;
  19. var ModeItem;
  20. (function (ModeItem) {
  21. ModeItem["YEAR"] = "year";
  22. ModeItem["MONTH"] = "month";
  23. ModeItem["DATE"] = "date";
  24. ModeItem["HOUR"] = "hour";
  25. ModeItem["MINUTE"] = "minute";
  26. ModeItem["SECOND"] = "second";
  27. })(ModeItem || (ModeItem = {}));
  28. const DATE_MODES = ['year', 'month', 'date'];
  29. const TIME_MODES = ['hour', 'minute', 'second'];
  30. const FULL_MODES = [...DATE_MODES, ...TIME_MODES];
  31. const DEFAULT_MIN_DATE = dayjs('2000-01-01 00:00:00');
  32. const DEFAULT_MAX_DATE = dayjs('2030-12-31 23:59:59');
  33. let DateTimePicker = class DateTimePicker extends SuperComponent {
  34. constructor() {
  35. super(...arguments);
  36. this.properties = props;
  37. this.externalClasses = [`${prefix}-class`, `${prefix}-class-confirm`, `${prefix}-class-cancel`, `${prefix}-class-title`];
  38. this.options = {
  39. multipleSlots: true,
  40. };
  41. this.observers = {
  42. 'start, end, value': function () {
  43. this.updateColumns();
  44. },
  45. customLocale(v) {
  46. if (!v || !dayjsLocaleMap[v].key)
  47. return;
  48. this.setData({
  49. locale: dayjsLocaleMap[v].i18n,
  50. dayjsLocale: dayjsLocaleMap[v].key,
  51. });
  52. },
  53. mode(m) {
  54. const fullModes = this.getFullModeArray(m);
  55. this.setData({
  56. fullModes,
  57. });
  58. this.updateColumns();
  59. },
  60. };
  61. this.date = null;
  62. this.data = {
  63. prefix,
  64. classPrefix: name,
  65. columns: [],
  66. columnsValue: [],
  67. fullModes: [],
  68. locale: dayjsLocaleMap[defaultLocale].i18n,
  69. dayjsLocale: dayjsLocaleMap[defaultLocale].key,
  70. };
  71. this.controlledProps = [
  72. {
  73. key: 'value',
  74. event: 'change',
  75. },
  76. ];
  77. this.methods = {
  78. updateColumns() {
  79. this.date = this.getParseDate();
  80. const { columns, columnsValue } = this.getValueCols();
  81. this.setData({
  82. columns,
  83. columnsValue,
  84. });
  85. },
  86. getParseDate() {
  87. const { value, defaultValue } = this.properties;
  88. const minDate = this.getMinDate();
  89. const isTimeMode = this.isTimeMode();
  90. let currentValue = value || defaultValue;
  91. if (isTimeMode) {
  92. const dateStr = dayjs(minDate).format('YYYY-MM-DD');
  93. currentValue = dayjs(`${dateStr} ${currentValue}`);
  94. }
  95. const parseDate = dayjs(currentValue || minDate);
  96. const isDateValid = parseDate.isValid();
  97. return isDateValid ? parseDate : minDate;
  98. },
  99. getMinDate() {
  100. const { start } = this.properties;
  101. return start ? dayjs(start) : DEFAULT_MIN_DATE;
  102. },
  103. getMaxDate() {
  104. const { end } = this.properties;
  105. return end ? dayjs(end) : DEFAULT_MAX_DATE;
  106. },
  107. getDateRect(type = 'default') {
  108. const map = {
  109. min: 'getMinDate',
  110. max: 'getMaxDate',
  111. default: 'getDate',
  112. };
  113. const date = this[map[type]]();
  114. const keys = ['year', 'month', 'date', 'hour', 'minute', 'second'];
  115. return keys.map((k) => { var _a; return (_a = date[k]) === null || _a === void 0 ? void 0 : _a.call(date); });
  116. },
  117. getDate() {
  118. return this.clipDate((this === null || this === void 0 ? void 0 : this.date) || DEFAULT_MIN_DATE);
  119. },
  120. clipDate(date) {
  121. const minDate = this.getMinDate();
  122. const maxDate = this.getMaxDate();
  123. return dayjs(Math.min(Math.max(minDate.valueOf(), date.valueOf()), maxDate.valueOf()));
  124. },
  125. setYear(date, year) {
  126. const beforeMonthDays = date.date();
  127. const afterMonthDays = date.year(year).daysInMonth();
  128. const tempDate = date.date(Math.min(beforeMonthDays.valueOf(), afterMonthDays.valueOf()));
  129. return tempDate.year(year);
  130. },
  131. setMonth(date, month) {
  132. const beforeMonthDays = date.date();
  133. const afterMonthDays = date.month(month).daysInMonth();
  134. const tempDate = date.date(Math.min(beforeMonthDays.valueOf(), afterMonthDays.valueOf()));
  135. return tempDate.month(month);
  136. },
  137. getColumnOptions() {
  138. const { fullModes } = this.data;
  139. const columnOptions = [];
  140. fullModes === null || fullModes === void 0 ? void 0 : fullModes.forEach((mode) => {
  141. const columnOption = this.getOptionByType(mode);
  142. columnOptions.push(columnOption);
  143. });
  144. return columnOptions;
  145. },
  146. getOptionByType(type) {
  147. var _a;
  148. const { locale, steps } = this.data;
  149. const options = [];
  150. const minEdge = this.getOptionEdge('min', type);
  151. const maxEdge = this.getOptionEdge('max', type);
  152. const step = (_a = steps === null || steps === void 0 ? void 0 : steps[type]) !== null && _a !== void 0 ? _a : 1;
  153. const dayjsMonthsShort = dayjs().locale(this.data.dayjsLocale).localeData().monthsShort();
  154. for (let i = minEdge; i <= maxEdge; i += step) {
  155. options.push({
  156. value: `${i}`,
  157. label: type === 'month' ? dayjsMonthsShort[i] : `${i + locale[type]}`,
  158. });
  159. }
  160. return options;
  161. },
  162. getYearOptions(dateParams) {
  163. const { locale } = this.data;
  164. const { minDateYear, maxDateYear } = dateParams;
  165. const years = [];
  166. for (let i = minDateYear; i <= maxDateYear; i += 1) {
  167. years.push({
  168. value: `${i}`,
  169. label: `${i + locale.year}`,
  170. });
  171. }
  172. return years;
  173. },
  174. getOptionEdge(minOrMax, type) {
  175. const selDateArray = this.getDateRect();
  176. const compareArray = this.getDateRect(minOrMax);
  177. const edge = {
  178. month: [0, 11],
  179. date: [1, this.getDate().daysInMonth()],
  180. hour: [0, 23],
  181. minute: [0, 59],
  182. second: [0, 59],
  183. };
  184. const types = ['year', 'month', 'date', 'hour', 'minute', 'second'];
  185. for (let i = 0, size = selDateArray.length; i < size; i += 1) {
  186. if (types[i] === type)
  187. return compareArray[i];
  188. if (compareArray[i] !== selDateArray[i])
  189. return edge[type][minOrMax === 'min' ? 0 : 1];
  190. }
  191. return edge[type][minOrMax === 'min' ? 0 : 1];
  192. },
  193. getMonthOptions() {
  194. const months = [];
  195. const minMonth = this.getOptionEdge('min', 'month');
  196. const maxMonth = this.getOptionEdge('max', 'month');
  197. const dayjsMonthsShort = dayjs.monthsShort();
  198. for (let i = minMonth; i <= maxMonth; i += 1) {
  199. months.push({
  200. value: `${i}`,
  201. label: dayjsMonthsShort[i],
  202. });
  203. }
  204. return months;
  205. },
  206. getDayOptions() {
  207. const { locale } = this.data;
  208. const days = [];
  209. const minDay = this.getOptionEdge('min', 'date');
  210. const maxDay = this.getOptionEdge('max', 'date');
  211. for (let i = minDay; i <= maxDay; i += 1) {
  212. days.push({
  213. value: `${i}`,
  214. label: `${i + locale.day}`,
  215. });
  216. }
  217. return days;
  218. },
  219. getHourOptions() {
  220. const { locale } = this.data;
  221. const hours = [];
  222. const minHour = this.getOptionEdge('min', 'hour');
  223. const maxHour = this.getOptionEdge('max', 'hour');
  224. for (let i = minHour; i <= maxHour; i += 1) {
  225. hours.push({
  226. value: `${i}`,
  227. label: `${i + locale.hour}`,
  228. });
  229. }
  230. return hours;
  231. },
  232. getMinuteOptions() {
  233. const { locale } = this.data;
  234. const minutes = [];
  235. const minMinute = this.getOptionEdge('min', 'minute');
  236. const maxMinute = this.getOptionEdge('max', 'minute');
  237. for (let i = minMinute; i <= maxMinute; i += 1) {
  238. minutes.push({
  239. value: `${i}`,
  240. label: `${i + locale.minute}`,
  241. });
  242. }
  243. return minutes;
  244. },
  245. getValueCols() {
  246. return {
  247. columns: this.getColumnOptions(),
  248. columnsValue: this.getColumnsValue(),
  249. };
  250. },
  251. getColumnsValue() {
  252. const { fullModes } = this.data;
  253. const date = this.getDate();
  254. const columnsValue = [];
  255. fullModes === null || fullModes === void 0 ? void 0 : fullModes.forEach((mode) => {
  256. columnsValue.push(`${date[mode]()}`);
  257. });
  258. return columnsValue;
  259. },
  260. getNewDate(value, type) {
  261. let newValue = this.getDate();
  262. switch (type) {
  263. case ModeItem.YEAR:
  264. newValue = this.setYear(newValue, value);
  265. break;
  266. case ModeItem.MONTH:
  267. newValue = this.setMonth(newValue, value);
  268. break;
  269. case ModeItem.DATE:
  270. newValue = newValue.date(value);
  271. break;
  272. case ModeItem.HOUR:
  273. newValue = newValue.hour(value);
  274. break;
  275. case ModeItem.MINUTE:
  276. newValue = newValue.minute(value);
  277. break;
  278. case ModeItem.SECOND:
  279. newValue = newValue.second(value);
  280. break;
  281. default:
  282. break;
  283. }
  284. return this.clipDate(newValue);
  285. },
  286. onColumnChange(e) {
  287. const { value, column } = e === null || e === void 0 ? void 0 : e.detail;
  288. const { fullModes, format } = this.data;
  289. const columnValue = value === null || value === void 0 ? void 0 : value[column];
  290. const columnType = fullModes === null || fullModes === void 0 ? void 0 : fullModes[column];
  291. const newValue = this.getNewDate(parseInt(columnValue, 10), columnType);
  292. this.date = newValue;
  293. const { columns, columnsValue } = this.getValueCols();
  294. this.setData({
  295. columns,
  296. columnsValue,
  297. });
  298. const date = this.getDate();
  299. const pickValue = format ? date.format(format) : date.valueOf();
  300. this.triggerEvent('pick', { value: pickValue });
  301. },
  302. onConfirm() {
  303. const { format } = this.properties;
  304. const date = this.getDate();
  305. const value = format ? date.format(format) : date.valueOf();
  306. this._trigger('change', { value });
  307. this.triggerEvent('confirm', { value });
  308. this.resetColumns();
  309. },
  310. onCancel() {
  311. this.resetColumns();
  312. this.triggerEvent('cancel');
  313. },
  314. onVisibleChange(e) {
  315. if (!e.detail.visible) {
  316. this.resetColumns();
  317. }
  318. },
  319. onClose(e) {
  320. const { trigger } = e.detail;
  321. this.triggerEvent('close', { trigger });
  322. },
  323. resetColumns() {
  324. const parseDate = this.getParseDate();
  325. this.date = parseDate;
  326. const { columns, columnsValue } = this.getValueCols();
  327. this.setData({
  328. columns,
  329. columnsValue,
  330. });
  331. },
  332. };
  333. }
  334. getFullModeArray(mode) {
  335. if (typeof mode === 'string' || mode instanceof String) {
  336. return this.getFullModeByModeString(mode, FULL_MODES);
  337. }
  338. if (Array.isArray(mode)) {
  339. if ((mode === null || mode === void 0 ? void 0 : mode.length) === 1) {
  340. return this.getFullModeByModeString(mode[0], FULL_MODES);
  341. }
  342. if ((mode === null || mode === void 0 ? void 0 : mode.length) === 2) {
  343. const dateModes = this.getFullModeByModeString(mode[0], DATE_MODES);
  344. const timeModes = this.getFullModeByModeString(mode[1], TIME_MODES);
  345. return [...dateModes, ...timeModes];
  346. }
  347. }
  348. }
  349. getFullModeByModeString(modeString, matchModes) {
  350. if (!modeString) {
  351. return [];
  352. }
  353. const endIndex = matchModes === null || matchModes === void 0 ? void 0 : matchModes.findIndex((mode) => modeString === mode);
  354. return matchModes === null || matchModes === void 0 ? void 0 : matchModes.slice(0, endIndex + 1);
  355. }
  356. isTimeMode() {
  357. const { fullModes } = this.data;
  358. return fullModes[0] === ModeItem.HOUR;
  359. }
  360. };
  361. DateTimePicker = __decorate([
  362. wxComponent()
  363. ], DateTimePicker);
  364. export default DateTimePicker;