u-calendar.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639
  1. <template>
  2. <u-popup closeable :maskCloseAble="maskCloseAble" mode="bottom" :popup="false" v-model="value" length="auto"
  3. :safeAreaInsetBottom="safeAreaInsetBottom" @close="close" :z-index="uZIndex" :border-radius="borderRadius" :closeable="closeable">
  4. <view class="u-calendar">
  5. <view class="u-calendar__header">
  6. <view class="u-calendar__header__text" v-if="!$slots['tooltip']">
  7. {{toolTip}}
  8. </view>
  9. <slot v-else name="tooltip" />
  10. </view>
  11. <view class="u-calendar__action u-flex u-row-center">
  12. <view class="u-calendar__action__icon">
  13. <u-icon v-if="changeYear" name="arrow-left-double" :color="yearArrowColor" @click="changeYearHandler(0)"></u-icon>
  14. </view>
  15. <view class="u-calendar__action__icon">
  16. <u-icon v-if="changeMonth" name="arrow-left" :color="monthArrowColor" @click="changeMonthHandler(0)"></u-icon>
  17. </view>
  18. <view class="u-calendar__action__text">{{ showTitle }}</view>
  19. <view class="u-calendar__action__icon">
  20. <u-icon v-if="changeMonth" name="arrow-right" :color="monthArrowColor" @click="changeMonthHandler(1)"></u-icon>
  21. </view>
  22. <view class="u-calendar__action__icon">
  23. <u-icon v-if="changeYear" name="arrow-right-double" :color="yearArrowColor" @click="changeYearHandler(1)"></u-icon>
  24. </view>
  25. </view>
  26. <view class="u-calendar__week-day">
  27. <view class="u-calendar__week-day__text" v-for="(item, index) in weekDayZh" :key="index">{{item}}</view>
  28. </view>
  29. <view class="u-calendar__content">
  30. <!-- 前置空白部分 -->
  31. <block v-for="(item, index) in weekdayArr" :key="index">
  32. <view class="u-calendar__content__item"></view>
  33. </block>
  34. <view class="u-calendar__content__item" :class="{
  35. 'u-hover-class':openDisAbled(year,month,index+1),
  36. 'u-calendar__content--start-date': (mode == 'range' && startDate==`${year}-${month}-${index+1}`) || mode== 'date',
  37. 'u-calendar__content--end-date':(mode== 'range' && endDate==`${year}-${month}-${index+1}`) || mode == 'date'
  38. }" :style="{backgroundColor: getColor(index,1)}" v-for="(item, index) in daysArr" :key="index"
  39. @tap="dateClick(index)">
  40. <view class="u-calendar__content__item__inner" :style="{color: getColor(index,2)}">
  41. <view>{{ index + 1 }}</view>
  42. </view>
  43. <view class="u-calendar__content__item__tips" :style="{color:activeColor}" v-if="mode== 'range' && startDate==`${year}-${month}-${index+1}` && startDate!=endDate">{{startText}}</view>
  44. <view class="u-calendar__content__item__tips" :style="{color:activeColor}" v-if="mode== 'range' && endDate==`${year}-${month}-${index+1}`">{{endText}}</view>
  45. </view>
  46. <view class="u-calendar__content__bg-month">{{month}}</view>
  47. </view>
  48. <view class="u-calendar__bottom">
  49. <view class="u-calendar__bottom__choose">
  50. <text>{{mode == 'date' ? activeDate : startDate}}</text>
  51. <text v-if="endDate">至{{endDate}}</text>
  52. </view>
  53. <view class="u-calendar__bottom__btn">
  54. <u-button :type="btnType" shape="circle" size="default" @click="btnFix(false)">确定</u-button>
  55. </view>
  56. </view>
  57. </view>
  58. </u-popup>
  59. </template>
  60. <script>
  61. /**
  62. * calendar 日历
  63. * @description 此组件用于单个选择日期,范围选择日期等,日历被包裹在底部弹起的容器中。
  64. * @tutorial http://uviewui.com/components/calendar.html
  65. * @property {String} mode 选择日期的模式,date-为单个日期,range-为选择日期范围
  66. * @property {Boolean} v-model 布尔值变量,用于控制日历的弹出与收起
  67. * @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配(默认false)
  68. * @property {Boolean} change-year 是否显示顶部的切换年份方向的按钮(默认true)
  69. * @property {Boolean} change-month 是否显示顶部的切换月份方向的按钮(默认true)
  70. * @property {String Number} max-year 可切换的最大年份(默认2050)
  71. * @property {String Number} min-year 最小可选日期(默认1950)
  72. * @property {String Number} min-date 可切换的最小年份(默认1950-01-01)
  73. * @property {String Number} max-date 最大可选日期(默认当前日期)
  74. * @property {String Number} 弹窗顶部左右两边的圆角值,单位rpx(默认20)
  75. * @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭日历(默认true)
  76. * @property {String} month-arrow-color 月份切换按钮箭头颜色(默认#606266)
  77. * @property {String} year-arrow-color 年份切换按钮箭头颜色(默认#909399)
  78. * @property {String} color 日期字体的默认颜色(默认#303133)
  79. * @property {String} active-bg-color 起始/结束日期按钮的背景色(默认#2979ff)
  80. * @property {String Number} z-index 弹出时的z-index值(默认10075)
  81. * @property {String} active-color 起始/结束日期按钮的字体颜色(默认#ffffff)
  82. * @property {String} range-bg-color 起始/结束日期之间的区域的背景颜色(默认rgba(41,121,255,0.13))
  83. * @property {String} range-color 选择范围内字体颜色(默认#2979ff)
  84. * @property {String} start-text 起始日期底部的提示文字(默认 '开始')
  85. * @property {String} end-text 结束日期底部的提示文字(默认 '结束')
  86. * @property {String} btn-type 底部确定按钮的主题(默认 'primary')
  87. * @property {String} toolTip 顶部提示文字,如设置名为tooltip的slot,此参数将失效(默认 '选择日期')
  88. * @property {Boolean} closeable 是否显示右上角的关闭图标(默认true)
  89. * @example <u-calendar v-model="show" :mode="mode"></u-calendar>
  90. */
  91. export default {
  92. name: 'u-calendar',
  93. props: {
  94. safeAreaInsetBottom: {
  95. type: Boolean,
  96. default: false
  97. },
  98. // 是否允许通过点击遮罩关闭Picker
  99. maskCloseAble: {
  100. type: Boolean,
  101. default: true
  102. },
  103. // 通过双向绑定控制组件的弹出与收起
  104. value: {
  105. type: Boolean,
  106. default: false
  107. },
  108. // 弹出的z-index值
  109. zIndex: {
  110. type: [String, Number],
  111. default: 0
  112. },
  113. // 是否允许切换年份
  114. changeYear: {
  115. type: Boolean,
  116. default: true
  117. },
  118. // 是否允许切换月份
  119. changeMonth: {
  120. type: Boolean,
  121. default: true
  122. },
  123. // date-单个日期选择,range-开始日期+结束日期选择
  124. mode: {
  125. type: String,
  126. default: 'date'
  127. },
  128. // 可切换的最大年份
  129. maxYear: {
  130. type: [Number, String],
  131. default: 2050
  132. },
  133. // 可切换的最小年份
  134. minYear: {
  135. type: [Number, String],
  136. default: 1950
  137. },
  138. // 最小可选日期(不在范围内日期禁用不可选)
  139. minDate: {
  140. type: [Number, String],
  141. default: '1950-01-01'
  142. },
  143. /**
  144. * 最大可选日期
  145. * 默认最大值为今天,之后的日期不可选
  146. * 2030-12-31
  147. * */
  148. maxDate: {
  149. type: [Number, String],
  150. default: ''
  151. },
  152. // 弹窗顶部左右两边的圆角值
  153. borderRadius: {
  154. type: [String, Number],
  155. default: 20
  156. },
  157. // 月份切换按钮箭头颜色
  158. monthArrowColor: {
  159. type: String,
  160. default: '#606266'
  161. },
  162. // 年份切换按钮箭头颜色
  163. yearArrowColor: {
  164. type: String,
  165. default: '#909399'
  166. },
  167. // 默认日期字体颜色
  168. color: {
  169. type: String,
  170. default: '#303133'
  171. },
  172. // 选中|起始结束日期背景色
  173. activeBgColor: {
  174. type: String,
  175. default: '#2979ff'
  176. },
  177. // 选中|起始结束日期字体颜色
  178. activeColor: {
  179. type: String,
  180. default: '#ffffff'
  181. },
  182. // 范围内日期背景色
  183. rangeBgColor: {
  184. type: String,
  185. default: 'rgba(41,121,255,0.13)'
  186. },
  187. // 范围内日期字体颜色
  188. rangeColor: {
  189. type: String,
  190. default: '#2979ff'
  191. },
  192. // mode=range时生效,起始日期自定义文案
  193. startText: {
  194. type: String,
  195. default: '开始'
  196. },
  197. // mode=range时生效,结束日期自定义文案
  198. endText: {
  199. type: String,
  200. default: '结束'
  201. },
  202. //按钮样式类型
  203. btnType: {
  204. type: String,
  205. default: 'primary'
  206. },
  207. // 当前选中日期带选中效果
  208. isActiveCurrent: {
  209. type: Boolean,
  210. default: true
  211. },
  212. // 切换年月是否触发事件 mode=date时生效
  213. isChange: {
  214. type: Boolean,
  215. default: false
  216. },
  217. // 是否显示右上角的关闭图标
  218. closeable: {
  219. type: Boolean,
  220. default: true
  221. },
  222. // 顶部的提示文字
  223. toolTip: {
  224. type: String,
  225. default: '选择日期'
  226. }
  227. },
  228. data() {
  229. return {
  230. // 星期几,值为1-7
  231. weekday: 1,
  232. weekdayArr:[],
  233. // 当前月有多少天
  234. days: 0,
  235. daysArr:[],
  236. showTitle: '',
  237. year: 2020,
  238. month: 0,
  239. day: 0,
  240. startYear: 0,
  241. startMonth: 0,
  242. startDay: 0,
  243. endYear: 0,
  244. endMonth: 0,
  245. endDay: 0,
  246. today: '',
  247. activeDate: '',
  248. startDate: '',
  249. endDate: '',
  250. isStart: true,
  251. min: null,
  252. max: null,
  253. weekDayZh: ['日', '一', '二', '三', '四', '五', '六']
  254. };
  255. },
  256. computed: {
  257. dataChange() {
  258. return `${this.mode}-${this.minDate}-${this.maxDate}`;
  259. },
  260. uZIndex() {
  261. // 如果用户有传递z-index值,优先使用
  262. return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
  263. }
  264. },
  265. watch: {
  266. dataChange(val) {
  267. this.init()
  268. }
  269. },
  270. created() {
  271. this.init()
  272. },
  273. methods: {
  274. getColor(index, type) {
  275. let color = type == 1 ? '' : this.color;
  276. let day = index + 1
  277. let date = `${this.year}-${this.month}-${day}`
  278. let timestamp = new Date(date.replace(/\-/g, '/')).getTime();
  279. let start = this.startDate.replace(/\-/g, '/')
  280. let end = this.endDate.replace(/\-/g, '/')
  281. if ((this.isActiveCurrent && this.activeDate == date) || this.startDate == date || this.endDate == date) {
  282. color = type == 1 ? this.activeBgColor : this.activeColor;
  283. } else if (this.endDate && timestamp > new Date(start).getTime() && timestamp < new Date(end).getTime()) {
  284. color = type == 1 ? this.rangeBgColor : this.rangeColor;
  285. }
  286. return color;
  287. },
  288. init() {
  289. let now = new Date();
  290. this.year = now.getFullYear();
  291. this.month = now.getMonth() + 1;
  292. this.day = now.getDate();
  293. this.today = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`;
  294. this.activeDate = this.today;
  295. this.min = this.initDate(this.minDate);
  296. this.max = this.initDate(this.maxDate || this.today);
  297. this.startDate = "";
  298. this.startYear = 0;
  299. this.startMonth = 0;
  300. this.startDay = 0;
  301. this.endYear = 0;
  302. this.endMonth = 0;
  303. this.endDay = 0;
  304. this.endDate = "";
  305. this.isStart = true;
  306. this.changeData();
  307. },
  308. //日期处理
  309. initDate(date) {
  310. let fdate = date.split('-');
  311. return {
  312. year: Number(fdate[0] || 1920),
  313. month: Number(fdate[1] || 1),
  314. day: Number(fdate[2] || 1)
  315. }
  316. },
  317. openDisAbled: function(year, month, day) {
  318. let bool = true;
  319. let date = `${year}/${month}/${day}`;
  320. // let today = this.today.replace(/\-/g, '/');
  321. let min = `${this.min.year}/${this.min.month}/${this.min.day}`;
  322. let max = `${this.max.year}/${this.max.month}/${this.max.day}`;
  323. let timestamp = new Date(date).getTime();
  324. if (timestamp >= new Date(min).getTime() && timestamp <= new Date(max).getTime()) {
  325. bool = false;
  326. }
  327. return bool;
  328. },
  329. generateArray: function(start, end) {
  330. return Array.from(new Array(end + 1).keys()).slice(start);
  331. },
  332. formatNum: function(num) {
  333. return num < 10 ? '0' + num : num + '';
  334. },
  335. //一个月有多少天
  336. getMonthDay(year, month) {
  337. let days = new Date(year, month, 0).getDate();
  338. return days;
  339. },
  340. getWeekday(year, month) {
  341. let date = new Date(`${year}/${month}/01 00:00:00`);
  342. return date.getDay();
  343. },
  344. checkRange(year) {
  345. let overstep = false;
  346. if (year < this.minYear || year > this.maxYear) {
  347. uni.showToast({
  348. title: "日期超出范围啦~",
  349. icon: 'none'
  350. })
  351. overstep = true;
  352. }
  353. return overstep;
  354. },
  355. changeMonthHandler(isAdd) {
  356. if (isAdd) {
  357. let month = this.month + 1;
  358. let year = month > 12 ? this.year + 1 : this.year;
  359. if (!this.checkRange(year)) {
  360. this.month = month > 12 ? 1 : month;
  361. this.year = year;
  362. this.changeData();
  363. }
  364. } else {
  365. let month = this.month - 1;
  366. let year = month < 1 ? this.year - 1 : this.year;
  367. if (!this.checkRange(year)) {
  368. this.month = month < 1 ? 12 : month;
  369. this.year = year;
  370. this.changeData();
  371. }
  372. }
  373. },
  374. changeYearHandler(isAdd) {
  375. let year = isAdd ? this.year + 1 : this.year - 1;
  376. if (!this.checkRange(year)) {
  377. this.year = year;
  378. this.changeData();
  379. }
  380. },
  381. changeData() {
  382. this.days = this.getMonthDay(this.year, this.month);
  383. this.daysArr=this.generateArray(1,this.days)
  384. this.weekday = this.getWeekday(this.year, this.month);
  385. this.weekdayArr=this.generateArray(1,this.weekday)
  386. this.showTitle = `${this.year}年${this.month}月`;
  387. if (this.isChange && this.mode == 'date') {
  388. this.btnFix(true);
  389. }
  390. },
  391. dateClick: function(day) {
  392. day += 1;
  393. if (!this.openDisAbled(this.year, this.month, day)) {
  394. this.day = day;
  395. let date = `${this.year}-${this.month}-${day}`;
  396. if (this.mode == 'date') {
  397. this.activeDate = date;
  398. } else {
  399. let compare = new Date(date.replace(/\-/g, '/')).getTime() < new Date(this.startDate.replace(/\-/g, '/')).getTime()
  400. if (this.isStart || compare) {
  401. this.startDate = date;
  402. this.startYear = this.year;
  403. this.startMonth = this.month;
  404. this.startDay = this.day;
  405. this.endYear = 0;
  406. this.endMonth = 0;
  407. this.endDay = 0;
  408. this.endDate = "";
  409. this.activeDate = "";
  410. this.isStart = false;
  411. } else {
  412. this.endDate = date;
  413. this.endYear = this.year;
  414. this.endMonth = this.month;
  415. this.endDay = this.day;
  416. this.isStart = true;
  417. }
  418. }
  419. }
  420. },
  421. close() {
  422. // 修改通过v-model绑定的父组件变量的值为false,从而隐藏日历弹窗
  423. this.$emit('input', false);
  424. },
  425. getWeekText(date) {
  426. date = new Date(`${date.replace(/\-/g, '/')} 00:00:00`);
  427. let week = date.getDay();
  428. return '星期' + ['日', '一', '二', '三', '四', '五', '六'][week];
  429. },
  430. btnFix(show) {
  431. if (!show) {
  432. this.close();
  433. }
  434. if (this.mode == 'date') {
  435. let arr = this.activeDate.split('-')
  436. let year = this.isChange ? this.year : Number(arr[0]);
  437. let month = this.isChange ? this.month : Number(arr[1]);
  438. let day = this.isChange ? this.day : Number(arr[2]);
  439. //当前月有多少天
  440. let days = this.getMonthDay(year, month);
  441. let result = `${year}-${this.formatNum(month)}-${this.formatNum(day)}`;
  442. let weekText = this.getWeekText(result);
  443. let isToday = false;
  444. if (`${year}-${month}-${day}` == this.today) {
  445. //今天
  446. isToday = true;
  447. }
  448. this.$emit('change', {
  449. year: year,
  450. month: month,
  451. day: day,
  452. days: days,
  453. result: result,
  454. week: weekText,
  455. isToday: isToday,
  456. // switch: show //是否是切换年月操作
  457. });
  458. } else {
  459. if (!this.startDate || !this.endDate) return;
  460. let startMonth = this.formatNum(this.startMonth);
  461. let startDay = this.formatNum(this.startDay);
  462. let startDate = `${this.startYear}-${startMonth}-${startDay}`;
  463. let startWeek = this.getWeekText(startDate)
  464. let endMonth = this.formatNum(this.endMonth);
  465. let endDay = this.formatNum(this.endDay);
  466. let endDate = `${this.endYear}-${endMonth}-${endDay}`;
  467. let endWeek = this.getWeekText(endDate);
  468. this.$emit('change', {
  469. startYear: this.startYear,
  470. startMonth: this.startMonth,
  471. startDay: this.startDay,
  472. startDate: startDate,
  473. startWeek: startWeek,
  474. endYear: this.endYear,
  475. endMonth: this.endMonth,
  476. endDay: this.endDay,
  477. endDate: endDate,
  478. endWeek: endWeek
  479. });
  480. }
  481. }
  482. }
  483. };
  484. </script>
  485. <style scoped lang="scss">
  486. @import "../../libs/css/style.components.scss";
  487. .u-calendar {
  488. color: $u-content-color;
  489. &__header {
  490. width: 100%;
  491. box-sizing: border-box;
  492. font-size: 30rpx;
  493. background-color: #fff;
  494. color: $u-main-color;
  495. &__text {
  496. margin-top: 30rpx;
  497. padding: 0 60rpx;
  498. @include vue-flex;
  499. justify-content: center;
  500. align-items: center;
  501. }
  502. }
  503. &__action {
  504. padding: 40rpx 0 40rpx 0;
  505. &__icon {
  506. margin: 0 16rpx;
  507. }
  508. &__text {
  509. padding: 0 16rpx;
  510. color: $u-main-color;
  511. font-size: 32rpx;
  512. line-height: 32rpx;
  513. font-weight: bold;
  514. }
  515. }
  516. &__week-day {
  517. @include vue-flex;
  518. align-items: center;
  519. justify-content: center;
  520. padding: 6px 0;
  521. overflow: hidden;
  522. &__text {
  523. flex: 1;
  524. text-align: center;
  525. }
  526. }
  527. &__content {
  528. width: 100%;
  529. @include vue-flex;
  530. flex-wrap: wrap;
  531. padding: 6px 0;
  532. box-sizing: border-box;
  533. background-color: #fff;
  534. position: relative;
  535. &--end-date {
  536. border-top-right-radius: 8rpx;
  537. border-bottom-right-radius: 8rpx;
  538. }
  539. &--start-date {
  540. border-top-left-radius: 8rpx;
  541. border-bottom-left-radius: 8rpx;
  542. }
  543. &__item {
  544. width: 14.2857%;
  545. @include vue-flex;
  546. align-items: center;
  547. justify-content: center;
  548. padding: 6px 0;
  549. overflow: hidden;
  550. position: relative;
  551. z-index: 2;
  552. &__inner {
  553. height: 84rpx;
  554. @include vue-flex;
  555. align-items: center;
  556. justify-content: center;
  557. flex-direction: column;
  558. font-size: 32rpx;
  559. position: relative;
  560. border-radius: 50%;
  561. &__desc {
  562. width: 100%;
  563. font-size: 24rpx;
  564. line-height: 24rpx;
  565. transform: scale(0.75);
  566. transform-origin: center center;
  567. position: absolute;
  568. left: 0;
  569. text-align: center;
  570. bottom: 2rpx;
  571. }
  572. }
  573. &__tips {
  574. width: 100%;
  575. font-size: 24rpx;
  576. line-height: 24rpx;
  577. position: absolute;
  578. left: 0;
  579. transform: scale(0.8);
  580. transform-origin: center center;
  581. text-align: center;
  582. bottom: 8rpx;
  583. z-index: 2;
  584. }
  585. }
  586. &__bg-month {
  587. position: absolute;
  588. font-size: 130px;
  589. line-height: 130px;
  590. left: 50%;
  591. top: 50%;
  592. transform: translate(-50%, -50%);
  593. color: #e4e7ed;
  594. z-index: 1;
  595. }
  596. }
  597. &__bottom {
  598. width: 100%;
  599. @include vue-flex;
  600. align-items: center;
  601. justify-content: center;
  602. flex-direction: column;
  603. background-color: #fff;
  604. padding: 0 40rpx 30rpx;
  605. box-sizing: border-box;
  606. font-size: 24rpx;
  607. color: $u-tips-color;
  608. &__choose {
  609. height: 50rpx;
  610. }
  611. &__btn {
  612. width: 100%;
  613. }
  614. }
  615. }
  616. </style>