uni-datetime-picker.vue 29 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082
  1. <template>
  2. <view class="uni-date">
  3. <view class="uni-date-editor" @click="show">
  4. <slot>
  5. <view
  6. class="uni-date-editor--x"
  7. :class="{'uni-date-editor--x__disabled': disabled,'uni-date-x--border': border}"
  8. >
  9. <view v-if="!isRange" class="uni-date-x uni-date-single">
  10. <uni-icons class="icon-calendar" type="calendar" color="#c0c4cc" size="22"></uni-icons>
  11. <input class="uni-date__x-input" type="text" v-model="displayValue"
  12. :placeholder="singlePlaceholderText" :disabled="true" />
  13. </view>
  14. <view v-else class="uni-date-x uni-date-range">
  15. <uni-icons class="icon-calendar" type="calendar" color="#c0c4cc" size="22"></uni-icons>
  16. <input class="uni-date__x-input t-c" type="text" v-model="range.startDate"
  17. :placeholder="startPlaceholderText" :disabled="true" />
  18. <view class="range-separator">{{rangeSeparator}}</view>
  19. <input class="uni-date__x-input t-c" type="text" v-model="range.endDate"
  20. :placeholder="endPlaceholderText" :disabled="true" />
  21. </view>
  22. <view v-if="showClearIcon" class="uni-date__icon-clear" @click.stop="clear">
  23. <uni-icons type="clear" color="#c0c4cc" size="22"></uni-icons>
  24. </view>
  25. </view>
  26. </slot>
  27. </view>
  28. <view v-show="pickerVisible" class="uni-date-mask--pc" @click="close"></view>
  29. <view v-if="!isPhone" v-show="pickerVisible" ref="datePicker" class="uni-date-picker__container">
  30. <view v-if="!isRange" class="uni-date-single--x" :style="popover">
  31. <view class="uni-popper__arrow"></view>
  32. <view v-if="hasTime" class="uni-date-changed popup-x-header">
  33. <input class="uni-date__input t-c" type="text" v-model="inputDate"
  34. :placeholder="selectDateText" />
  35. <time-picker type="time" v-model="pickerTime" :border="false" :disabled="!inputDate"
  36. :start="reactStartTime" :end="reactEndTime" :hideSecond="hideSecond" style="width: 100%;">
  37. <input class="uni-date__input t-c" type="text" v-model="pickerTime" :placeholder="selectTimeText"
  38. :disabled="!inputDate" />
  39. </time-picker>
  40. </view>
  41. <calendar ref="pcSingle" :showMonth="false" :start-date="caleRange.startDate"
  42. :end-date="caleRange.endDate" :date="calendarDate" @change="singleChange"
  43. style="padding: 0 8px;" />
  44. <view v-if="hasTime" class="popup-x-footer">
  45. <text class="confirm" @click="confirmSingleChange">{{okText}}</text>
  46. </view>
  47. </view>
  48. <view v-else class="uni-date-range--x" :style="popover">
  49. <view class="uni-popper__arrow"></view>
  50. <view v-if="hasTime" class="popup-x-header uni-date-changed">
  51. <view class="popup-x-header--datetime">
  52. <input class="uni-date__input uni-date-range__input" type="text" v-model="tempRange.startDate"
  53. :placeholder="startDateText" />
  54. <time-picker type="time" v-model="tempRange.startTime" :start="reactStartTime" :border="false"
  55. :disabled="!tempRange.startDate" :hideSecond="hideSecond">
  56. <input class="uni-date__input uni-date-range__input" type="text"
  57. v-model="tempRange.startTime" :placeholder="startTimeText"
  58. :disabled="!tempRange.startDate" />
  59. </time-picker>
  60. </view>
  61. <uni-icons type="arrowthinright" color="#999" style="line-height: 40px;"></uni-icons>
  62. <view class="popup-x-header--datetime">
  63. <input class="uni-date__input uni-date-range__input" type="text" v-model="tempRange.endDate"
  64. :placeholder="endDateText" />
  65. <time-picker type="time" v-model="tempRange.endTime" :end="reactEndTime" :border="false"
  66. :disabled="!tempRange.endDate" :hideSecond="hideSecond">
  67. <input class="uni-date__input uni-date-range__input" type="text" v-model="tempRange.endTime"
  68. :placeholder="endTimeText" :disabled="!tempRange.endDate" />
  69. </time-picker>
  70. </view>
  71. </view>
  72. <view class="popup-x-body">
  73. <calendar ref="left" :showMonth="false" :start-date="caleRange.startDate"
  74. :end-date="caleRange.endDate" :range="true" @change="leftChange" :pleStatus="endMultipleStatus"
  75. @firstEnterCale="updateRightCale" style="padding: 0 8px;" />
  76. <calendar ref="right" :showMonth="false" :start-date="caleRange.startDate"
  77. :end-date="caleRange.endDate" :range="true" @change="rightChange"
  78. :pleStatus="startMultipleStatus" @firstEnterCale="updateLeftCale"
  79. style="padding: 0 8px;border-left: 1px solid #F1F1F1;" />
  80. </view>
  81. <view v-if="hasTime" class="popup-x-footer">
  82. <text class="" @click="clear">{{clearText}}</text>
  83. <text class="confirm" @click="confirmRangeChange">{{okText}}</text>
  84. </view>
  85. </view>
  86. </view>
  87. <calendar v-if="isPhone" ref="mobile" :clearDate="false" :date="calendarDate" :defTime="reactMobDefTime"
  88. :start-date="caleRange.startDate" :end-date="caleRange.endDate" :selectableTimes="mobSelectableTime"
  89. :startPlaceholder="startPlaceholder" :endPlaceholder="endPlaceholder"
  90. :pleStatus="endMultipleStatus" :showMonth="false" :range="isRange" :typeHasTime="hasTime" :insert="false"
  91. :hideSecond="hideSecond" @confirm="mobileChange" @maskClose="close" />
  92. </view>
  93. </template>
  94. <script>
  95. /**
  96. * DatetimePicker 时间选择器
  97. * @description 同时支持 PC 和移动端使用日历选择日期和日期范围
  98. * @tutorial https://ext.dcloud.net.cn/plugin?id=3962
  99. * @property {String} type 选择器类型
  100. * @property {String|Number|Array|Date} value 绑定值
  101. * @property {String} placeholder 单选择时的占位内容
  102. * @property {String} start 起始时间
  103. * @property {String} end 终止时间
  104. * @property {String} start-placeholder 范围选择时开始日期的占位内容
  105. * @property {String} end-placeholder 范围选择时结束日期的占位内容
  106. * @property {String} range-separator 选择范围时的分隔符
  107. * @property {Boolean} border = [true|false] 是否有边框
  108. * @property {Boolean} disabled = [true|false] 是否禁用
  109. * @property {Boolean} clearIcon = [true|false] 是否显示清除按钮(仅PC端适用)
  110. * @event {Function} change 确定日期时触发的事件
  111. * @event {Function} maskClick 点击遮罩层触发的事件
  112. * @event {Function} show 打开弹出层
  113. * @event {Function} close 关闭弹出层
  114. * @event {Function} clear 清除上次选中的状态和值
  115. **/
  116. import calendar from './calendar.vue'
  117. import timePicker from './time-picker.vue'
  118. import { initVueI18n } from '@dcloudio/uni-i18n'
  119. import i18nMessages from './i18n/index.js'
  120. export default {
  121. name: 'UniDatetimePicker',
  122. options: {
  123. virtualHost: true
  124. },
  125. components: {
  126. calendar,
  127. timePicker
  128. },
  129. data() {
  130. return {
  131. isRange: false,
  132. hasTime: false,
  133. displayValue: '',
  134. inputDate: '',
  135. calendarDate: '',
  136. pickerTime: '',
  137. // 范围选
  138. caleRange: {
  139. startDate: '',
  140. startTime: '',
  141. endDate: '',
  142. endTime: ''
  143. },
  144. range: {
  145. startDate: '',
  146. endDate: '',
  147. },
  148. tempRange: {
  149. startDate: '',
  150. startTime: '',
  151. endDate: '',
  152. endTime: ''
  153. },
  154. // 左右日历同步数据
  155. startMultipleStatus: {
  156. before: '',
  157. after: '',
  158. data: [],
  159. fulldate: ''
  160. },
  161. endMultipleStatus: {
  162. before: '',
  163. after: '',
  164. data: [],
  165. fulldate: ''
  166. },
  167. pickerVisible: false,
  168. popover: null,
  169. isEmitValue: false,
  170. isPhone: false,
  171. isFirstShow: true,
  172. i18nT: () => {}
  173. }
  174. },
  175. props: {
  176. type: {
  177. type: String,
  178. default: 'datetime'
  179. },
  180. value: {
  181. type: [String, Number, Array, Date],
  182. default: ''
  183. },
  184. modelValue: {
  185. type: [String, Number, Array, Date],
  186. default: ''
  187. },
  188. start: {
  189. type: [Number, String],
  190. default: ''
  191. },
  192. end: {
  193. type: [Number, String],
  194. default: ''
  195. },
  196. returnType: {
  197. type: String,
  198. default: 'string'
  199. },
  200. placeholder: {
  201. type: String,
  202. default: ''
  203. },
  204. startPlaceholder: {
  205. type: String,
  206. default: ''
  207. },
  208. endPlaceholder: {
  209. type: String,
  210. default: ''
  211. },
  212. rangeSeparator: {
  213. type: String,
  214. default: '-'
  215. },
  216. border: {
  217. type: [Boolean],
  218. default: true
  219. },
  220. disabled: {
  221. type: [Boolean],
  222. default: false
  223. },
  224. clearIcon: {
  225. type: [Boolean],
  226. default: true
  227. },
  228. hideSecond: {
  229. type: [Boolean],
  230. default: false
  231. }
  232. },
  233. watch: {
  234. type: {
  235. immediate: true,
  236. handler(newVal) {
  237. this.hasTime = newVal.indexOf('time') !== -1
  238. this.isRange = newVal.indexOf('range') !== -1
  239. }
  240. },
  241. // #ifndef VUE3
  242. value: {
  243. immediate: true,
  244. handler(newVal) {
  245. if (this.isEmitValue) {
  246. this.isEmitValue = false
  247. return
  248. }
  249. this.initPicker(newVal)
  250. }
  251. },
  252. // #endif
  253. // #ifdef VUE3
  254. modelValue: {
  255. immediate: true,
  256. handler(newVal) {
  257. if (this.isEmitValue) {
  258. this.isEmitValue = false
  259. return
  260. }
  261. this.initPicker(newVal)
  262. }
  263. },
  264. // #endif
  265. start: {
  266. immediate: true,
  267. handler(newVal) {
  268. if (!newVal) return
  269. const {
  270. defDate,
  271. defTime
  272. } = this.parseDate(newVal)
  273. this.caleRange.startDate = defDate
  274. if (this.hasTime) {
  275. this.caleRange.startTime = defTime
  276. }
  277. }
  278. },
  279. end: {
  280. immediate: true,
  281. handler(newVal) {
  282. if (!newVal) return
  283. const {
  284. defDate,
  285. defTime
  286. } = this.parseDate(newVal)
  287. this.caleRange.endDate = defDate
  288. if (this.hasTime) {
  289. this.caleRange.endTime = defTime
  290. }
  291. }
  292. },
  293. },
  294. computed: {
  295. reactStartTime() {
  296. const activeDate = this.isRange ? this.tempRange.startDate : this.inputDate
  297. const res = activeDate === this.caleRange.startDate ? this.caleRange.startTime : ''
  298. return res
  299. },
  300. reactEndTime() {
  301. const activeDate = this.isRange ? this.tempRange.endDate : this.inputDate
  302. const res = activeDate === this.caleRange.endDate ? this.caleRange.endTime : ''
  303. return res
  304. },
  305. reactMobDefTime() {
  306. const times = {
  307. start: this.tempRange.startTime,
  308. end: this.tempRange.endTime
  309. }
  310. return this.isRange ? times : this.pickerTime
  311. },
  312. mobSelectableTime() {
  313. return {
  314. start: this.caleRange.startTime,
  315. end: this.caleRange.endTime
  316. }
  317. },
  318. datePopupWidth() {
  319. // todo
  320. return this.isRange ? 653 : 301
  321. },
  322. /**
  323. * for i18n
  324. */
  325. singlePlaceholderText() {
  326. return this.placeholder || (this.type === 'date' ? this.selectDateText : this.selectDateTimeText)
  327. },
  328. startPlaceholderText() {
  329. return this.startPlaceholder || this.startDateText
  330. },
  331. endPlaceholderText() {
  332. return this.endPlaceholder || this.endDateText
  333. },
  334. selectDateText() {
  335. return this.i18nT("uni-datetime-picker.selectDate")
  336. },
  337. selectDateTimeText() {
  338. return this.i18nT("uni-datetime-picker.selectDateTime")
  339. },
  340. selectTimeText() {
  341. return this.i18nT("uni-datetime-picker.selectTime")
  342. },
  343. startDateText() {
  344. return this.startPlaceholder || this.i18nT("uni-datetime-picker.startDate")
  345. },
  346. startTimeText() {
  347. return this.i18nT("uni-datetime-picker.startTime")
  348. },
  349. endDateText() {
  350. return this.endPlaceholder || this.i18nT("uni-datetime-picker.endDate")
  351. },
  352. endTimeText() {
  353. return this.i18nT("uni-datetime-picker.endTime")
  354. },
  355. okText() {
  356. return this.i18nT("uni-datetime-picker.ok")
  357. },
  358. clearText() {
  359. return this.i18nT("uni-datetime-picker.clear")
  360. },
  361. showClearIcon() {
  362. return this.clearIcon && !this.disabled && (this.displayValue || (this.range.startDate && this.range.endDate))
  363. }
  364. },
  365. created() {
  366. this.initI18nT()
  367. this.platform()
  368. },
  369. methods: {
  370. initI18nT() {
  371. const vueI18n = initVueI18n(i18nMessages)
  372. this.i18nT = vueI18n.t
  373. },
  374. initPicker(newVal) {
  375. if (!newVal || Array.isArray(newVal) && !newVal.length) {
  376. this.$nextTick(() => {
  377. this.clear(false)
  378. })
  379. return
  380. }
  381. if (!Array.isArray(newVal) && !this.isRange) {
  382. const {
  383. defDate,
  384. defTime
  385. } = this.parseDate(newVal)
  386. this.displayValue = defDate
  387. this.inputDate = defDate
  388. this.calendarDate = defDate
  389. if (this.hasTime) {
  390. this.displayValue = defDate + ' ' + defTime
  391. this.pickerTime = defTime
  392. }
  393. } else {
  394. const [before, after] = newVal
  395. if (!before && !after) return
  396. const defBefore = this.parseDate(before)
  397. const defAfter = this.parseDate(after)
  398. const startDate = defBefore.defDate
  399. const endDate = defAfter.defDate
  400. this.range.startDate = this.tempRange.startDate = startDate
  401. this.range.endDate = this.tempRange.endDate = endDate
  402. if (this.hasTime) {
  403. this.range.startDate = defBefore.defDate + ' ' + defBefore.defTime
  404. this.range.endDate = defAfter.defDate + ' ' + defAfter.defTime
  405. this.tempRange.startTime = defBefore.defTime
  406. this.tempRange.endTime = defAfter.defTime
  407. }
  408. const defaultRange = {
  409. before: defBefore.defDate,
  410. after: defAfter.defDate
  411. }
  412. this.startMultipleStatus = Object.assign({}, this.startMultipleStatus, defaultRange, {
  413. which: 'right'
  414. })
  415. this.endMultipleStatus = Object.assign({}, this.endMultipleStatus, defaultRange, {
  416. which: 'left'
  417. })
  418. }
  419. },
  420. updateLeftCale(e) {
  421. const left = this.$refs.left
  422. // 设置范围选
  423. left.cale.setHoverMultiple(e.after)
  424. left.setDate(this.$refs.left.nowDate.fullDate)
  425. },
  426. updateRightCale(e) {
  427. const right = this.$refs.right
  428. // 设置范围选
  429. right.cale.setHoverMultiple(e.after)
  430. right.setDate(this.$refs.right.nowDate.fullDate)
  431. },
  432. platform() {
  433. const { windowWidth } = uni.getSystemInfoSync()
  434. this.isPhone = windowWidth <= 500
  435. this.windowWidth = windowWidth
  436. },
  437. show() {
  438. if (this.disabled) {
  439. return
  440. }
  441. this.platform()
  442. if (this.isPhone) {
  443. this.$refs.mobile.open()
  444. return
  445. }
  446. this.popover = {
  447. top: '10px'
  448. }
  449. const dateEditor = uni.createSelectorQuery().in(this).select(".uni-date-editor")
  450. dateEditor.boundingClientRect(rect => {
  451. if (this.windowWidth - rect.left < this.datePopupWidth) {
  452. this.popover.right = 0
  453. }
  454. }).exec()
  455. setTimeout(() => {
  456. this.pickerVisible = !this.pickerVisible
  457. if (!this.isPhone && this.isRange && this.isFirstShow) {
  458. this.isFirstShow = false
  459. const {
  460. startDate,
  461. endDate
  462. } = this.range
  463. if (startDate && endDate) {
  464. if (this.diffDate(startDate, endDate) < 30) {
  465. this.$refs.right.next()
  466. }
  467. } else {
  468. this.$refs.right.next()
  469. this.$refs.right.cale.lastHover = false
  470. }
  471. }
  472. }, 50)
  473. },
  474. close() {
  475. setTimeout(() => {
  476. this.pickerVisible = false
  477. this.$emit('maskClick', this.value)
  478. this.$refs.mobile && this.$refs.mobile.close()
  479. }, 20)
  480. },
  481. setEmit(value) {
  482. if (this.returnType === "timestamp" || this.returnType === "date") {
  483. if (!Array.isArray(value)) {
  484. if (!this.hasTime) {
  485. value = value + ' ' + '00:00:00'
  486. }
  487. value = this.createTimestamp(value)
  488. if (this.returnType === "date") {
  489. value = new Date(value)
  490. }
  491. } else {
  492. if (!this.hasTime) {
  493. value[0] = value[0] + ' ' + '00:00:00'
  494. value[1] = value[1] + ' ' + '00:00:00'
  495. }
  496. value[0] = this.createTimestamp(value[0])
  497. value[1] = this.createTimestamp(value[1])
  498. if (this.returnType === "date") {
  499. value[0] = new Date(value[0])
  500. value[1] = new Date(value[1])
  501. }
  502. }
  503. }
  504. this.$emit('change', value)
  505. this.$emit('input', value)
  506. this.$emit('update:modelValue', value)
  507. this.isEmitValue = true
  508. },
  509. createTimestamp(date) {
  510. date = this.fixIosDateFormat(date)
  511. return Date.parse(new Date(date))
  512. },
  513. singleChange(e) {
  514. this.calendarDate = this.inputDate = e.fulldate
  515. if (this.hasTime) return
  516. this.confirmSingleChange()
  517. },
  518. confirmSingleChange() {
  519. if (!this.inputDate) {
  520. this.pickerVisible = false
  521. return
  522. }
  523. if(!this.checkDate(this.inputDate)){
  524. this.inputDate = this.getDate(Date.now())
  525. }
  526. let startLaterInputDate = false
  527. let startDate, startTime
  528. if(this.start) {
  529. let startString = this.start
  530. if(typeof this.start === 'number'){
  531. startString = this.getDateTime(this.start)
  532. }
  533. [startDate, startTime] = startString.split(' ')
  534. if(this.start && !this.dateCompare(startDate, this.inputDate)) {
  535. startLaterInputDate = true
  536. this.inputDate = startDate
  537. }
  538. }
  539. let endEarlierInputDate = false
  540. let endDate, endTime
  541. if(this.end) {
  542. let endString = this.end
  543. if(typeof this.end === 'number'){
  544. endString = this.getDateTime(this.end)
  545. }
  546. [endDate, endTime] = endString.split(' ')
  547. if(this.end && !this.dateCompare(this.inputDate, endDate)) {
  548. endEarlierInputDate = true
  549. this.inputDate = endDate
  550. }
  551. }
  552. if (this.hasTime) {
  553. if(startLaterInputDate){
  554. this.pickerTime = startTime || this.getDefaultSecond()
  555. }
  556. if(endEarlierInputDate){
  557. this.pickerTime = endTime || this.getDefaultSecond()
  558. }
  559. if(!this.pickerTime){
  560. this.pickerTime = this.getTime(Date.now())
  561. }
  562. this.displayValue = `${this.inputDate} ${this.pickerTime}`
  563. } else {
  564. this.displayValue = this.inputDate
  565. }
  566. this.setEmit(this.displayValue)
  567. this.pickerVisible = false
  568. },
  569. leftChange(e) {
  570. const {
  571. before,
  572. after
  573. } = e.range
  574. this.rangeChange(before, after)
  575. const obj = {
  576. before: e.range.before,
  577. after: e.range.after,
  578. data: e.range.data,
  579. fulldate: e.fulldate
  580. }
  581. this.startMultipleStatus = Object.assign({}, this.startMultipleStatus, obj)
  582. },
  583. rightChange(e) {
  584. const {
  585. before,
  586. after
  587. } = e.range
  588. this.rangeChange(before, after)
  589. const obj = {
  590. before: e.range.before,
  591. after: e.range.after,
  592. data: e.range.data,
  593. fulldate: e.fulldate
  594. }
  595. this.endMultipleStatus = Object.assign({}, this.endMultipleStatus, obj)
  596. },
  597. mobileChange(e) {
  598. if (this.isRange) {
  599. const {before, after} = e.range
  600. if(!before || !after){
  601. return
  602. }
  603. this.handleStartAndEnd(before, after, true)
  604. if (this.hasTime) {
  605. const {
  606. startTime,
  607. endTime
  608. } = e.timeRange
  609. this.tempRange.startTime = startTime
  610. this.tempRange.endTime = endTime
  611. }
  612. this.confirmRangeChange()
  613. } else {
  614. if (this.hasTime) {
  615. this.displayValue = e.fulldate + ' ' + e.time
  616. } else {
  617. this.displayValue = e.fulldate
  618. }
  619. this.setEmit(this.displayValue)
  620. }
  621. this.$refs.mobile.close()
  622. },
  623. rangeChange(before, after) {
  624. if (!(before && after)) return
  625. this.handleStartAndEnd(before, after, true)
  626. if (this.hasTime) return
  627. this.confirmRangeChange()
  628. },
  629. confirmRangeChange() {
  630. if (!this.tempRange.startDate || !this.tempRange.endDate) {
  631. this.pickerVisible = false
  632. return
  633. }
  634. if(!this.checkDate(this.tempRange.startDate)){
  635. this.tempRange.startDate = this.getDate(Date.now())
  636. }
  637. if(!this.checkDate(this.tempRange.endDate)){
  638. this.tempRange.endDate = this.getDate(Date.now())
  639. }
  640. let start, end
  641. let startDateLaterRangeStartDate = false
  642. let startDateLaterRangeEndDate = false
  643. let startDate, startTime
  644. if(this.start) {
  645. let startString = this.start
  646. if(typeof this.start === 'number'){
  647. startString = this.getDateTime(this.start)
  648. }
  649. [startDate,startTime] = startString.split(' ')
  650. if(this.start && !this.dateCompare(this.start, this.tempRange.startDate)) {
  651. startDateLaterRangeStartDate = true
  652. this.tempRange.startDate = startDate
  653. }
  654. if(this.start && !this.dateCompare(this.start, this.tempRange.endDate)) {
  655. startDateLaterRangeEndDate = true
  656. this.tempRange.endDate = startDate
  657. }
  658. }
  659. let endDateEarlierRangeStartDate = false
  660. let endDateEarlierRangeEndDate = false
  661. let endDate, endTime
  662. if(this.end) {
  663. let endString = this.end
  664. if(typeof this.end === 'number'){
  665. endString = this.getDateTime(this.end)
  666. }
  667. [endDate,endTime] = endString.split(' ')
  668. if(this.end && !this.dateCompare(this.tempRange.startDate, this.end)) {
  669. endDateEarlierRangeStartDate = true
  670. this.tempRange.startDate = endDate
  671. }
  672. if(this.end && !this.dateCompare(this.tempRange.endDate, this.end)) {
  673. endDateEarlierRangeEndDate = true
  674. this.tempRange.endDate = endDate
  675. }
  676. }
  677. if (!this.hasTime) {
  678. start = this.range.startDate = this.tempRange.startDate
  679. end = this.range.endDate = this.tempRange.endDate
  680. } else {
  681. if(startDateLaterRangeStartDate){
  682. this.tempRange.startTime = startTime || this.getDefaultSecond()
  683. }else if(endDateEarlierRangeStartDate){
  684. this.tempRange.startTime = endTime || this.getDefaultSecond()
  685. }
  686. if(!this.tempRange.startTime){
  687. this.tempRange.startTime = this.getTime(Date.now())
  688. }
  689. if(startDateLaterRangeEndDate){
  690. this.tempRange.endTime = startTime || this.getDefaultSecond()
  691. }else if(endDateEarlierRangeEndDate){
  692. this.tempRange.endTime = endTime || this.getDefaultSecond()
  693. }
  694. if(!this.tempRange.endTime){
  695. this.tempRange.endTime = this.getTime(Date.now())
  696. }
  697. start = this.range.startDate = `${this.tempRange.startDate} ${this.tempRange.startTime}`
  698. end = this.range.endDate = `${this.tempRange.endDate} ${this.tempRange.endTime}`
  699. }
  700. if(!this.dateCompare(start,end)){
  701. [start, end] = [end, start]
  702. }
  703. this.range.startDate = start
  704. this.range.endDate = end
  705. const displayRange = [start, end]
  706. this.setEmit(displayRange)
  707. this.pickerVisible = false
  708. },
  709. handleStartAndEnd(before, after, temp = false) {
  710. if (!(before && after)) return
  711. const type = temp ? 'tempRange' : 'range'
  712. const isStartEarlierEnd = this.dateCompare(before, after)
  713. this[type].startDate = isStartEarlierEnd ? before : after
  714. this[type].endDate = isStartEarlierEnd ? after : before
  715. },
  716. /**
  717. * 比较时间大小
  718. */
  719. dateCompare(startDate, endDate) {
  720. // 计算截止时间
  721. startDate = new Date(startDate.replace('-', '/').replace('-', '/'))
  722. // 计算详细项的截止时间
  723. endDate = new Date(endDate.replace('-', '/').replace('-', '/'))
  724. return startDate <= endDate
  725. },
  726. /**
  727. * 比较时间差
  728. */
  729. diffDate(startDate, endDate) {
  730. // 计算截止时间
  731. startDate = new Date(startDate.replace('-', '/').replace('-', '/'))
  732. // 计算详细项的截止时间
  733. endDate = new Date(endDate.replace('-', '/').replace('-', '/'))
  734. const diff = (endDate - startDate) / (24 * 60 * 60 * 1000)
  735. return Math.abs(diff)
  736. },
  737. clear(needEmit = true) {
  738. if (!this.isRange) {
  739. this.displayValue = ''
  740. this.inputDate = ''
  741. this.pickerTime = ''
  742. if (this.isPhone) {
  743. this.$refs.mobile && this.$refs.mobile.clearCalender()
  744. } else {
  745. this.$refs.pcSingle && this.$refs.pcSingle.clearCalender()
  746. }
  747. if (needEmit) {
  748. this.$emit('change', '')
  749. this.$emit('input', '')
  750. this.$emit('update:modelValue', '')
  751. }
  752. } else {
  753. this.range.startDate = ''
  754. this.range.endDate = ''
  755. this.tempRange.startDate = ''
  756. this.tempRange.startTime = ''
  757. this.tempRange.endDate = ''
  758. this.tempRange.endTime = ''
  759. if (this.isPhone) {
  760. this.$refs.mobile && this.$refs.mobile.clearCalender()
  761. } else {
  762. this.$refs.left && this.$refs.left.clearCalender()
  763. this.$refs.right && this.$refs.right.clearCalender()
  764. this.$refs.right && this.$refs.right.next()
  765. }
  766. if (needEmit) {
  767. this.$emit('change', [])
  768. this.$emit('input', [])
  769. this.$emit('update:modelValue', [])
  770. }
  771. }
  772. },
  773. parseDate(date) {
  774. date = this.fixIosDateFormat(date)
  775. const defVal = new Date(date)
  776. const year = defVal.getFullYear()
  777. const month = defVal.getMonth() + 1
  778. const day = defVal.getDate()
  779. const hour = defVal.getHours()
  780. const minute = defVal.getMinutes()
  781. const second = defVal.getSeconds()
  782. const defDate = year + '-' + this.lessTen(month) + '-' + this.lessTen(day)
  783. const defTime = this.lessTen(hour) + ':' + this.lessTen(minute) + (this.hideSecond ? '' : (':' + this
  784. .lessTen(second)))
  785. return {
  786. defDate,
  787. defTime
  788. }
  789. },
  790. lessTen(item) {
  791. return item < 10 ? '0' + item : item
  792. },
  793. //兼容 iOS、safari 日期格式
  794. fixIosDateFormat(value) {
  795. // #ifndef MP
  796. if (typeof value === 'string') {
  797. value = value.replace(/-/g, '/')
  798. }
  799. // #endif
  800. return value
  801. },
  802. checkDate(date){
  803. const dateReg = /((19|20)\d{2})(-|\/)\d{1,2}(-|\/)\d{1,2}/g
  804. return date.match(dateReg)
  805. },
  806. getDateTime(date){
  807. return `${this.getDate(date)} ${this.getTime(date)}`
  808. },
  809. getDate(date){
  810. date = new Date(date)
  811. const year = date.getFullYear()
  812. const month = date.getMonth()+1
  813. const day = date.getDate()
  814. return `${year}-${this.addZero(month)}-${this.addZero(day)}`
  815. },
  816. getTime(date){
  817. date = new Date(date)
  818. const hour = date.getHours()
  819. const minute = date.getMinutes()
  820. const second = date.getSeconds()
  821. return this.hideSecond ? `${this.addZero(hour)}:${this.addZero(minute)}` : `${this.addZero(hour)}:${this.addZero(minute)}:${this.addZero(second)}`
  822. },
  823. addZero(num) {
  824. if(num < 10){
  825. num = `0${num}`
  826. }
  827. return num
  828. },
  829. getDefaultSecond() {
  830. return this.hideSecond ? '00:00' : '00:00:00'
  831. }
  832. }
  833. }
  834. </script>
  835. <style lang="scss">
  836. $uni-primary: #007aff !default;
  837. .uni-date {
  838. width: 100%;
  839. flex: 1;
  840. }
  841. .uni-date-x {
  842. display: flex;
  843. flex-direction: row;
  844. align-items: center;
  845. justify-content: center;
  846. border-radius: 4px;
  847. background-color: #fff;
  848. color: #666;
  849. font-size: 14px;
  850. flex: 1;
  851. .icon-calendar{
  852. padding-left: 3px;
  853. }
  854. .range-separator{
  855. padding: 0 2px;
  856. }
  857. }
  858. .uni-date-x--border {
  859. box-sizing: border-box;
  860. border-radius: 4px;
  861. border: 1px solid #e5e5e5;
  862. }
  863. .uni-date-editor--x {
  864. display: flex;
  865. align-items: center;
  866. position: relative;
  867. }
  868. .uni-date-editor--x .uni-date__icon-clear {
  869. padding-right: 3px;
  870. display: flex;
  871. align-items: center;
  872. /* #ifdef H5 */
  873. cursor: pointer;
  874. /* #endif */
  875. }
  876. .uni-date__x-input {
  877. width: auto;
  878. position: relative;
  879. overflow: hidden;
  880. flex: 1;
  881. line-height: 1;
  882. font-size: 14px;
  883. height: 35px;
  884. }
  885. .t-c {
  886. text-align: center;
  887. }
  888. .uni-date__input {
  889. height: 40px;
  890. width: 100%;
  891. line-height: 40px;
  892. font-size: 14px;
  893. }
  894. .uni-date-range__input {
  895. text-align: center;
  896. max-width: 142px;
  897. }
  898. .uni-date-picker__container {
  899. position: relative;
  900. }
  901. .uni-date-mask--pc {
  902. position: fixed;
  903. bottom: 0px;
  904. top: 0px;
  905. left: 0px;
  906. right: 0px;
  907. background-color: rgba(0, 0, 0, 0);
  908. transition-duration: 0.3s;
  909. z-index: 996;
  910. }
  911. .uni-date-single--x {
  912. background-color: #fff;
  913. position: absolute;
  914. top: 0;
  915. z-index: 999;
  916. border: 1px solid #EBEEF5;
  917. box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  918. border-radius: 4px;
  919. }
  920. .uni-date-range--x {
  921. background-color: #fff;
  922. position: absolute;
  923. top: 0;
  924. z-index: 999;
  925. border: 1px solid #EBEEF5;
  926. box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  927. border-radius: 4px;
  928. }
  929. .uni-date-editor--x__disabled {
  930. opacity: 0.4;
  931. cursor: default;
  932. }
  933. .uni-date-editor--logo {
  934. width: 16px;
  935. height: 16px;
  936. vertical-align: middle;
  937. }
  938. /* 添加时间 */
  939. .popup-x-header {
  940. /* #ifndef APP-NVUE */
  941. display: flex;
  942. /* #endif */
  943. flex-direction: row;
  944. }
  945. .popup-x-header--datetime {
  946. /* #ifndef APP-NVUE */
  947. display: flex;
  948. /* #endif */
  949. flex-direction: row;
  950. flex: 1;
  951. }
  952. .popup-x-body {
  953. display: flex;
  954. }
  955. .popup-x-footer {
  956. padding: 0 15px;
  957. border-top-color: #F1F1F1;
  958. border-top-style: solid;
  959. border-top-width: 1px;
  960. line-height: 40px;
  961. text-align: right;
  962. color: #666;
  963. }
  964. .popup-x-footer text:hover {
  965. color: $uni-primary;
  966. cursor: pointer;
  967. opacity: 0.8;
  968. }
  969. .popup-x-footer .confirm {
  970. margin-left: 20px;
  971. color: $uni-primary;
  972. }
  973. .uni-date-changed {
  974. text-align: center;
  975. color: #333;
  976. border-bottom-color: #F1F1F1;
  977. border-bottom-style: solid;
  978. border-bottom-width: 1px;
  979. }
  980. .uni-date-changed--time text {
  981. height: 50px;
  982. line-height: 50px;
  983. }
  984. .uni-date-changed .uni-date-changed--time {
  985. flex: 1;
  986. }
  987. .uni-date-changed--time-date {
  988. color: #333;
  989. opacity: 0.6;
  990. }
  991. .mr-50 {
  992. margin-right: 50px;
  993. }
  994. /* picker 弹出层通用的指示小三角, todo:扩展至上下左右方向定位 */
  995. .uni-popper__arrow,
  996. .uni-popper__arrow::after {
  997. position: absolute;
  998. display: block;
  999. width: 0;
  1000. height: 0;
  1001. border: 6px solid transparent;
  1002. border-top-width: 0;
  1003. }
  1004. .uni-popper__arrow {
  1005. filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
  1006. top: -6px;
  1007. left: 10%;
  1008. margin-right: 3px;
  1009. border-bottom-color: #EBEEF5;
  1010. }
  1011. .uni-popper__arrow::after {
  1012. content: " ";
  1013. top: 1px;
  1014. margin-left: -6px;
  1015. border-bottom-color: #fff;
  1016. }
  1017. </style>