PlanDate.vue 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. <template>
  2. <view class="com-plan-date calendar">
  3. <view class="list">
  4. <view class="row" v-for="(row, rowIndex) in calendarRows" :key="rowIndex">
  5. <view class="item" v-for="(item, itemIndex) in row" :key="itemIndex">
  6. <text v-if="rowIndex === 0" class="text">{{ item }}</text>
  7. <!-- 显示日期 -->
  8. <view @click="onViewDate(item, itemIndex)" class="text" v-else :class="{ active: rowIndex === 1 && itemIndex === activeIndex }">{{ item.day }}</view>
  9. </view>
  10. </view>
  11. </view>
  12. </view>
  13. </template>
  14. <script>
  15. export default {
  16. name:"PlanDate",
  17. emits:['onSetDate'],
  18. data(){
  19. return {
  20. dataList:[],
  21. activeIndex:0,
  22. calendarRows:''
  23. }
  24. },
  25. created() {
  26. this.initDate();
  27. },
  28. methods:{
  29. onViewDate(e,index){
  30. this.activeIndex=index;
  31. console.log(e.date);
  32. this.$emit("onSetDate",e.date);
  33. },
  34. initDate() {
  35. let _this = this;
  36. let d = new Date();
  37. let weeks = ['日', '一', '二', '三', '四', '五', '六'];
  38. // 创建一个新的数组来存储日历的行
  39. _this.calendarRows = [];
  40. // 首行显示星期日到星期六
  41. _this.calendarRows.push(weeks);
  42. // 下面显示最近的14天
  43. let datesRow = [];
  44. for (var i = 0; i < 14; i++) {
  45. let temp = {
  46. 'date': d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate(),
  47. 'week': weeks[d.getDay()],
  48. 'day': d.getDate() < 10 ? '0' + d.getDate() : d.getDate(),
  49. }
  50. datesRow.push(temp);
  51. d.setDate(d.getDate() + 1);
  52. }
  53. // 如果日期少于7个,添加空元素
  54. while (datesRow.length < 7) {
  55. datesRow.push({});
  56. }
  57. _this.calendarRows.push(datesRow);
  58. }
  59. },
  60. }
  61. </script>
  62. <style scoped>
  63. @import url(./PlanDate.scss);
  64. </style>