Nie możesz wybrać więcej, niż 25 tematów Tematy muszą się zaczynać od litery lub cyfry, mogą zawierać myślniki ('-') i mogą mieć do 35 znaków.

kx-datetime.vue 13 KiB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536
  1. <template>
  2. <view name='KXDateTime'>
  3. <text @click="open">{{date?date:placeholder?placeholder:'请选择'}}</text>
  4. <uni-popup ref="popup" type="bottom">
  5. <view class="but">
  6. <text @click="close">取消</text>
  7. <text @click="ok">确定</text>
  8. </view>
  9. <picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange">
  10. <picker-view-column>
  11. <view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
  12. </picker-view-column>
  13. <picker-view-column>
  14. <view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
  15. </picker-view-column>
  16. <picker-view-column>
  17. <view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
  18. </picker-view-column>
  19. <picker-view-column>
  20. <view class="item" v-for="(item,index) in hours" :key="index">{{item}}时</view>
  21. </picker-view-column>
  22. <picker-view-column>
  23. <view class="item" v-for="(item,index) in mins" :key="index">{{item}}分</view>
  24. </picker-view-column>
  25. </picker-view>
  26. </uni-popup>
  27. </view>
  28. </template>
  29. <script>
  30. import uniPopup from '../uni-popup/uni-popup.vue'
  31. export default {
  32. name: 'KXDateTime',
  33. components: {
  34. uniPopup
  35. },
  36. props: {
  37. date: '',
  38. start: '',
  39. end: '',
  40. default: '',
  41. placeholder:''
  42. },
  43. data() {
  44. // const date = new Date()
  45. // const years = []
  46. // const year = date.getFullYear()
  47. // const months = []
  48. // const month = date.getMonth() + 1
  49. // const days = []
  50. // const day = date.getDate()
  51. // const hours = []
  52. // const hour = date.getHours()
  53. // const mins = []
  54. // const min = date.getMinutes()
  55. // let start;
  56. // if (this.start) {
  57. // start = this.start.replace(/-/g, "/")
  58. // start = new Date(start);
  59. // } else {
  60. // start = new Date(0);
  61. // }
  62. // let starty = start.getFullYear(); //开始年份
  63. // let end;
  64. // if (this.end) {
  65. // end = this.end.replace(/-/g, "/")
  66. // end = new Date(end);
  67. // } else {
  68. // end = new Date();
  69. // }
  70. // let endy = end.getFullYear(); //终止年份
  71. // for (let i = starty; i <= endy; i++) {
  72. // years.push(i)
  73. // }
  74. let defaultvalue = this.default;
  75. let value = [9999, 99, 99, 99, 99];
  76. if (defaultvalue == 'end') {
  77. value = [9999, 99, 99, 99, 99]
  78. } else if (defaultvalue == 'start') {
  79. value = [0, 0, 0, 0, 0]
  80. }
  81. return {
  82. title: 'picker-view',
  83. years: [],
  84. year: '',
  85. months: [],
  86. month: '',
  87. days: [],
  88. day: '',
  89. hours: [],
  90. hour: '',
  91. mins: [],
  92. min: '',
  93. value,
  94. valueStr: '',
  95. visible: true,
  96. strYMDHM: '',
  97. indicatorStyle: `height: 80rpx;`
  98. }
  99. },
  100. methods: {
  101. open() {
  102. let start;
  103. if (this.start) {
  104. start = this.start.replace(/-/g, "/")
  105. start = new Date(start);
  106. } else {
  107. start = new Date(0);
  108. }
  109. let starty = start.getFullYear(); //开始年份
  110. let end;
  111. if (this.end) {
  112. end = this.end.replace(/-/g, "/")
  113. end = new Date(end);
  114. } else {
  115. end = new Date();
  116. }
  117. if (start > end) {
  118. uni.showToast({
  119. title: '时间范围错误!',
  120. icon: 'none',
  121. duration: 2000
  122. });
  123. return false
  124. }
  125. this.$forceUpdate();
  126. if (this.valueStr) {
  127. this.value = JSON.parse(this.valueStr);
  128. setTimeout(this.amend, 100)
  129. this.$refs.popup.open()
  130. } else {
  131. setTimeout(this.amend, 100)
  132. this.$refs.popup.open()
  133. }
  134. },
  135. close() {
  136. this.$refs.popup.close()
  137. },
  138. ok() {
  139. let day = this.day < 10 ? '0' + this.day : this.day,
  140. month = this.month < 10 ? '0' + this.month : this.month,
  141. hour = this.hour < 10 ? '0' + this.hour : this.hour,
  142. min = this.min < 10 ? '0' + this.min : this.min
  143. let data = this.year + '-' + month + '-' + day + ' ' + hour + ':' + min;
  144. this.$emit("rundata", data)
  145. this.$refs.popup.close()
  146. },
  147. bindChange: function(e) {
  148. let val = e.detail.value
  149. this.valueStr = JSON.stringify(val);
  150. this.year = this.years[val[0]]
  151. this.month = this.months[val[1]]
  152. this.day = this.days[val[2]]
  153. this.hour = this.hours[val[3]]
  154. this.min = this.mins[val[4]]
  155. },
  156. //数据校正
  157. amend() {
  158. if (this.valueStr) {
  159. let val = JSON.parse(this.valueStr);
  160. this.year = this.years[val[0]]
  161. this.month = this.months[val[1]]
  162. this.day = this.days[val[2]]
  163. this.hour = this.hours[val[3]]
  164. this.min = this.mins[val[4]]
  165. }
  166. let start;
  167. if (this.start) {
  168. start = this.start.replace(/-/g, "/")
  169. start = new Date(start);
  170. } else {
  171. start = new Date(0);
  172. }
  173. let starty = start.getFullYear(); //开始年份
  174. let startm = start.getMonth() + 1; //开始月份
  175. let startd = start.getDate(); //开始天
  176. let starth = start.getHours(); //开始小时
  177. let startmin = start.getMinutes(); //开始分钟
  178. let end;
  179. if (this.end) {
  180. end = this.end.replace(/-/g, "/")
  181. end = new Date(end);
  182. } else {
  183. end = new Date();
  184. }
  185. let endy = end.getFullYear(); //终止年份
  186. let endm = end.getMonth() + 1; //终止月份
  187. let endd = end.getDate(); //终止天
  188. let endh = end.getHours(); //终止小时
  189. let endmin = end.getMinutes(); //终止分钟
  190. //如果选择起始年份
  191. let years = [],
  192. months = [],
  193. days = [],
  194. hours = [],
  195. mins = [];
  196. let month31 = [1, 3, 5, 7, 8, 10, 12],
  197. month30 = [4, 6, 9, 11];
  198. let daysNum;
  199. for (let i = starty; i <= endy; i++) {
  200. years.push(i)
  201. }
  202. if (month31.indexOf(this.month) > -1) {
  203. daysNum = 31
  204. } else if (month30.indexOf(this.month) > -1) {
  205. daysNum = 30
  206. } else {
  207. if (this.year % 4 == 0) {
  208. daysNum = 29
  209. } else {
  210. daysNum = 28
  211. }
  212. }
  213. let defaultvalue = this.default;
  214. let defaulty = endy,
  215. defaultm = endm,
  216. defaultd = endd,
  217. defaulth = endh,
  218. defaultmin = endmin;
  219. if (defaultvalue == 'end') {
  220. defaulty = endy;
  221. defaultm = endm;
  222. defaultd = endd;
  223. defaulth = endh;
  224. defaultmin = endmin;
  225. } else if (defaultvalue == 'start') {
  226. defaulty = starty;
  227. defaultm = startm;
  228. defaultd = startd;
  229. defaulth = starth;
  230. defaultmin = startmin;
  231. }
  232. //当数值异常是设施默认
  233. if (!this.year) {
  234. this.year = defaulty
  235. }
  236. if (!this.month) {
  237. this.month = defaultm
  238. }
  239. if (!this.day) {
  240. this.day = defaultd
  241. }
  242. if (!this.hour && this.hour !== 0) {
  243. this.hour = defaulth
  244. }
  245. if (!this.min && this.min !== 0) {
  246. this.min = defaultmin
  247. }
  248. //判断年份是在起始年
  249. if (this.year == starty) {
  250. //判断起始年份和终止年份是否相等
  251. if (starty == endy) {
  252. //如果等,那么月份取两者中间
  253. for (let i = startm; i <= endm; i++) {
  254. months.push(i)
  255. }
  256. //判断月份是在起始月
  257. if (this.month == startm) {
  258. //判断起始月和终止月是否相等
  259. if (startm == endm) {
  260. //如果等,那么天数取两者中间
  261. for (let i = startd; i <= endd; i++) {
  262. days.push(i)
  263. }
  264. //判断日是在起始日
  265. if (this.day == startd) {
  266. //判断起始ri和终止日是否相等
  267. if (startd == endd) {
  268. //如果等,那么小时取两者中间
  269. for (let i = starth; i <= endh; i++) {
  270. hours.push(i)
  271. }
  272. //判断小时是在起始小时
  273. if (this.hour == starth) {
  274. //判断起始和终止是否相等
  275. if (starth == endh) {
  276. //如果等,那么分钟取两者中间
  277. for (let i = startmin; i <= endmin; i++) {
  278. mins.push(i)
  279. }
  280. } else {
  281. //如果不等,到59
  282. for (let i = startmin; i <= 59; i++) {
  283. mins.push(i)
  284. }
  285. }
  286. } else {
  287. //判断小时是否在截止小时
  288. if (this.hour == endh) {
  289. //终止小时取到截止分钟
  290. for (let i = 0; i <= endmin; i++) {
  291. mins.push(i)
  292. }
  293. }
  294. }
  295. } else {
  296. //如果不等,到23小时
  297. for (let i = starth; i <= 23; i++) {
  298. hours.push(i)
  299. }
  300. //判断小时是在起始小时
  301. if (this.hour == starth) {
  302. for (let i = startmin; i <= 59; i++) {
  303. mins.push(i)
  304. }
  305. }
  306. }
  307. } else {
  308. //判断日是否在截止日
  309. if (this.day == endd) {
  310. //终止日取到截止小时
  311. for (let i = 0; i <= endh; i++) {
  312. hours.push(i)
  313. }
  314. //判断小时是否在截止小时
  315. if (this.hour == endh) {
  316. //终止小时取到截止分钟
  317. for (let i = 0; i <= endmin; i++) {
  318. mins.push(i)
  319. }
  320. }
  321. }
  322. }
  323. } else {
  324. //如果不等,
  325. for (let i = startd; i <= daysNum; i++) {
  326. days.push(i)
  327. }
  328. if (this.day == startd) {
  329. for (let i = starth; i <= 23; i++) {
  330. hours.push(i)
  331. }
  332. //判断小时是在起始小时
  333. if (this.hour == starth) {
  334. for (let i = startmin; i <= 59; i++) {
  335. mins.push(i)
  336. }
  337. }
  338. }
  339. }
  340. } else {
  341. //判断月份是在终止月
  342. if (this.month == endm) {
  343. //终止月取到截止天
  344. for (let i = 1; i <= endd; i++) {
  345. days.push(i)
  346. }
  347. //判断日是否在截止日
  348. if (this.day == endd) {
  349. //终止日取到截止小时
  350. for (let i = 0; i <= endh; i++) {
  351. hours.push(i)
  352. }
  353. //判断小时是否在截止小时
  354. if (this.hour == endh) {
  355. //终止小时取到截止分钟
  356. for (let i = 0; i <= endmin; i++) {
  357. mins.push(i)
  358. }
  359. }
  360. }
  361. }
  362. }
  363. } else {
  364. //如果不等,去开始到12月份
  365. for (let i = startm; i <= 12; i++) {
  366. months.push(i)
  367. }
  368. //判断月份是在起始月
  369. if (this.month == startm) {
  370. //是,取天数之后
  371. for (let i = startd; i <= daysNum; i++) {
  372. days.push(i)
  373. }
  374. //判断日是在起始日
  375. if (this.day == startd) {
  376. //是,qu起始小时之后
  377. for (let i = starth; i <= 23; i++) {
  378. hours.push(i)
  379. }
  380. //判断小时是在起始小时
  381. if (this.hour == starth) {
  382. //是,qu起始分钟之后
  383. for (let i = startmin; i <= 59; i++) {
  384. mins.push(i)
  385. }
  386. }
  387. }
  388. }
  389. }
  390. } else if (this.year == endy) {
  391. //年份中终止年
  392. //月份取到终止月
  393. for (let i = 1; i <= endm; i++) {
  394. months.push(i)
  395. }
  396. //判断月份是在终止月
  397. if (this.month == endm) {
  398. //终止月取到截止天
  399. for (let i = 1; i <= endd; i++) {
  400. days.push(i)
  401. }
  402. //判断日是否在截止日
  403. if (this.day == endd) {
  404. //终止日取到截止小时
  405. for (let i = 0; i <= endh; i++) {
  406. hours.push(i)
  407. }
  408. //判断小时是否在截止小时
  409. if (this.hour == endh) {
  410. //终止小时取到截止分钟
  411. for (let i = 0; i <= endmin; i++) {
  412. mins.push(i)
  413. }
  414. }
  415. }
  416. }
  417. } else {
  418. for (let i = 1; i <= 12; i++) {
  419. months.push(i)
  420. }
  421. for (let i = 1; i <= daysNum; i++) {
  422. days.push(i)
  423. }
  424. for (let i = 0; i <= 23; i++) {
  425. hours.push(i)
  426. }
  427. for (let i = 0; i <= 59; i++) {
  428. mins.push(i)
  429. }
  430. }
  431. if (months.length == 0) {
  432. for (let i = 1; i <= 12; i++) {
  433. months.push(i)
  434. }
  435. }
  436. if (days.length == 0) {
  437. for (let i = 1; i <= daysNum; i++) {
  438. days.push(i)
  439. }
  440. }
  441. if (hours.length == 0) {
  442. for (let i = 0; i <= 23; i++) {
  443. hours.push(i)
  444. }
  445. }
  446. if (mins.length == 0) {
  447. for (let i = 0; i <= 59; i++) {
  448. mins.push(i)
  449. }
  450. }
  451. this.years = years;
  452. this.months = months;
  453. this.days = days;
  454. this.hours = hours;
  455. this.mins = mins;
  456. this.$forceUpdate();
  457. }
  458. },
  459. watch: {
  460. year() {
  461. this.amend();
  462. },
  463. month() {
  464. this.amend();
  465. },
  466. day() {
  467. this.amend();
  468. },
  469. hour() {
  470. this.amend();
  471. },
  472. min() {
  473. this.amend();
  474. },
  475. years(n, m) {
  476. if (n.toString() != m.toString()) {
  477. this.amend();
  478. }
  479. },
  480. months(n, m) {
  481. if (n.toString() != m.toString()) {
  482. this.amend();
  483. }
  484. },
  485. days(n, m) {
  486. if (n.toString() != m.toString()) {
  487. this.amend();
  488. }
  489. },
  490. hours(n, m) {
  491. if (n.toString() != m.toString()) {
  492. this.amend();
  493. }
  494. },
  495. mins(n, m) {
  496. if (n.toString() != m.toString()) {
  497. this.amend();
  498. }
  499. }
  500. }
  501. }
  502. </script>
  503. <style lang="scss" scoped>
  504. text {
  505. display: inline-block;
  506. color: $uni-text-color-grey;
  507. }
  508. .but {
  509. background: #fff;
  510. height: 80rpx;
  511. line-height: 80rpx;
  512. padding: 0 30rpx;
  513. border-bottom: 1px solid #f0f0f0;
  514. text-align: left;
  515. text {
  516. display: inline-block;
  517. }
  518. text:last-child {
  519. float: right;
  520. color: $uni-color-primary;
  521. }
  522. }
  523. picker-view {
  524. width: 100%;
  525. background: #fff;
  526. height: 600rpx;
  527. text-align: center;
  528. }
  529. </style>