123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778 |
- <template>
- <view class="com-plan-date calendar">
- <view class="list">
- <view class="row" v-for="(row, rowIndex) in calendarRows" :key="rowIndex">
- <view class="item" v-for="(item, itemIndex) in row" :key="itemIndex">
- <text v-if="rowIndex === 0" class="text">{{ item }}</text>
- <!-- 显示日期 -->
- <view @click="onViewDate(item, itemIndex)" class="text" v-else :class="{ active: rowIndex === 1 && itemIndex === activeIndex }">{{ item.day }}</view>
- </view>
- </view>
- </view>
- </view>
- </template>
- <script>
- export default {
- name:"PlanDate",
- emits:['onSetDate'],
- data(){
- return {
- dataList:[],
- activeIndex:0,
- calendarRows:''
- }
- },
- created() {
- this.initDate();
- },
- methods:{
-
- onViewDate(e,index){
- this.activeIndex=index;
- console.log(e.date);
- this.$emit("onSetDate",e.date);
- },
- initDate() {
-
- let _this = this;
- let d = new Date();
- let weeks = ['日', '一', '二', '三', '四', '五', '六'];
-
- // 创建一个新的数组来存储日历的行
- _this.calendarRows = [];
-
- // 首行显示星期日到星期六
- _this.calendarRows.push(weeks);
-
- // 下面显示最近的14天
- let datesRow = [];
- for (var i = 0; i < 14; i++) {
- let temp = {
- 'date': d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate(),
- 'week': weeks[d.getDay()],
- 'day': d.getDate() < 10 ? '0' + d.getDate() : d.getDate(),
- }
- datesRow.push(temp);
-
-
-
- d.setDate(d.getDate() + 1);
- }
-
- // 如果日期少于7个,添加空元素
- while (datesRow.length < 7) {
- datesRow.push({});
- }
-
- _this.calendarRows.push(datesRow);
- }
- },
-
-
- }
- </script>
- <style scoped>
- @import url(./PlanDate.scss);
- </style>
|